Products

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/input/multi-combo-input/.

As for state management, you can use something like this:

// React component
import { MultiComboInput } from 'smart-webcomponents-react/multicomboinput';
import { useSelector, useDispatch } from 'react-redux';

const FruitSelector = () => {
    const selectedFruits = useSelector(state => state.selectedFruits);
    const dispatch = useDispatch();

    const handleChange = (event) => {
        const value = event.detail.value;
        dispatch({ type: 'SET_FRUITS', payload: value });
    };

    return (
        <MultiComboInput
            dataSource={['Apple', 'Banana', 'Orange', 'Grape']}
            selectedValues={selectedFruits}
            onChange={handleChange}
        />
    );
};

Best wishes,
Markov

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

[Markov]

Hi,

The data export options supported by our editor are HTML and PDF. Here is a link: https://www.htmlelements.com/demos/editor/export-html/

Best regards,
Markov

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

[Markov]

Hi,

Please, look at https://www.htmlelements.com/docs/editor/.

Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Please, refer to https://www.htmlelements.com/demos/scheduler/custom-event-render/. It shows how to customize the rendering of our Scheduler.

Best regards,
Markov

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

[Markov]

Hi,

The simplest way is:

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

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

// Initial data
let data = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 }
];

table.dataSource = data;

// Listen for changes
table.addEventListener('endEdit', (event) => {
    const { row, dataField, value } = event.detail;
    // Update the external model
    data[row][dataField] = value;
    console.log('Updated data:', data);
});
</script>

By handling the endEdit event and syncing with the data source.

Best regards,
Markov

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

[Markov]

Hi Randy,

Please, look at https://www.htmlelements.com/demos/tree/drag-drop/. The demo shows drag and drop between trees.

Best regards,
Markov

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

[Markov]

Hi,

The table module is source/modules/smart.table.js. The module includes all dependencies.

Best regards,
Markov

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

[Markov]

Hi,

Please, look at https://www.htmlelements.com/demos/grid/checkbox/. The demo shows how to achieve this.

Best regards,
Markov

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

[Markov]

Hi,

It is possible. Please, refer to https://www.htmlelements.com/demos/grid/virtualscroll/. Hope this helps.

Best regards,
Markov

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

[Markov]

Hi,

Yes, please look at https://www.htmlelements.com/demos/scheduler/export/. The demo shows how to export the scheduler’s data.

Regards,
Markov

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

[Markov]

Hi,

I prepared a React + Redux example using Smart.DateRangeInput with state management.
You can copy this as a single file for quick testing (using Create React App or Vite).

Please, refer to this demo:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider, useSelector, useDispatch } from 'react-redux';
import { configureStore, createSlice } from '@reduxjs/toolkit';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import 'smart-webcomponents-react/source/styles/smart.default.css';

// ---------------- Redux Slice ----------------
const dateRangeSlice = createSlice({
  name: 'dateRange',
  initialState: {
    value: ''
  },
  reducers: {
    setDateRange: (state, action) => {
      state.value = action.payload;
    }
  }
});

const { setDateRange } = dateRangeSlice.actions;

// ---------------- Store ----------------
const store = configureStore({
  reducer: {
    dateRange: dateRangeSlice.reducer
  }
});

// ---------------- Component ----------------
const DateRangePicker = () => {
  const dispatch = useDispatch();
  const dateRange = useSelector((state) => state.dateRange.value);

  const handleChange = (event) => {
    dispatch(setDateRange(event.detail.value));
  };

  return (
    <div style={{ fontFamily: 'Arial', padding: '20px' }}>
      <h2>Smart.DateRangeInput + Redux Example</h2>
      <DateRangeInput
        value={dateRange}
        onChange={handleChange}
        placeholder="Select date range"
        style={{ width: '300px' }}
      />
      <p style={{ marginTop: '10px' }}>
        <strong>Selected Range:</strong> {dateRange}
      </p>
    </div>
  );
};

// ---------------- App Wrapper ----------------
const App = () => (
  <Provider store={store}>
    <DateRangePicker />
  </Provider>
);

// ---------------- Render ----------------
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Best regards,
Markov

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

[Markov]

Hi,

Of course, it can be used inside modals or dialogs in plain JavaScript or frameworks like React, Vue, Angular. Since it’s a Web Component, it works in any container, including dynamically created elements such as dialogs or popups.

<link rel="stylesheet" href="https://www.htmlelements.com/demos/styles/smart.default.css" />
<script type="module" src="https://www.htmlelements.com/demos/scripts/smart.kanban.js"></script>

<button id="openModal">Open Kanban Modal</button>

<div id="myModal" style="display:none; position:fixed; top:20%; left:30%; width:600px; background:white; border:1px solid #ccc; padding:10px; z-index:9999;">
  <h3>Kanban in Modal</h3>
  <div id="kanbanContainer"></div>
  <button id="closeModal">Close</button>
</div>

<script>
const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
let kanban;

openBtn.onclick = () => {
  modal.style.display = 'block';

  if (!kanban) {
    kanban = document.createElement('smart-kanban');
    kanban.columns = [
      { label: 'To Do', dataField: 'toDo' },
      { label: 'In Progress', dataField: 'inProgress' },
      { label: 'Done', dataField: 'done' }
    ];
    kanban.dataSource = [
      { text: 'Task 1', status: 'toDo' },
      { text: 'Task 2', status: 'inProgress' },
      { text: 'Task 3', status: 'done' }
    ];
    document.getElementById('kanbanContainer').appendChild(kanban);
  } else {
    kanban.refresh(); // ensure layout adjusts
  }
};

closeBtn.onclick = () => {
  modal.style.display = 'none';
};
</script>

Best regards,
Markov

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

[Markov]

Hi,

Yes, of course. Here is a demo with hash router:

<div id="app"></div>

<nav>
  <a href="#/gantt">Gantt</a>
  <a href="#/about">About</a>
</nav>

<script type="module">
import 'smart-webcomponents/source/styles/smart.default.css';
import 'smart-webcomponents/source/modules/smart.ganttchart.js';

function loadGantt() {
  const container = document.getElementById('app');
  container.innerHTML = 

<smart-gantt-chart id=”gantt” view=”week” durationUnit=”day”></smart-gantt-chart>
`;

const gantt = document.getElementById(‘gantt’);
gantt.dataSource = [
{
label: ‘Project A’,
dateStart: ‘2025-07-01’,
dateEnd: ‘2025-07-15’,
type: ‘task’
}
];
}

function loadAbout() {
document.getElementById(‘app’).innerHTML = ‘<h2>About Page</h2>’;
}

window.addEventListener(‘hashchange’, route);

function route() {
const hash = location.hash;
if (hash === ‘#/gantt’) {
loadGantt();
} else {
loadAbout();
}
}

route(); // Initial load
</script>`

Best regards,
Peter Stoev

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

[Markov]

Hi,

You can achieve this with a custom v-model wrapper for Vue:

<template>
  <smart-date-range-input
    :value="modelValue"
    @change="$emit('update:modelValue', $event.detail.value)"
  ></smart-date-range-input>
</template>

<script>
export default {
  name: "DateRangeInputWrapper",
  props: {
    modelValue: String
  }
};
</script>

Regards,
Markov

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

[Markov]

Hi,

Yes, you can absolutely use Smart.DateRangeInput in a React app that interacts with a REST API. The component itself is a UI element for date range selection, so you can easily capture the selected range and then call your API with those dates as query parameters or in the request body.

Please, take a look at:

import React, { useRef, useState } from 'react';
import { DateRangeInput } from 'smart-webcomponents-react/daterangeinput';
import axios from 'axios';

export default function DateRangeExample() {
  const dateRangeRef = useRef();
  const [data, setData] = useState([]);

  const fetchData = async () => {
    const value = dateRangeRef.current.value; 
    const [startDate, endDate] = value.split(' - ');

    try {
      const response = await axios.get('https://api.example.com/data', {
        params: {
          start: startDate,
          end: endDate
        }
      });
      setData(response.data);
    } catch (error) {
      console.error('API Error:', error);
    }
  };

  return (
    <div>
      <DateRangeInput ref={dateRangeRef} placeholder="Select date range" />
      <button onClick={fetchData}>Load Data</button>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Regards,
Markov

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

[Author]

Posts