Products

[Markov]

Hi,

Please, look at: https://www.htmlelements.com/demos/table/overview/. The demo shows how to render custom content in the Table.

Best regards,
Markov

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

[Markov]

Hi,

You can use the animationDuration property.

const sampleData = [
    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];

const chart = new smartChart('#chart', {
	animationDuration: 500,
	caption: 'Fitness & exercise weekly scorecard',
	description: 'Time spent in vigorous exercise',
	dataSource: sampleData,
	xAxis:
	{
		dataField: 'Day',
		gridLines: {
			visible: true
		}
	},
	valueAxis:
	{
		description: 'Time in minutes',
		axisSize: 'auto',
		minValue: 0,
		maxValue: 100,
		unitInterval: 10
	},
	seriesGroups:
	[
		{
			type: 'column',
			columnsGapPercent: 50,
			seriesGapPercent: 0,
			series: [
				{ dataField: 'Keith', displayText: 'Keith' },
				{ dataField: 'Erica', displayText: 'Erica' },
				{ dataField: 'George', displayText: 'George' }
			]
		}
	]
});

Best regards,
Markov

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

[Markov]

Hi,

Yes, this is possible. The chart has a ‘click’ event. The event is triggered when the user clicks on a series element within the chart. This allows developers to respond to user interactions with individual data points, such as displaying details, highlighting the selected element, or performing custom actions based on the clicked series element.

Best regards,
Markov

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

[Markov]

Hi,

Yes, we support server side rendering in our Smart.Table. Please, look at https://www.htmlelements.com/demos/table/server-side-crud/

Hope this helps.

Best regards,
Markov

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

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

[Author]

Posts