Products

[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/

[Markov]

Hi,

If you experience a strange behavior, please share an online example which we can try and test with. We shared in previous posts how to set up the functionality. From only a description, we would not be able to provide more details.

Best regards,
Markov

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

[Markov]

Hi,

The event is raised when the selection is changed i.e when a row is selected or unselected. In the case you describe, it will normally fire the two times, one for selection and another one for unselection. To get the state of the selection, the Grid has methods such as getSelectedRows and others. The full list of methods is available in the Grid API Docs and https://www.htmlelements.com/docs/grid-selection/

Regards,
Markov

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

[Markov]

Hi,

If it’s necessary, set the min-height CSS prop as well.

Regards,
Markov

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

[Markov]

Hi,

Please, take a look at this Table documentation: https://www.htmlelements.com/docs/table/ It shows how to create a new VUE app with the Table component.

Best regards,
Markov

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

[Author]

Posts