Products

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

[Markov]

Hi,

You can take a look at https://www.htmlelements.com/demos/scheduler/custom-event-render/. The demo shows how to customize the rendering of the events.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi linda,

With the virtualization of the Table, it could handle tens of thousands of data rows and columns. You can also load data on demand with the Paging functionality.
As for editing, just set editable: true and the editing will be enabled.

Best regards,
Markov

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

[Markov]

Hi,

You can use the Column’s formatFunction to change what is displayed in the cells of a given column. In order to use the formatFunction, you will need to handle it through jsInterop as it is a dynamically called function on each cell refresh.

Best regards,
Markov

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

[Markov]

Hi,

We could not reproduce the provided behavior using the current version of Smart.Blazor. In our tests, we tested with various setups like freezing the first column, the last column, the first and the last column, setting different widths of the Grid. Please, send a complete demo to support@jqwidgets.com as there could be some additional factors which may be the reason of the behavior reported here.

Best regards,
Markov

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

[Author]

Posts