Products

[Markov]

Hi Claudia,

You can use the clearSelection method for this purpose.

grid.clearSelection();

Best regards,
Markov

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

[Markov]

Hi,

Please, check this: https://www.htmlelements.com/docs/grid/. It shows how to get started with our Grid component.

Best regards,
Markov

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

[Markov]

Hi,

Yes, it is. It is a native javascript component which can be used anywhere in any scenario.

Best regards,
Markov

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

[Markov]

Hi,

yes, this is possible.

<smart-editor id="editor"></smart-editor>

<script>
    window.onload = async () => {
        const editor = document.getElementById('editor');

        // Load remote content
        const response = await fetch("https://example.com/article.html");
        const html = await response.text();

        // Set the HTML content inside the editor
        editor.value = html;
    };
</script>

Best regards,
Markov

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

[Markov]

Hi,

This one is enabled by default. You can also paste an image from the clipboard.

Best regards,
Markov

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

[Markov]

Hi,

With React, you can do this:

import { Chart } from "smart-webcomponents-react/chart";
import { useEffect, useState } from "react";

export default function LiveChart() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const ws = new WebSocket('wss://example.com/live-data');
    ws.onmessage = (event) => {
      const point = JSON.parse(event.data);
      setData(prev => [...prev.slice(-49), point]); // keep last 50 points
    };
    return () => ws.close();
  }, []);

  return <Chart caption="Live Data" type="line" dataSource={data} />;
}

Using useState ensures reactive updates in React.

As for Typescript – sure, this is supported.

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible.

Example with React + React Router + Redux

import { Kanban } from "smart-webcomponents-react/kanban";
import { useSelector, useDispatch } from "react-redux";
import { setCards, setColumnFilter } from "./kanbanSlice";
import { useEffect } from "react";

export default function KanbanPage() {
  const dispatch = useDispatch();
  const cards = useSelector(state => state.kanban.cards);
  const filter = useSelector(state => state.kanban.columnFilter);

  // Save state to Redux when card changes
  const handleChange = (event) => {
    const { type, data } = event.detail;
    if (type === "update" || type === "add" || type === "delete") {
      dispatch(setCards(data));
    }
  };

  return (
    <Kanban
      dataSource={cards}
      columnProperty="status"
      columns={[
        { label: "To Do", dataField: "todo" },
        { label: "In Progress", dataField: "inProgress" },
        { label: "Done", dataField: "done" },
      ]}
      onChange={handleChange}
    />
  );
}

The idea is:

Data persistence: Kanban’s dataSource holds all cards; filters or column settings can also be tracked.
State storage options: Redux, Vuex, or React Context.
Local storage: Store JSON data in localStorage.

On navigation:

Save the current state and restore the state when the Kanban component is mounted again

Best regards,
Markov

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

[Markov]

Hi,

Conditional formatting for events

You can use eventRender to modify event appearance dynamically.

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

scheduler.dataSource = [
  { label: 'Meeting', dateStart: '2025-10-01T09:00', dateEnd: '2025-10-01T10:00', status: 'urgent' },
  { label: 'Lunch', dateStart: '2025-10-01T12:00', dateEnd: '2025-10-01T13:00', status: 'normal' }
];

// Apply styles based on event status
scheduler.eventRender = function(event, element) {
  if (event.status === 'urgent') {
    element.style.backgroundColor = '#FF4D4F'; // red
    element.style.color = '#FFFFFF';
  } else if (event.status === 'normal') {
    element.style.backgroundColor = '#1890FF'; // blue
  }
};

Best regards,
Markov

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

[Markov]

Hi,

You can use Smart Scheduler with state management libraries like Redux, Vuex, or even React’s useReducer to keep the scheduler in sync with your global store. The key idea is that the scheduler’s data and settings are treated as part of your app’s state, and any changes are dispatched to the store. Let me break it down for different scenarios.

Example with Redux:

import React, { useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { Scheduler } from "smart-webcomponents-react/scheduler";
import { addEvent, updateEvent, removeEvent } from "./schedulerSlice";

export default function SchedulerWithRedux() {
  const dispatch = useDispatch();
  const events = useSelector(state => state.scheduler.events);
  const schedulerRef = useRef(null);

  // Sync scheduler changes to Redux
  const handleEventChange = (event) => {
    const { type, eventDetails } = event.detail;
    if (type === 'add') dispatch(addEvent(eventDetails));
    if (type === 'update') dispatch(updateEvent(eventDetails));
    if (type === 'delete') dispatch(removeEvent(eventDetails));
  };

  useEffect(() => {
    const scheduler = schedulerRef.current;
    scheduler.addEventListener('change', handleEventChange);
    return () => scheduler.removeEventListener('change', handleEventChange);
  }, []);

  return (
    <Scheduler
      ref={schedulerRef}
      dataSource={events}
      view="week"
      views={['day', 'week', 'month']}
      dateCurrent={new Date()}
    />
  );
}

Best regards,
Markov

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

[Markov]

Hi,

You can use the dataSource property to data bind the table.

<smart-table id="table"></smart-table>

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

  table.columns = [
    { label: 'ID', dataField: 'id' },
    { label: 'Name', dataField: 'name' },
    { label: 'Email', dataField: 'email' }
  ];

  table.dataSource = [
    { id: 1, name: 'Alice', email: 'alice@example.com' },
    { id: 2, name: 'Bob', email: 'bob@example.com' },
    { id: 3, name: 'Charlie', email: 'charlie@example.com' }
  ];
</script>

Best regards,
Markov

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

[Markov]

Hi,

The Table supports only client side rendering as it is a component written in javascript, html and css. As for the data export, use the exportData method. More details: https://www.htmlelements.com/docs/table-api/

Best regards,
Markov

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

[Markov]

Hi,

You can handle the ‘change’ event of the editor and then use the getHTML method to get the html. By doing this, you can perform validation.

Best regards,
Markov

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

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/docs/blazor/. The tutorial will walk you through the required steps to get started with our blazor components in dotnet 9.

Best regards,
Markov

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

[Markov]

Hi,

Transitions are not supported in the Smart.Table component. As for responsiveness, just set its size in percentages in the CSS and this is enough.

Best regards,
Markov

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

[Markov]

In Smart Angular, the recommended way to add a context menu to the Kanban board is by handling the onContextMenu event of the <smart-kanban> component and then showing your own Smart.Menu (or Angular menu) bound to the event.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from 'smart-webcomponents-angular/kanban';
import { MenuModule } from 'smart-webcomponents-angular/menu';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, KanbanModule, MenuModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Template: 

<smart-kanban
  #kanban
  [columns]="columns"
  [dataSource]="data"
  (onContextMenu)="openContextMenu($event)">
</smart-kanban>

<smart-menu #menu [modal]="true" [mode]="'dropDown'">
  <smart-menu-item>Edit Task</smart-menu-item>
  <smart-menu-item>Delete Task</smart-menu-item>
  <smart-menu-item>Assign To...</smart-menu-item>
</smart-menu>

import { Component, ViewChild } from '@angular/core';
import { KanbanComponent } from 'smart-webcomponents-angular/kanban';
import { MenuComponent } from 'smart-webcomponents-angular/menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild('kanban', { static: true }) kanban!: KanbanComponent;
  @ViewChild('menu', { static: true }) menu!: MenuComponent;

  columns = [
    { label: 'To Do', dataField: 'toDo' },
    { label: 'In Progress', dataField: 'inProgress' },
    { label: 'Done', dataField: 'done' }
  ];

  data = [
    { id: 1, text: 'Create new feature', status: 'toDo' },
    { id: 2, text: 'Fix bug #42', status: 'inProgress' },
    { id: 3, text: 'Release version 1.0', status: 'done' }
  ];

  openContextMenu(event: CustomEvent) {
    event.preventDefault(); // prevent browser context menu
    const { originalEvent, target } = event.detail;

    // You can check target type: card, column, kanban
    console.log('Context menu target:', target);

    // Position menu at mouse pointer
    this.menu.open(originalEvent.pageX, originalEvent.pageY);
  }
}

Best regards,
Markov

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

[Author]

Posts