Demos

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

[Markov]

Hi,

To get or set the Editor’s value dynamically, you can use its value property.

Here is a basic sample which i hope will help you:

` // Initialize Firebase
const firebaseConfig = {
apiKey: “AIzaSy…yourKey…”,
authDomain: “yourapp.firebaseapp.com”,
projectId: “yourapp”,
storageBucket: “yourapp.appspot.com”,
messagingSenderId: “1234567890”,
appId: “1:1234567890:web:abcdef”
};

const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

const editor = document.getElementById(‘editor’);

// Save content to Firestore
document.getElementById(‘saveBtn’).addEventListener(‘click’, async () => {
const htmlContent = editor.value;
await db.collection(‘documents’).doc(‘exampleDoc’).set({ content: htmlContent });
alert(‘Saved to Firebase!’);
});

// Load content from Firestore
document.getElementById(‘loadBtn’).addEventListener(‘click’, async () => {
const doc = await db.collection(‘documents’).doc(‘exampleDoc’).get();
if (doc.exists) {
editor.value = doc.data().content;
} else {
alert(‘No content found!’);
}`

Best regards,
Markov

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

[Markov]

Hi,

You can bind the Kanban, handle its ‘change’ event and make updates to the original array or backend synchronization.

<smart-kanban id="kanban" editable></smart-kanban>
    <div id="output">Task count: <span id="count">0</span></div>

    <script>
        const tasks = [
            { id: 1, label: 'Task 1', status: 'To Do', priority: 'High' },
            { id: 2, label: 'Task 2', status: 'In Progress', priority: 'Low' }
        ];

        const kanban = document.getElementById('kanban');
        kanban.dataSource = tasks;
        kanban.columns = [
            { label: 'To Do', dataField: 'toDo' },
            { label: 'In Progress', dataField: 'inProgress' },
            { label: 'Done', dataField: 'done' }
        ];

        // Two-way binding: Changes in UI update the array
        kanban.addEventListener('change', (e) => {
        
        });

Best regards,
Markov

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

[Author]

Posts