Demos

[admin]

Hi,

Please, check https://www.htmlelements.com/docs/kanban-css/

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please refer to https://www.htmlelements.com/demos/kanban/editable/ which shows how to enable the editing.

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

You can look at https://www.htmlelements.com/demos/scheduler/travel-schedule/

Best regards,
Markov

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

[admin]

Hi,

Smart Gantt is UI-only, so it doesn’t talk to REST services by itself—but it’s designed to bind easily to data coming from a REST API and to sync changes back.

How it works (high level)

Fetch data from your REST API (tasks, dependencies, resources)

Map the response to the Smart Gantt task structure

Load it into the component

Listen for changes (add/update/delete)

Send updates back to your API

This works the same way in JavaScript, Angular, React, Vue, and Blazor.

Typical REST → Smart Gantt data flow
REST API ⇄ Frontend logic ⇄ Smart Gantt

Smart Gantt focuses on:

Visualization

Editing

Scheduling logic

Your app handles:

Data fetching

Persistence

Authentication

Business rules

Example (JavaScript)
fetch(‘/api/tasks’)
.then(res => res.json())
.then(data => {
gantt.tasks = data.map(task => ({
id: task.id,
label: task.name,
startDate: task.start,
endDate: task.end,
progress: task.progress
}));
});

Sending changes back to the API

Smart Gantt fires events when data changes.

gantt.addEventListener(‘change’, event => {
fetch(/api/tasks/${event.detail.id}, {
method: ‘PUT’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify(event.detail)
});
});

You can handle:

Task updates

New tasks

Deletions

Dependency changes

Best regards,
Markov

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/demos/kanban/export/

Best regards,
Markov

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

[admin]

Hi,

Please, take a look at https://www.htmlelements.com/themebuilder/ and https://www.htmlelements.com/docs/table-css/

Best regards,
Markov

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

[admin]

Hi,

Please, refer to https://www.htmlelements.com/demos/scheduler/overview/.

Best regards,
Markov

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

[admin]

Hi Patrick,

We just released a new version. You have an originalEvent parameter in the column click.
Alternatively, the column definition includes a new headerTemplate property which allows you to setup the column’s header after the label template is rendered.

Here’s the code:

` “label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
labelTemplate: function () {
return “AddID“;
},
headerTemplate: function (header) {
const button = header.querySelector(‘smart-button’);
button.addEventListener(‘pointerdown’, function (event) {
grid.addNewRow();
event.stopPropagation();
});
}`

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Yes, this is possible. Please, take a look at https://www.htmlelements.com/angular/demos/grid/server-side-paging-sorting-filtering-mysql-php/

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please, take a look at https://www.htmlelements.com/docs/gantt/. It shows how to get started with the Gantt in Vue.

Regards,
Markov

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

[admin]

Hi,

Yes, Smart Scheduler can be used inside modals or dialogs in Vue

Example:

<template>
  <div>
    <button @click="showModal = true">Open Scheduler</button>

    <smart-window v-if="showModal" label="Scheduler Modal">
      <smart-scheduler :dataSource="schedulerData"></smart-scheduler>
    </smart-window>
  </div>
</template>

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

To set the id of the Grid, set the id property of the dataAdapter object to the dataField you want to be used as an ID.

Best Regards,
Markov

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/. The demo is using buttons and handles the clicks.

Best regards,
Markov

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

[admin]

Hi,

We do not have such event at present.

Best regards,
Markov

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

[admin]

Hi Joost,

I prepared it for you. It is not part of official docs.

Best regards,
Peter Stoev

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

[Author]

Posts