Demos

[Markov]

Hi,

The easiest way is to handle the ‘change’ event and compare the value property of the editor with the value you want to compare with. By doing this, you will be able to implement custom validation. You can combine this feature with our Toast component and show Success or Error messages depending on the validation.

Best regards,
Markov

jQWidgets Team
https://www.jqwidgets.com/

[Markov]

Hi,

Sure, you can add it to a smart-window instant or even in any other modal dialog not built by us. Smart.Grid can be used in any container. By using the new ‘appendTo’ property, you can also lazy load it on demand when your application needs it.

Best regards,
Markov

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

[Markov]

Hi,

You can dynamically set its ‘dataSource’ property to a new array of tasks and it will re-render itself without any issues.

Best regards,
Markov

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

[Markov]

Hi,

This is possible, for example the following code shows how to fetch tasks from rest api and set the Kanban’s data source:

const kanban = document.getElementById("kanban");

// 1. Fetch data from REST API
async function loadTasks() {
    const res = await fetch("/api/tasks");
    const tasks = await res.json();

    // Load into the Kanban board
    kanban.columns = [
        { label: "To Do", dataField: "todo" },
        { label: "In Progress", dataField: "inprogress" },
        { label: "Done", dataField: "done" }
    ];

    kanban.dataSource = tasks;
}

// 2. Listen for card movement and update REST API
kanban.addEventListener("change", async (event) => {
    if (event.detail.type === "update") {
        const { id, status } = event.detail.item;

        await fetch(<code>/api/tasks/${id}</code>, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ status })
        });
    }
});

// Load tasks on startup
loadTasks();

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is definitely possible. Please, refer to https://www.htmlelements.com/demos/grid/datagrid-bind-to-csv/ and then https://www.htmlelements.com/angular/demos/grid/data-export/

Best regards,
Markov

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

[Markov]

Hi Michael,

You can follow this pattern with the Editor – https://www.htmlelements.com/angular/demos/input/reactiveforms/. Alternatively, you can dynamically set its value to a new property and handle its ‘change’ event to sync with the backend.

Best regards,
Markov

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

[Markov]

Hi,

At present, Virtual pagination is not available. We do not have an alternative feature for the Blazor Grid. This is in our to do list.

Best regards,
Markov

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

[Markov]

Hi Patrick,

You can use something like this: ` “columns”: [
{
“label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
labelTemplate: function () {
return “<smart-button>Add</smart-button><span style=\”margin-left: 20px;\”>ID</span>”;
}
},`

It renders a button inside the column header. Then you can bind to the columnClick event and handle the button click.

Best regards,
Markov

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

[Markov]

Hi,

This feature is not available in the Blazor Grid. Unfortunately, it cannot be used.

Best regards,
Markov

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

[Markov]

Hi linda,

Please, refer to https://www.htmlelements.com/docs/input-css/. The topic shows how to customize the style of the DateInput and the rest of the inputs.

Best regards,
Markov

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

[Markov]

Hi,

You can use the setCellValue(row, dataField, value) method, the updateRow method or set the Grid’s dataSource to a new Array of items.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

The summary of the column can be set to a function so it can calculate a custom summary.

` columns: [
{
label: ‘#’, width: 200, dataField: ‘id’
},
{
label: ‘First Name’, dataField: ‘firstName’
},
{ label: ‘Last Name’, dataField: ‘lastName’ },
{ label: ‘Product’, dataField: ‘productName’ },
{ label: ‘Quantity’, dataField: ‘quantity’, summary: [‘min’, ‘max’], align: ‘right’, cellsAlign: ‘right’, },
{ label: ‘Unit Price’, dataField: ‘price’, align: ‘right’, cellsAlign: ‘right’, cellsFormat: ‘c2’ },
{
label: ‘Total’, dataField: ‘total’, align: ‘right’, summary: ([{
‘Custom’: (currentValue, cellValue, dataField, data) => {
return currentValue + cellValue
}
}]), cellsAlign: ‘right’, cellsFormat: ‘c2’
}
]`

Best regards,
Markov

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

[Markov]

Hi,

To conditionally format items, you can use the onTaskRender callback function.

onTaskRender
function | null
This function enables complete customization of the task element within your interface. It accepts five arguments, providing granular control over both the task and its visual representation:

1. 'task' – The full task object containing all associated data.
2. 'segment' – The current segment object for the task. If the task consists of a single segment, this argument will be the same as the task object.
3. 'taskElement' – The root HTML element representing the task in the DOM.
4. 'segmentElement' – The HTML element representing the current segment of the task.
5. 'labelElement' – The HTML element that displays the segment’s label.

Best regards,
Markov

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

[Markov]

Hi,

It is supported. You can load tasks on demand. For example, check this demo with Paging: https://www.htmlelements.com/demos/gantt/paging/. It is possible to handle the pager’s events and put data on demand.

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is absolutely possible. Just add the Gantt chart to a smart-window instance and it will be displayed inside its.

Best regards,
Markov

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

[Author]

Posts