Products

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

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor-editor-toolbar-items/. You can determine which tools are displayed and which are not.

Best regards,
Markov

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

[Markov]

Hi,

No, the component is client-side built with JavaScript, CSS and HTML.

Best regards,
Markov

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

[Markov]

Hi,

CSS Customization

Since Smart Editor is a Component, you can style it using CSS custom properties (CSS variables) and normal CSS selectors.

Common CSS variables:

--smart-editor-background → editor background
--smart-editor-color → text color
--smart-editor-border-color
--smart-editor-toolbar-background
--smart-editor-toolbar-color

Best regards,
Markov

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

[Markov]

Hi,

Yes, you can use it. For example:

<smart-multi-combo-input id="employees"></smart-multi-combo-input>

<script>
    const multiCombo = document.getElementById('employees');

    // Fetch data from REST API
    fetch('https://api.example.com/employees')
        .then(response => response.json())
        .then(data => {
            // Assuming API returns: [{id:1, name:"Alice"}, {id:2, name:"Bob"}]
            multiCombo.dataSource = data.map(emp => emp.name);
        })
        .catch(error => console.error('Error fetching employees:', error));
</script>

Best regards,
Markov

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

[Author]

Posts