Demos

[Markov]

Hi,

Please, find below a demo which shows how to update a Task in the Blazor Kanban.

@page "/kanban-overview"

@using Smart.Blazor.Demos.Data
@inject RandomDataService dataService

<style>
    /* This is the CSS used in the demo */

    html,
    body {
    margin: 0;
    }
</style>
<Example Name="Kanban">
    <p>
        Kanban represents a UI component for mapping and visualizing each step of your process as a flow. The Kanban is usually named after the project you are assigned to work on.
        Every Kanban has three main sections that show the state of your tasks in the flow:
        <br /><br />
        - To Do - the area where you place the work that you plan to work on next.
        <br />- In Progress: when you start working on a particular task/card, you have to move it to "In Progress".
        <br />- Done: when the task is completed -> move it to Done.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Kanban @ref="kanbanRef"  Editable OnOpening="OpeningEvent" DataSource="dataRecords" Columns="@columns" Collapsible />
        <button class="btn btn-primary" @onclick="UpdateFirstTask">Update First Task</button>
    }
</Example>

@code {
    private Kanban kanbanRef;
    List<KanbanColumn> columns = new List<KanbanColumn>()
    {
        new KanbanColumn()
        {
            DataField = "ToDo",
            Label = "To do"
        },
        new KanbanColumn()
        {
            DataField = "InProgress",
            Label = "In progress"
        },
        new KanbanColumn()
        {
            DataField = "Testing",
            Label = "Testing"
        },
        new KanbanColumn()
        {
            DataField = "Done",
            Label = "Done"           
        }
    };

    void OpeningEvent(Event e)
    {
        KanbanOpeningEventDetail ed = e["Detail"];
        Console.WriteLine(ed);
    }

    private List<KanbanDataRecord> dataRecords;

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateKanbanData();
    }

    private void UpdateFirstTask()
    {
        if (dataRecords != null && dataRecords.Count > 0)
        {
            var updatedTask = new Dictionary<string, object>
                {
                    ["status"] = "Done",            // update the column/status
                    ["text"] = "Test"     // keep other properties unchanged
                                                    // add other fields if necessary
                };

            kanbanRef.UpdateTask(0, updatedTask); // call UpdateTask to refresh Kanban
        }
    }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Not sure how this is related to D3, but the Gantt can be data bound to Javascript Array. I would suggest you to take a look at our demos and docs about the gantt. Please, refer to https://www.htmlelements.com/docs/gantt/ for getting started with the component.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Have you tried calling beginUpdate before calling multiple times UpdateTask and EndUpdate after that?

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi Pavlov,

The Kanban has UpdateTask method to update a single task. Similar is available for the Gantt component. I suggest you to check this: https://www.htmlelements.com/docs/blazor-kanban-server-side-crud/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can check this: https://www.htmlelements.com/demos/gantt/custom-task-editor/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

A resolver is a service that implements Resolve<T> and pre-fetches data before the route activates.
The resolved data is then available via ActivatedRoute in your component.

This is perfect for @Input() bindings, because you can ensure the input has data immediately when the component is rendered.

Create a Resolver

// date.resolver.ts
import { Injectable } from ‘@angular/core’;
import { Resolve } from ‘@angular/router’;
import { Observable, of } from ‘rxjs’;
import { DateService } from ‘./date.service’;

@Injectable({ providedIn: ‘root’ })
export class DateResolver implements Resolve<Date> {
constructor(private dateService: DateService) {}

resolve(): Observable<Date> {
// Simulate API call or fetch default date
return this.dateService.getDefaultDate();
}
}

Attach Resolver to Route

// app-routing.module.ts
import { NgModule } from ‘@angular/core’;
import { RouterModule, Routes } from ‘@angular/router’;
import { DateInputPageComponent } from ‘./date-input-page/date-input-page.component’;
import { DateResolver } from ‘./date.resolver’;

const routes: Routes = [
{
path: ‘date-input’,
component: DateInputPageComponent,
resolve: { defaultDate: DateResolver } // key = ‘defaultDate’
}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}

// date-input-page.component.ts
import { Component, OnInit } from ‘@angular/core’;
import { ActivatedRoute } from ‘@angular/router’;

@Component({
selector: ‘app-date-input-page’,
template: `
<smart-date-input [value]=”preloadedDate”></smart-date-input>
`
})
export class DateInputPageComponent implements OnInit {
preloadedDate!: Date;

constructor(private route: ActivatedRoute) {}

ngOnInit(): void {
this.preloadedDate = this.route.snapshot.data[‘defaultDate’];
}
}

In general:

[value] binds the preloaded date to the Smart.DateInput.
Resolver ensures the data is ready before component initialization, so the date input is populated immediately.

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The tooltipFormatFunction allows you to customize the Chart tooltip.

Example:

chart.toolTipFormatFunction = function (value, itemIndex, serie, group) {
  const month = chart.dataSource[itemIndex].Month;
  const sales = chart.dataSource[itemIndex].Sales;
  return 

<div style=”color: #fff; background: #6610F2; padding: 5px; border-radius: 5px;”>
${month}: $${sales}
</div>`;
};`

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

The Editor has a content_css property which allows you to set a CSS which will be applied to the editor’s content.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can check this: https://www.htmlelements.com/docs/gantt-css/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Add the ‘theme’ attribute to the body tag and set it to “dark” to apply the dark theme. To un-apply it, remove the ‘theme’ attribute.

Alternatively, use the CSS variables API of the components.

For example:

/* Light theme */
:root {
  --smart-background: #ffffff;
  --smart-surface: #f9f9f9;
  --smart-border: #ddd;
  --smart-primary: #6610F2;
  --smart-color: #000000;
}

/* Dark theme */
.dark {
  --smart-background: #121212;
  --smart-surface: #1e1e1e;
  --smart-border: #333;
  --smart-primary: #00D647;
  --smart-color: #ffffff;
} 

Hope this helps.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

You can customize the CSS by using the CSS variable API of the Kanban

smart-kanban {
  --smart-primary: #6610F2;
  --smart-background: #f5f5f5;
  --smart-border-radius: 10px;
  --smart-kanban-card-color: white;
  --smart-kanban-card-background: #E7D9F8;
}

Also, take a look at https://www.htmlelements.com/angular/demos/kanban/kanban-custom-styling/

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

At present, the Smart Editor does not have a placeholder support. We will add a new work item for this missing feature.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

A pie chart can show percentages inside the slices. For this purpose you can use the formatFunction for this purpose.

Please, look at the sample code below:

const data = [
    { Category: 'A', Value: 30 },
    { Category: 'B', Value: 50 },
    { Category: 'C', Value: 20 }
  ];

  const chart = new window.Smart.Chart('#chart', {
    caption: "Pie Chart with Percentages",
    description: "Smart Chart - Pie example",
    showLegend: true,
    padding: { left: 5, top: 5, right: 5, bottom: 5 },
    titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
    dataSource: data,
    seriesGroups: [
      {
        type: 'pie',
        showLabels: true,
        series: [
          {
            dataField: 'Value',
            displayText: 'Category',
            // Format label to show percentage
            formatFunction: function (value, itemIndex, serie, group) {
              const total = data.reduce((sum, d) => sum + d.Value, 0);
              const percent = (value / total * 100).toFixed(1) + '%';
              return percent;
            }
          }
        ]
      }
    ]
  });

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Each task has an onRender callback which we call like this: task.onRender(task, segment, taskBar, segmentElement, labelWrapper);

We pass the task and the HTML Elements of the task so you can apply conditional rendering depending on task details. Hope this helps for the Gantt chart.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Markov]

Hi,

Smart Grid (smart-grid) is responsive out of the box, but to make it adapt nicely across different screen sizes you usually combine a few things:

Use percentage or auto width/height

Instead of fixed px, let the Grid resize with its container:

<smart-grid id="grid"></smart-grid>

<style>
  smart-grid {
    width: 100%;
    height: 100%;
  }

  /* Example: responsive container */
  .grid-container {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: hidden;
  }
</style>

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts