Demos

[admin]

Hi Alex,

Yes, just set its value to an empty string like this – editor.value = ”;

Regards,
Markov

[admin]

For Smart Gantt, the cleanest approach is to enable the built-in editing features and make your data model the single source of truth.

A typical production pattern is:

Enable the required editing options (task editing, drag-and-drop, resizing, etc.) in the Gantt configuration.
Listen for the component’s edit/change events (such as task updates, resize, or move).
Update your application state or send the changes to your API from those event handlers.
When the server responds, update the underlying data source instead of forcing a full component refresh. This keeps the UI and your data synchronized.

If you’re seeing changes only after a manual refresh, it’s usually a sign that the component’s data source isn’t being updated reactively after edits. Rather than recreating the Gantt instance, update the affected task in your data model and notify the component of the data change using the framework’s reactive state management (or the component’s data update API, depending on your setup).

This event-driven approach scales well for both static and API-backed data, minimizes unnecessary re-renders, and provides a much smoother editing experience in production.

Regards,
Markov

[admin]

Hi,

For Smart.DateInput, the cleanest pattern is to keep the application state as the single source of truth and treat the component value as a controlled input. The component should handle user interaction, while Redux/Vuex/Pinia (or another store) owns the selected date value.

A typical flow is:

1. Store the date value in your global state.
2. Bind Smart.DateInput’s value to that state.
3. Listen for the component’s change event.
4. Dispatch an action/update the store when the user changes the date.
5. Let the store update flow back into the component.

Example with Vue-style state management:

<smart-date-input
    :value="selectedDate"
    @change="onDateChange">
</smart-date-input>

computed: {
    selectedDate() {
        return this.$store.state.filters.date;
    }
},
methods: {
    onDateChange(event) {
        this.$store.commit('setDate', event.detail.value);
    }
}

Regards,
Markov

[admin]

Hi Alex,

For Smart.Gantt, the cleanest approach is to make responsiveness part of the layout strategy rather than trying to resize the component manually on every window event.

A recommended pattern is:

1. Put Smart.Gantt inside a responsive container
– Use a parent element with flexible sizing (width: 100%, controlled height, flex/grid layout).
– Let the component calculate its available space from the container.

2. Handle resize events through a ResizeObserver
– Prefer observing the Gantt container instead of listening directly to window.resize.
– This also handles side panels, dashboard layout changes, and dynamic navigation areas.

Example:

const container = document.querySelector('#ganttContainer');
const gantt = document.querySelector('smart-gantt');

const resizeObserver = new ResizeObserver(() => {
    gantt.refresh();
});

resizeObserver.observe(container);

Regards,
Markov

[admin]

Hi,

The cleanest way to implement undo/redo for Smart Gantt task edits is to treat every edit as a command with a before/after state, rather than trying to restore the entire chart state.

Keep a history stack containing the changed task data:

– Before a task edit starts, store the original task state.
– After the edit completes, store the new state.
– Undo applies the old state.
– Redo applies the new state.
– Keep server persistence separate: when an undo/redo action changes a task, send the resulting task state back to the API so the backend stays synchronized.

A typical structure looks like:

const undoStack = [];
const redoStack = [];

function saveTaskChange(oldTask, newTask) {
    undoStack.push({
        oldValue: { ...oldTask },
        newValue: { ...newTask }
    });

    redoStack.length = 0;
}

function undo() {
    const action = undoStack.pop();

    if (!action) {
        return;
    }

    gantt.updateTask(action.oldValue.id, action.oldValue);

    redoStack.push(action);
}

function redo() {
    const action = redoStack.pop();

    if (!action) {
        return;
    }

    gantt.updateTask(action.newValue.id, action.newValue);

    undoStack.push(action);
}

Regards,
Markov

[admin]

Hi linda,

In our case, we keep the grid state (filters, sorting, pagination, etc.) synchronized with the Angular Router using query parameters, so users can navigate away and back without losing their current view.

If you’re seeing performance degradation with larger datasets, I’d first check whether route changes are causing the grid component to be recreated. Also, make sure you’re using OnPush change detection, trackBy for row rendering, and server-side paging/filtering if the dataset is large. In most cases, routing itself isn’t the bottleneck—it’s the component lifecycle or unnecessary grid re-renders triggered by navigation.

Regards,
Peter

[admin]

Hi Damir,

It does not matter whether the grid is initialized or not, it’s important to have the dataFields property of the dataSourceSettings object set and the columns to point to the data fields in the data fields collection. This way, the data will be readable and stored.

Regards,
Markov

[admin]

Hi Emily,

The best way is to look at the https://www.htmlelements.com/demos/grid/leads-template/ and how we define the templates with buttons in the first column. By using this approach there would not be unnecessary re-renders.

Regards,
Markov

[admin]

Hi,

You can use the Chart’s refresh() method which basically redraws the chart taking into account data changes.

Regards,
Markov

[admin]

Hi,

Yes, it is possible to enable / disable features when you create the editor and also dynamically. Please, refer to https://www.htmlelements.com/docs/editor-api/ for additional details about the available options.

Regards,
Markov

[admin]

Hi,

All online demos are with it.

Regards,
Markov

[admin]

Hi,

You can try this:

React + Redux integration (realistic pattern)
1. Treat Smart Table as controlled

<Table
  dataSource={data}
  sortMode="one"
  filterable
  paging
  pageIndex={page}
  pageSize={pageSize}
  onSort={handleSort}
  onFilter={handleFilter}
  onPage={handlePage}
/>

Wire events, Redux

const handleSort = (e) => {
  dispatch({
    type: 'SET_SORT',
    payload: e.detail.sortColumns
  });
};

const handleFilter = (e) => {
  dispatch({
    type: 'SET_FILTER',
    payload: e.detail.filters
  });
};

const handlePage = (e) => {
  dispatch({
    type: 'SET_PAGE',
    payload: e.detail.pageIndex
  });
};

Trigger API calls from state changes

useEffect(() => {
  dispatch(fetchTableData());
}, [sort, filter, page, pageSize]);

Fetch with state applied

export const fetchTableData = () => async (dispatch, getState) => {
  const { sort, filter, page, pageSize } = getState().table;

  const query = new URLSearchParams({
    page,
    size: pageSize,
    sort: JSON.stringify(sort),
    filter: JSON.stringify(filter)
  });

  const res = await fetch(<code>/api/data?${query}</code>);
  const data = await res.json();

  dispatch({ type: 'SET_DATA', payload: data });
};

Regards,
Markov

[admin]

Hi,

It is possible, you can look at this https://www.htmlelements.com/demos/scheduler/filtering/

Regards,
Markov

[admin]

Hi,

It’s possible, you can try something like this:

async function loadTasks() {
  const res = await fetch('/api/tasks');
  const tasks = await res.json();

  kanban.dataSource = tasks; 
}

Regards,
Markov

[admin]

Hi,

To customize the grid lines in the Smart UI Chart, you need to configure axis-related options within the seriesGroups property. While the context provided does not show direct axis or grid line properties, Smart UI Chart typically allows grid line customization via axis options (such as valueAxis, xAxis, or similar, which may include properties for grid line color, width, and style).

What is missing?
The relevant properties for grid line customization (for example, grid line color, width, or dash style) are not explicitly listed in the provided context. You should inspect the seriesGroups object, particularly its axis options like valueAxis and xAxis for members such as:

gridLinesColor
gridLinesWidth
gridLinesDashStyle
These are likely where grid line appearance can be customized.

Example setup (Pseudocode):

<smart-chart
  id="chart"
  [dataSource]="data"
  [seriesGroups]="seriesGroups"
></smart-chart>

// In your script:
const seriesGroups = [
  {
    type: 'line',
    valueAxis: {
      gridLinesColor: '#cccccc',
      gridLinesWidth: 1,
      gridLinesDashStyle: '4,4' // dashed grid lines
    },
    series: [
      { dataField: 'value', displayText: 'Example Series' }
    ]
  }
];

To customize grid lines, look for grid line properties inside the corresponding axis object within seriesGroups. If you need specific member names, review the seriesGroups documentation for axis customization options.

regards,
Markov

[Author]

Posts