Products

[Markov]

Hi,

You can look at https://www.htmlelements.com/angular/demos/gantt/custom-popup-window/ which shows how to customize the tasks. You can use the onTaskRender function, too in order to customize the task rendering.

ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) {
}

Regards,
Markov

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

[Markov]

Hi,

Our Angular Editor has support for keyboard shortcuts. Please, look at https://www.htmlelements.com/angular/demos/editor/editor-keyboard-shortcuts/

Hope this helps.

Regards,
Markov

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

[Markov]

Hi,

You can check this: https://www.htmlelements.com/vue/demos/gantt/task-columns/. Editing in the demo is enabled. Double-click on a task to start editing it.

Regards,
Markov

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

[Markov]

Hi,

https://www.htmlelements.com/angular/demos/scheduler/overview/ – take a look at this. Double click on an event to begin editing it.

Regards,
Markov

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

[Markov]

Hi,

https://www.htmlelements.com/vue/demos/scheduler/events-firing/ – please check this demo

Regards,
Markov

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

[Markov]

Hi,

Please, take a look at https://www.htmlelements.com/docs/kanban-css/. This help topic shows how to customize the kanban’s appearance.

Regards,
Markov

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

[Markov]

Hi,

Yes, you can use it. Here’s an example with our Smart.Kanban and Smart.Window for Modal.

import React, { useState, useRef } from 'react';
import { Kanban } from 'smart-webcomponents-react/kanban';
import { Window } from 'smart-webcomponents-react/window';

export default function KanbanInWindow() {
  const [isOpen, setIsOpen] = useState(false);
  const kanbanRef = useRef(null);

  const dataSource = [
    { label: 'Task 1', status: 'todo' },
    { label: 'Task 2', status: 'done' }
  ];

  const columns = [
    { label: 'To Do', dataField: 'todo' },
    { label: 'Done', dataField: 'done' }
  ];

  // Refresh Kanban when window opens to ensure proper layout
  const onWindowOpen = () => {
    if (kanbanRef.current) {
      kanbanRef.current.refresh();
    }
  };

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Open Kanban Window</button>

      <Window
        opened={isOpen}
        onClose={() => setIsOpen(false)}
        onOpen={onWindowOpen}
        header="Kanban in Smart.Window"
        style={{ width: '600px', height: '500px' }}
        showCloseButton
        modal
      >
        <Kanban
          ref={kanbanRef}
          dataSource={dataSource}
          columns={columns}
          style={{ height: '100%', width: '100%' }}
        />
      </Window>
    </>
  );
}

Hope this helps

Regards,
Markov

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

[Markov]

Hi Alex,

You can just set its CSS width and height in percentages. The Kanban will auto-shrink and grow baased on its size adaptively.

Regards,
Markov

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

[Markov]

Hi,

The change event in Smart.Grid is triggered every time the selection changes, including when you click the same row twice.
So when you click the same row twice, it fires twice, but both have the same payload because the grid does not internally track a “previous state” for you.

` const data = [
{ Name: ‘John’, Age: 30 },
{ Name: ‘Alice’, Age: 25 },
{ Name: ‘Mark’, Age: 28 }
];

window.Smart(‘#grid’, class {
get properties() {
return {
selection: true,
dataSource: new Smart.DataAdapter({
dataSource: data,
dataFields: [
‘Name: string’,
‘Age: number’
]
}),
columns: [
{ label: ‘Name’, dataField: ‘Name’ },
{ label: ‘Age’, dataField: ‘Age’ }
]
};
}
});

const grid = document.querySelector(‘#grid’);

let previousSelection = [];

grid.addEventListener(‘change’, function (event) {
const currentSelection = grid.getSelection();

console.log(‘Previous:’, previousSelection);
console.log(‘Current:’, currentSelection);

// Compare changes
if (JSON.stringify(previousSelection) !== JSON.stringify(currentSelection)) {
console.log(‘Selection changed!’);
}

previousSelection = […currentSelection];
});`

Best Regards,
Markov

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

[Markov]

Hi Randy,

My colleague, just sent you a support email. I will post it here as well

Please, find below an example of a Transposed Grid in Blazor. We pass data with rows and columns, transpose it and pass it to the Grid to display it.

Hope this helps:

<Grid DataSource="@TransposedRows">
    <Columns>
        <Column DataField="AttributeName" Label="Attribute" />
        @foreach (var col in OriginalRowNames)
            {
                <Column DataField="@col" Label="@col" />
            }
        </Columns>
    </Grid>

@code {
    // Original data (e.g., 3 rows × 4 columns)
    private List<Dictionary<string, object>> OriginalData = new()
    {
        new Dictionary<string, object>{{"Name","Elem1"},{"Height",180},{"Weight",75},{"Color","Red"}},
        new Dictionary<string, object>{{"Name","Elem2"},{"Height",165},{"Weight",60},{"Color","Blue"}},
        new Dictionary<string, object>{{"Name","Elem3"},{"Height",172},{"Weight",68},{"Color","Green"}}
    };

    private List<ExpandoObject> TransposedRows = new();
    private List<string> OriginalRowNames = new();
    private List<string> Attributes = new();

    protected override void OnInitialized()
    {
        TransformData();
    }

    private void TransformData()
    {
        // Extract row names (from "Name" field)
        OriginalRowNames = OriginalData.Select(d => d["Name"].ToString()).ToList();

        // Extract attributes (keys except "Name")
        Attributes = OriginalData.First().Keys.Where(k => k != "Name").ToList();

        // Build transposed rows
        foreach (var attr in Attributes)
        {
            dynamic newRow = new ExpandoObject();
            var dict = (IDictionary<string, object>)newRow;
            dict["AttributeName"] = attr;

            for (int i = 0; i < OriginalData.Count; i++)
            {
                dict[OriginalRowNames[i]] = OriginalData[i][attr];
            }

            TransposedRows.Add(newRow);
        }
    }

    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Best regards,
Markov

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

[Markov]

Hi,

You can try this:

<template>
  <smart-kanban
    :dataSource="tasks"
    :columns="columns"
    collapsible
    style="height: 100%; width: 100%;"
  ></smart-kanban>
</template>

<script>
import 'smart-webcomponents-vue/kanban';

export default {
  data() {
    return {
      tasks: [
        { id: 1, status: 'toDo', text: 'Create layout', tags: 'UI' },
        { id: 2, status: 'inProgress', text: 'Connect API', tags: 'Backend' },
        { id: 3, status: 'done', text: 'Deploy to staging', tags: 'DevOps' }
      ],
      columns: [
        { label: 'To Do', dataField: 'toDo' },
        { label: 'In Progress', dataField: 'inProgress' },
        { label: 'Done', dataField: 'done' }
      ]
    };
  }
};
</script>

Best regards,
Markov

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

[Markov]

To implement custom filtering in Smart.Table using Blazor, you can use the Filterable property along with custom logic in C# to control how data is filtered. Here’s a step-by-step example.

<Table DataSource="@FilteredData"
             Filterable="true"
             Columns="@Columns">
</Table>

Define your columns:

@code {
    private List<TableColumn> Columns = new List<TableColumn>
    {
        new TableColumn { Label = "ID", DataField = "Id" },
        new TableColumn { Label = "Name", DataField = "Name" },
        new TableColumn { Label = "Status", DataField = "Status" }
    };

Setup the filtering:

 private List<Item> AllItems = new List<Item>
    {
        new Item { Id = 1, Name = "Task A", Status = "Open" },
        new Item { Id = 2, Name = "Task B", Status = "Closed" },
        new Item { Id = 3, Name = "Task C", Status = "In Progress" }
    };

    private List<Item> FilteredData = new List<Item>();

    private string filterText = "";

    protected override void OnInitialized()
    {
        FilteredData = AllItems;
    }

    private void OnFilterChanged(ChangeEventArgs e)
    {
        filterText = e.Value.ToString();
        ApplyCustomFilter();
    }

    private void ApplyCustomFilter()
    {
        if (string.IsNullOrWhiteSpace(filterText))
        {
            FilteredData = AllItems;
        }
        else
        {
            FilteredData = AllItems.Where(item =>
                item.Name.Contains(filterText, StringComparison.OrdinalIgnoreCase) ||
                item.Status.Contains(filterText, StringComparison.OrdinalIgnoreCase)).ToList();
        }
    }
}

Add a filter input

<input type="text" placeholder="Filter by name or status..." @oninput="OnFilterChanged" />

Best regards,
Markov

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

[Markov]

Hi,

Yes, Smart Gantt from Smart UI can be lazy-loaded in React using standard React features like React.lazy() and Suspense.

import React, { Suspense } from 'react';

const GanttChart = React.lazy(() => import('./SmartGanttComponent'));

function App() {
  return (
    <div>
      <h2>Project Timeline</h2>
      <Suspense fallback={<div>Loading Gantt chart...</div>}>
        <GanttChart />
      </Suspense>
    </div>
  );
}

export default App;

and SmartGanttComponent is

import React from 'react';
import 'smart-webcomponents-react/source/styles/smart.default.css';
import { GanttChart } from 'smart-webcomponents-react/ganttchart';

const SmartGanttComponent = () => {
  return (
    <GanttChart
      treeSize="30%"
      durationUnit="hour"
      dataSource={[]}
      taskColumns={[
        { label: 'Task Name', value: 'label' },
        { label: 'Start', value: 'dateStart' },
        { label: 'End', value: 'dateEnd' }
      ]}
    />
  );
};

export default SmartGanttComponent;

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Please, take a look at https://www.htmlelements.com/docs/gantt/. This guide will show you how to use the Gantt into a new react app.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

No, such events are not available. The API of the Grid with available events is available on this page: https://www.htmlelements.com/docs/grid-api/

Best regards,
Markov

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

[Author]

Posts