Demos

[Markov]

Hi,

You can use the Chart’s gridLines property

xAxis: {
    gridLines: {
        visible: true
    }
},
yAxis: {
    gridLines: {
        visible: true
    }
}

Best regards,
Markov

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

[Markov]

Hi,

In order to implement two-way binding in the table, you will need to handle the cellEndEdit event to update your data source and listen to your data source changes and call addRow, removeRow and updateRow methods of the Table component. For more details about these https://www.htmlelements.com/docs/table-api/#toc-oncellendedit

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

To customize the tasks, you can use task templates. For example: https://www.htmlelements.com/demos/kanban/task-template/

Best regards,
Markov

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

[Markov]

Hi,

This is possible only with UL / OL commands. When you have a list and then click the UL or OL commands to create a nested list.

Best regards,
Markov

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

[Markov]

Hi,

Below is a React example with state management.

import React, { useEffect, useMemo, useReducer } from "react";
import { DateTimePicker } from "smart-webcomponents-react/datetimepicker";

type PickerState = {
  value: Date | null;
  timezone: string; // IANA name if you want to store it alongside
  dirty: boolean;
};

type Action =
  | { type: "setValue"; value: Date | null }
  | { type: "setTimezone"; timezone: string }
  | { type: "load"; state: PickerState }
  | { type: "resetNow" }
  | { type: "markSaved" };

const STORAGE_KEY = "demo.smart.datetimepicker.state";

function reducer(state: PickerState, action: Action): PickerState {
  switch (action.type) {
    case "setValue":
      return { ...state, value: action.value, dirty: true };
    case "setTimezone":
      return { ...state, timezone: action.timezone, dirty: true };
    case "resetNow":
      return { ...state, value: new Date(), dirty: true };
    case "markSaved":
      return { ...state, dirty: false };
    case "load":
      return action.state;
    default:
      return state;
  }
}

function safeParseStoredState(raw: string | null): PickerState | null {
  if (!raw) return null;
  try {
    const obj = JSON.parse(raw);
    return {
      value: obj.value ? new Date(obj.value) : null,
      timezone: typeof obj.timezone === "string" ? obj.timezone : "UTC",
      dirty: false,
    };
  } catch {
    return null;
  }
}

export default function DateTimePickerStateDemo() {
  const initial = useMemo<PickerState>(() => {
    const stored = safeParseStoredState(localStorage.getItem(STORAGE_KEY));
    return (
      stored ?? {
        value: new Date(),
        timezone: "UTC",
        dirty: false,
      }
    );
  }, []);

  const [state, dispatch] = useReducer(reducer, initial);

  // Persist whenever value/timezone changes
  useEffect(() => {
    localStorage.setItem(
      STORAGE_KEY,
      JSON.stringify({
        value: state.value ? state.value.toISOString() : null,
        timezone: state.timezone,
      })
    );
  }, [state.value, state.timezone]);

  // Smart Web Components typically emit CustomEvent with <code>detail.value</code>
  const handleChange = (e: any) => {
    const next = e?.detail?.value ?? null;
    // <code>next</code> is usually a Date; if it comes as string, normalize:
    const nextDate = next instanceof Date ? next : next ? new Date(next) : null;
    dispatch({ type: "setValue", value: nextDate });
  };

  const save = () => dispatch({ type: "markSaved" });

  return (
    <div style={{ padding: 16, display: "grid", gap: 12, maxWidth: 520 }}>
      <h3 style={{ margin: 0 }}>Smart.DateTimePicker + reducer state</h3>

      <DateTimePicker
        value={state.value ?? undefined}
        calendarButton
        spinButtons
        // Optional: set format-related props you like
        // formatString="dd-MMM-yyyy HH:mm"
        onChange={handleChange}
      />

      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <button onClick={() => dispatch({ type: "resetNow" })}>Now</button>
        <button
          onClick={() =>
            dispatch({
              type: "setValue",
              value: state.value ? new Date(state.value.getTime() + 60_000) : new Date(),
            })
          }
        >
          +1 min
        </button>
        <button
          onClick={() => {
            localStorage.removeItem(STORAGE_KEY);
            dispatch({
              type: "load",
              state: { value: new Date(), timezone: "UTC", dirty: false },
            });
          }}
        >
          Clear storage
        </button>

        <button disabled={!state.dirty} onClick={save}>
          {state.dirty ? "Save (mark clean)" : "Saved"}
        </button>
      </div>

      <div style={{ fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", fontSize: 12 }}>
        <div>value (ISO): {state.value ? state.value.toISOString() : "null"}</div>
        <div>timezone: {state.timezone}</div>
        <div>dirty: {String(state.dirty)}</div>
      </div>
    </div>
  );
}

Best regards,
Markov

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

[Markov]

Hi,

You can export the Editor to HTML like this https://www.htmlelements.com/demos/editor/export-html/. However, export to CSV/Excel is not supported.

Best regards,
Markov

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

[Markov]

Hi,

Smart.Editor lets you add custom toolbar items by defining toolbarItems entries as objects with a template (string or function). Your template can create and mount any Smart UI component (including dropdowns) inside the toolbar.
htmlelements.com

1) Add a custom dropdown to the main toolbar
<smart-editor id="editor"></smart-editor>

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

editor.toolbarItems = [
  'bold', 'italic', 'underline', '|',
  {
    name: 'mySnippetsDropdown',
    width: 180,
    template: (element, item) => {
      // Create once, reuse (prevents duplicates on rerender)
      if (!element.customElement) {
        const ddl = document.createElement('smart-drop-down-list');
        ddl.placeholder = 'Insert…';
        ddl.selectionMode = 'one';
        ddl.dataSource = [
          { label: 'Signature', value: 'Best regards,<br>Boyko' },
          { label: 'Meeting notes header', value: '<h3>Meeting Notes</h3><hr>' },
          { label: 'Callout', value: '<div class="callout">Tip: …</div>' }
        ];

        ddl.addEventListener('change', (e) => {
          const selected = e.detail?.value;
          if (!selected) return;

          // Insert at caret (pick the API you use in your app)
          // Common patterns: editor.insertHTML(...), editor.value += ..., or execCommand.
          if (typeof editor.insertHTML === 'function') {
            editor.insertHTML(selected);
          } else {
            // Fallback if you manage the content yourself:
            editor.value = (editor.value || '') + selected;
          }

          // Reset selection (optional)
          ddl.selectedIndexes = [];
        });

        element.customElement = ddl;
      }

      if (!element.contains(element.customElement)) {
        element.appendChild(element.customElement);
      }
    }
  },
  '|', 'undo', 'redo'
];

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

The easiest way is to handle the ‘change’ event and compare the value property of the editor with the value you want to compare with. By doing this, you will be able to implement custom validation. You can combine this feature with our Toast component and show Success or Error messages depending on the validation.

Best regards,
Markov

jQWidgets Team
https://www.jqwidgets.com/

[Markov]

Hi,

Sure, you can add it to a smart-window instant or even in any other modal dialog not built by us. Smart.Grid can be used in any container. By using the new ‘appendTo’ property, you can also lazy load it on demand when your application needs it.

Best regards,
Markov

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

[Markov]

Hi,

You can dynamically set its ‘dataSource’ property to a new array of tasks and it will re-render itself without any issues.

Best regards,
Markov

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

[Markov]

Hi,

This is possible, for example the following code shows how to fetch tasks from rest api and set the Kanban’s data source:

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

// 1. Fetch data from REST API
async function loadTasks() {
    const res = await fetch("/api/tasks");
    const tasks = await res.json();

    // Load into the Kanban board
    kanban.columns = [
        { label: "To Do", dataField: "todo" },
        { label: "In Progress", dataField: "inprogress" },
        { label: "Done", dataField: "done" }
    ];

    kanban.dataSource = tasks;
}

// 2. Listen for card movement and update REST API
kanban.addEventListener("change", async (event) => {
    if (event.detail.type === "update") {
        const { id, status } = event.detail.item;

        await fetch(<code>/api/tasks/${id}</code>, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ status })
        });
    }
});

// Load tasks on startup
loadTasks();

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is definitely possible. Please, refer to https://www.htmlelements.com/demos/grid/datagrid-bind-to-csv/ and then https://www.htmlelements.com/angular/demos/grid/data-export/

Best regards,
Markov

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

[Markov]

Hi Michael,

You can follow this pattern with the Editor – https://www.htmlelements.com/angular/demos/input/reactiveforms/. Alternatively, you can dynamically set its value to a new property and handle its ‘change’ event to sync with the backend.

Best regards,
Markov

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

[Markov]

Hi,

At present, Virtual pagination is not available. We do not have an alternative feature for the Blazor Grid. This is in our to do list.

Best regards,
Markov

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

[Markov]

Hi Patrick,

You can use something like this: ` “columns”: [
{
“label”: “Task ID”, allowEdit: false, “dataType”: “number”, “template”: “autoNumber”, width: 150,
labelTemplate: function () {
return “<smart-button>Add</smart-button><span style=\”margin-left: 20px;\”>ID</span>”;
}
},`

It renders a button inside the column header. Then you can bind to the columnClick event and handle the button click.

Best regards,
Markov

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

[Author]

Posts