Demos

[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

[admin]

Hi,

You usually have to simulate two-way binding by explicitly syncing incoming props → editor state and editor changes → your app state, while guarding against loops and stale updates.

You can try this code:

function SmartEditorWrapper({ value, onChange }) {
  const editorRef = useRef(null);
  const lastValueRef = useRef(value);

  // Initialize editor once
  useEffect(() => {
    editorRef.current = createSmartEditor({
      content: value,
      onUpdate: (newContent) => {
        // prevent unnecessary updates
        if (newContent !== lastValueRef.current) {
          lastValueRef.current = newContent;
          onChange(newContent);
        }
      }
    });

    return () => editorRef.current?.destroy();
  }, []);

  // Sync external value → editor
  useEffect(() => {
    if (!editorRef.current) return;

    if (value !== lastValueRef.current) {
      lastValueRef.current = value;
      editorRef.current.setContent(value);
    }
  }, [value]);

  return <div id="editor-container" />;
}

Regards,
Peter

[admin]

Hi,

You can refer v25.5 from your website as well. Codepen is a public tool.

Regards,
Markov

[admin]

Hi,

Unfortunately, we are unable to reproduce this based on the provided information using both versions. Could you share a codepen sample and steps to follow here?

Regards,
Markov

[admin]

Hi,

The public smart.elements.js in the demos is with ver. 25. You can click the Edit in Codepen button of some of the Grid demos to try it out and then share an example and steps which show an issue. We were not able to run the provided code snippet.

Regards,
Markov

[admin]

Hi,

Batch edit is supported, please refer to https://www.htmlelements.com/demos/grid/editing-batch/

Regards,
Markov

[admin]

Hi,

Please, look at https://www.htmlelements.com/docs/table-css/

Best regards,
Markov

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

[admin]

Hi,

You need to set the dataSource property.

const table = document.getElementById('table');

table.columns = [
  { label: 'Name', dataField: 'name' },
  { label: 'Age', dataField: 'age' }
];

table.dataSource = [
  { name: 'John', age: 30 },
  { name: 'Anna', age: 25 }
];

Best regards,
Markov

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

[admin]

Hi,

The feature is supported.

<smart-table id="table"></smart-table>
const table = document.getElementById('table');

table.virtualization = true;

Best regards,
Markov

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

[admin]

Hi,

Yes, it is possible. For example:

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

fetch('https://api.example.com/users')
  .then(res => res.json())
  .then(data => {
    table.dataSource = data;
  });

Best regards,
Markov

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

[admin]

Hi,

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

Best regards,
Markov

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

[admin]

Hi,

Smart.Kanban uses templates, not standard <slot> elements.

You can define custom rendering via the template property (or column/task templates), which gives you full control over how cards look.

Example: Custom card template

kanban.taskTemplate = function (task) {
  return 

${task.text}

Owner: ${task.userId || ‘Unassigned’}

Priority: ${task.priority || ‘Normal’}

`;
};`

Best regards,
Markov

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

[admin]

Hi,

Inline task editing is supported in Smart Gantt.

Enable editing
<smart-gantt-chart editable></smart-gantt-chart>

What works out of the box
Task name → can be edited (usually via double-click)
Start/end dates → editable by dragging or resizing the task bar
Progress → adjustable via drag

This means users can modify tasks directly in the chart without an external form.

Best regards,
Markov

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

[admin]

Hi,

No, the component is client-side only.

Best regards,
Markov

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

[Author]

Posts