Demos

[admin]

Hi,

Please, refer to https://www.htmlelements.com/docs/chart/ it shows how to data bind it.

Regards,
Markov

[admin]

Hi,

Unless you enable custom resizing, the resizing is disabled by default. The editor’s size depends on its CSS width and height properties.

Regards,
Markov

[admin]

Hi,

https://www.htmlelements.com/demos/editor/auto-save/ – this demo shows how to enable auto save in the Editor.

Regards,
Markov

[admin]

Hi,

You can check this https://www.htmlelements.com/docs/input-css/

Regards,
Markov

[admin]

Hi,

Please, look at https://www.htmlelements.com/demos/gantt/methods/

Regards,
Markov

[admin]

Hi,

The gantt chart is client-side only web component.

Regards,
Markov

[admin]

Hi,

Please, take a look at https://www.htmlelements.com/docs/gantt/. Then, you can check our online demos which show how to use the features of the gantt.

Regards,
Markov

[admin]

Hi,

To customize the Scheduler’s rendering, please look at https://www.htmlelements.com/demos/scheduler/travel-schedule/

Best regards,
Markov

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

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

[Author]

Posts