Products

[Markov]

Hi,

You can data bind our components using the dataSource property, however you cannot use the browser’s internal saved lists and this is on purpose for security reasons. If you need to use native auto-completition, you will have to use the native input tag as well.

Best regards,
Markov

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

[Markov]

Hi,

Undo/redo is supported only in the Smart.Grid component, but not in the Smart.Table component. The Grid component has undo and redo methods and you can also use Ctrl+Z and Ctrl+Y key shortcuts.

Best regards,
Markov

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

[Markov]

Hi,

Use can use local storage for the state. It keeps the editor state on page refresh or temporary browser session.

const editor = document.getElementById("editor");

// Save state
editor.addEventListener("input", () => {
  localStorage.setItem("editorState", editor.innerHTML);
});

// Restore state
window.addEventListener("load", () => {
  const saved = localStorage.getItem("editorState");
  if (saved) editor.innerHTML = saved;
});

As for your theming related question.

/* Apply a global theme for Smart Editor */
smart-editor {
  --smart-background: #1e1e2f;     /* Editor background */
  --smart-surface: #2c2c3c;        /* Toolbar background */
  --smart-border: #444;            /* Borders */
  --smart-primary: #4cafef;        /* Primary accent (buttons, highlights) */
  --smart-ui-state-hover: #555;    /* Hover state */
  --smart-ui-state-active: #4cafef;
  --smart-editor-text-color: #fff; /* Text inside editor */
}

Best regards,
Markov

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

[Markov]

Hi,

No, currently API to turn it off is not available. For the next version, we will add a new ‘autoSuggest’ boolean property.

Best regards,
Markov

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

[Markov]

Hi,

Preserving State on Route Changes.

You can bind to React State

import React, { useState } from "react";
import { Input } from "smart-webcomponents-react/input";

export default function MyForm() {
  const [value, setValue] = useState("");

  return (
    <div>
      <Input
        value={value}
        onChange={(e) => setValue(e.detail.value)} // Smart.Input passes value in e.detail.value
        placeholder="Type something..."
      />
      <p>You typed: {value}</p>
    </div>
  );
}

Best regards,
Markov

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

[Markov]

Hi,

It cannot be data bound to json but you can display json in it, if it is necessary. You need to set the editor’s innerHTML property to html string and it will be displayed.

Best regards,
Markov

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

[Markov]

Hi,

You can use the getText method which returns the content as plain text.

Best regards,
Markov

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

[Markov]

Hi,

If you’re planning to build an offline-capable application with Smart.Editor, here’s a practical approach:

1. Bundle All Assets Locally

Ensure that all essential resources (JS, CSS, images, fonts) that Smart.Editor needs are included in your app’s deployment artifacts—no remote CDN links. This ensures the editor can load even when the user is offline

2. Set Up a Service Worker

Use a Service Worker to cache all the required editor assets and pages for offline access. A typical “cache-first” pattern is recommended: serve from cache when available; otherwise, fetch and cache it

Best regards,
Markov

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

[Markov]

Hi,

Paste works by pressing Ctrl+V. There is no need to do anything else.

Best regards,
Markov

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

[Markov]

Hi,

In order to learn more about the auto-complete modes, please refer to https://www.htmlelements.com/demos/textbox/auto-complete/. As for the autocomplete=off of inner html elements, this is by design and will be there in any auto-complete mode of the inner input, because we do not use the native one. Our component displays a specific popup when the user types.

Best regards,
Markov

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

[Markov]

Hi,

Such language tag is indeed invalid and the error points it out. You can observe that the error is from the native JS Date.toLocaleString which means that nl_BE is invalid String for a Locale.

Best regards,
Markov

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

[Markov]

Hi,

You can use observable arrays for two-way data binding. By default Smart.DataAdapter handles this.

Best regards,
Markov

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

[Markov]

Hi,

You can look at https://www.htmlelements.com/demos/gantt/many-tasks/ and also the Gantt’s paging demo.

Best regards,
Markov

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

[Markov]

Hi,

There is a different component for a 3d chart. Here is how to initialize it:

<script>
    const data = [
        { Month: 'January', Sales: 30, Revenue: 200 },
        { Month: 'February', Sales: 40, Revenue: 220 },
        { Month: 'March', Sales: 50, Revenue: 250 },
        { Month: 'April', Sales: 70, Revenue: 300 },
        { Month: 'May', Sales: 60, Revenue: 280 }
    ];

    Smart('#chart', class {
        get properties() {
            return {
                caption: "3D Sales Chart",
                description: "Monthly Sales Data in 3D",
                showLegend: true,
                dataSource: data,
                xAxis: {
                    dataField: 'Month'
                },
                valueAxis: {
                    unitInterval: 20,
                    title: { text: 'Values' }
                },
                seriesGroups: [
                    {
                        type: 'column',   // 3D column
                        series: [
                            { dataField: 'Sales', displayText: 'Sales' },
                            { dataField: 'Revenue', displayText: 'Revenue' }
                        ]
                    }
                ]
            }
        }
    });
</script>

Best regards,
Peter Stoev

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

[Markov]

Hi,

Smart.Chart fully supports displaying multiple series types together in the same chart, including line + bar combinations.

You just need to define multiple series in the seriesGroups array, each with its own type.

Example: Line + Bar Chart in Smart.Chart
<div id=”chart” style=”width: 800px; height: 500px;”></div>

<script>
    const sampleData = [
        { Month: 'January', Sales: 30, Revenue: 200 },
        { Month: 'February', Sales: 40, Revenue: 220 },
        { Month: 'March', Sales: 50, Revenue: 250 },
        { Month: 'April', Sales: 70, Revenue: 300 },
        { Month: 'May', Sales: 60, Revenue: 280 }
    ];

    Smart('#chart', class {
        get properties() {
            return {
                caption: "Sales and Revenue",
                description: "Combined Line and Bar Series",
                showLegend: true,
                dataSource: sampleData,
                xAxis: {
                    dataField: 'Month'
                },
                valueAxis: {
                    title: { text: 'Values' }
                },
                seriesGroups: [
                    {
                        type: 'column',  // Bar/Column series
                        series: [
                            { dataField: 'Sales', displayText: 'Sales' }
                        ]
                    },
                    {
                        type: 'line',   // Line series
                        series: [
                            { dataField: 'Revenue', displayText: 'Revenue' }
                        ]
                    }
                ]
            }
        }
    });
</script>

Best regards,
Peter Stoev

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

[Author]

Posts