Demos

[admin]

Hi linda,

Yes, sure just place it in smart-window component and it will work and the keyboard navigation and focus are enabled by default.

Best regards,
Markov

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

[admin]

Hi,

Please, refer to https://www.htmlelements.com/demos/gantt/load-from-json/

Best regards,
Markov

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

[admin]

Hi,

Define Translations via messages

Smart.Gantt lets you override all UI text per locale:

const gantt = document.querySelector("smart-gantt");

gantt.messages = {
  en: {
    task: "Task",
    startDate: "Start Date",
    endDate: "End Date",
    duration: "Duration"
  },
  es: {
    task: "Tarea",
    startDate: "Fecha de inicio",
    endDate: "Fecha de fin",
    duration: "Duración"
  },
  fr: {
    task: "Tâche",
    startDate: "Date de début",
    endDate: "Date de fin",
    duration: "Durée"
  }
};

Set the Active Locale

gantt.locale = "es"; // Spanish

Use Messages in Columns (Labels)

Instead of hardcoding labels, pull from messages:

gantt.treeColumns = [
  { label: gantt.localize("task"), value: "label", size: "50%" },
  { label: gantt.localize("startDate"), value: "dateStart" },
  { label: gantt.localize("endDate"), value: "dateEnd" }
];

👉 localize(key) automatically uses the current locale.

4. Localize Tooltips

Smart.Gantt allows tooltip customization via templates or callbacks.

Example:

gantt.tooltipTemplate = function(task) {
  return 

${gantt.localize(“task”)}: ${task.label}
${gantt.localize(“startDate”)}: ${task.dateStart}
${gantt.localize(“endDate”)}: ${task.dateEnd}
`;
};

Localize Dates Properly (Important)

Smart.Gantt does not fully localize date formatting automatically in templates, so use the browser API:

function formatDate(date, locale) {
return new Intl.DateTimeFormat(locale).format(new Date(date));
}

gantt.tooltipTemplate = function(task) {
return `
${gantt.localize(“task”)}: ${task.label}
${gantt.localize(“startDate”)}: ${formatDate(task.dateStart, gantt.locale)}
${gantt.localize(“endDate”)}: ${formatDate(task.dateEnd, gantt.locale)}
`;
};`

Best regards,
Markov

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

[admin]

Hi,

Please, refer to https://www.htmlelements.com/demos/3d-chart/live-update/

Best regards,
Markov

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

[admin]

Hi,

All you need to do is to dynamically set the dataSource property to a new value.

Example:

const scheduler = document.querySelector('smart-scheduler');

// SET / REPLACE DATA (preferred for async updates)
scheduler.dataSource = [
  { id: 1, label: 'Event A', dateStart: new Date(), dateEnd: new Date() }
];

// UPDATE EXISTING EVENT (requires refresh)
const e = scheduler.dataSource.find(x => x.id === 1);
e.dateEnd = new Date(Date.now() + 3600_000);
scheduler.refresh();

// ADD EVENT
scheduler.dataSource = [
  ...scheduler.dataSource,
  { id: 2, label: 'Event B', dateStart: new Date(), dateEnd: new Date() }
];

// REMOVE EVENT
scheduler.dataSource = scheduler.dataSource.filter(x => x.id !== 1);

Best regards,
Markov

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

[admin]

Hi,

I tried to reproduce this in our https://www.htmlelements.com/demos/table/column-menu/, but could not. Could you share a sample we can test with or exact steps?

Best regards,
Markov

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

[admin]

Hi,

Please, refer to https://www.htmlelements.com/demos/grid/column-dynamic-template-with-components/

Best regards,
Markov

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

[admin]

Hi,

Yes, you can append it to the DOM dynamically or data bind it when you want by setting its dataSource property to a data.

Best regards,
Markov

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

[admin]

Hi,

You can try this way:

const input = document.getElementById('myInput');

input.addEventListener('change', (event) => {
  console.log('Value changed:', event.target.value);
});

Best regards,
Markov

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

[admin]

Hi,

Please, take a look at this https://www.htmlelements.com/demos/scheduler/custom-event-render/. It shows how to render custom content.

Best regards,
Markov

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

[admin]

Hi,

Sure, please look at the information below:

Recommended syncing model

1) One-way data flow for row data (store ➜ table)

Keep the canonical dataset in Redux/Vuex.

Feed the table from the store via table.dataSource (array or DataAdapter).

Set a stable row key with dataRowId so updates map to the correct row.

2) Event-driven updates for edits (table ➜ store)

Listen to edit events and dispatch actions:

cellEndEdit (cell editing) provides id, dataField, row, value.

rowEndEdit (row editing mode) provides id and full row.
sort gives current sort info if you want to store UI state.

Here’s a simple example which should help you with this approach:

// 1) Render from store
const table = document.querySelector("smart-table");
table.dataRowId = "id"; // stable identity mapping :contentReference[oaicite:10]{index=10}
table.dataSource = store.getState().rows;

// 2) Store -> table (subscribe)
let lastRows = store.getState().rows;
store.subscribe(() => {
  const nextRows = store.getState().rows;
  if (nextRows === lastRows) return;

  // For big changes: replace once + batch refresh
  table.beginUpdate();                 // :contentReference[oaicite:11]{index=11}
  table.dataSource = nextRows;         // :contentReference[oaicite:12]{index=12}
  table.endUpdate();                   // :contentReference[oaicite:13]{index=13}

  lastRows = nextRows;
});

// 3) Table -> store (edit events)
table.addEventListener("cellEndEdit", (e) => {
  const { id, dataField, value } = e.detail; // :contentReference[oaicite:14]{index=14}
  store.dispatch({
    type: "ROWS/PATCH",
    payload: { id, changes: { [dataField]: value } },
  });
});

// Optional: capture sort UI state into Redux
table.addEventListener("sort", (e) => {
  const { sortDataFields, sortOrders } = e.detail; // :contentReference[oaicite:15]{index=15}
  store.dispatch({ type: "TABLE/SORT_CHANGED", payload: { sortDataFields, sortOrders } });
});

if you want to prevent double-updates, compare value vs previous value from your store before dispatching, or debounce commit actions.

Best regards,
Markov

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

[admin]

Hi,

No, it is a client-side component, but it can be used along with NextJS, we handle this in the Table component when the SSR is enabled.

Best regards,
Markov

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

[admin]

Hi,

You can use the

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.

You can use these arguments to modify the appearance, content, and behavior of the task and its segments, allowing for advanced UI customizations tailored to different application needs.

Try a demo showcasing the onTaskRender property.
Example
Set the onTaskRender property.

 <smart-gantt-chart on-task-render='null'></smart-gantt-chart>

Set the onTaskRender property by using the HTML Element's instance.

 const ganttchart = document.querySelector('smart-gantt-chart');
 ganttchart.onTaskRender = function(task, segment, taskElement, segmentElement, labelElement) { if (task.type === 'task') { segmentElement.style.color = 'red'; } };

Get the onTaskRender property.

 const ganttchart = document.querySelector('smart-gantt-chart');
 let onTaskRender = ganttchart.onTaskRender;

Hope this helps.

Best regards,
Markov

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

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/input-api/ and go to the events section which includes the list of the event names and example how to add listeners.

Best regards,
Markov

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

[admin]

Hi,

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

Hope this helps.

Best regards,
Markov

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

[Author]

Posts