Demos

[Markov]

Hi,

It is possible to use CSS variables for this purpose. Please, refer to https://www.htmlelements.com/docs/input-css/

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible. As a solution look at the following code which fetches data from a server and data binds the Gantt chart to it.

// assume we have <smart-gantt-chart id="gantt"></smart-gantt-chart> in HTML
const gantt = document.getElementById('gantt');

// Function to map server model → Gantt model
function mapServerToGantt(serverTasks, serverLinks) {
  return {
    // the Gantt expects tasks + links (or inside dataSource)
    tasks: serverTasks.map(t => ({
      id: t.id,
      label: t.name,
      dateStart: t.startDate,
      dateEnd: t.endDate,
      progress: t.progress,
      // etc.
    })),
    links: serverLinks.map(l => ({
      id: l.id,
      source: l.fromTaskId,
      target: l.toTaskId,
      type: l.type  // e.g. “finish-to-start”
    }))
  }
}

// Initial load
fetch('/api/tasks')
  .then(r => r.json())
  .then(data => {
    const mapped = mapServerToGantt(data.tasks, data.links);
    gantt.dataSource = mapped;
  })
  .catch(err => {
    console.error('failed load tasks', err);
  });

// Listen for changes
gantt.addEventListener('onTaskChanged', (e) => {
  const changed = e.detail;  // depending on library’s event payload
  // you’ll have to inspect the event shape from the api docs
  fetch(<code>/api/tasks/${changed.id}</code>, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      startDate: changed.dateStart,
      endDate: changed.dateEnd,
      progress: changed.progress
    })
  }).then(/* … */).catch(/* … */);
});

// Similar for link-add / link-delete, etc.
gantt.addEventListener('onLinkAdded', (e) => {
  const link = e.detail;
  fetch('/api/links', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      source: link.source,
      target: link.target,
      type: link.type
    })
  }).then(/* … */).catch(/* … */);
});

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Sure, you can use it for example with our smart-window component. Just place the smart-scheduler tag inside it. There are not any known issues with this approach.

Best regards,
Markov

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

[Markov]

Hi,

Please look at https://www.htmlelements.com/demos/scheduler/export/.

Best regards,
Markov

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

[Markov]

Hi,

Yes, it can. You need to place the smart-grid tag inside a smart-window and that is all.

Best regards,
Markov

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

[Markov]

Hi,

This could be achieved by using the Chart’s range selector – https://www.htmlelements.com/demos/chart/range-selector-date/

Best regards,
Markov

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

[Markov]

Hi,

Basically, jqxChart and Smart.Chart share the same API. However, the main difference is that things marked as deprecated in the jqxChart are not included in Smart.Chart. I would suggest you to look the https://www.htmlelements.com/docs/chart-api/ to understand the API of Smart.Chart and also look at the available demos which show how to initialize the component and use the API.

Best regards,
Markov

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

[Markov]

Hi,

It is possible to use Next JS with Smart.Grid. Read https://www.htmlelements.com/docs/grid/. As for the rendering, the rendering of the grid will be on the client side.

Best regards,
Markov

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

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

[Author]

Posts