@boikom
@boikom
Forum Replies Created
-
AuthorPosts
-
admin
KeymasterHi,
All online demos are with it.
Regards,
Markovadmin
KeymasterHi,
You can try this:
React + Redux integration (realistic pattern)
1. Treat Smart Table as controlled<Table dataSource={data} sortMode="one" filterable paging pageIndex={page} pageSize={pageSize} onSort={handleSort} onFilter={handleFilter} onPage={handlePage} />Wire events, Redux
const handleSort = (e) => { dispatch({ type: 'SET_SORT', payload: e.detail.sortColumns }); }; const handleFilter = (e) => { dispatch({ type: 'SET_FILTER', payload: e.detail.filters }); }; const handlePage = (e) => { dispatch({ type: 'SET_PAGE', payload: e.detail.pageIndex }); };Trigger API calls from state changes
useEffect(() => { dispatch(fetchTableData()); }, [sort, filter, page, pageSize]);Fetch with state applied
export const fetchTableData = () => async (dispatch, getState) => { const { sort, filter, page, pageSize } = getState().table; const query = new URLSearchParams({ page, size: pageSize, sort: JSON.stringify(sort), filter: JSON.stringify(filter) }); const res = await fetch(<code>/api/data?${query}</code>); const data = await res.json(); dispatch({ type: 'SET_DATA', payload: data }); };Regards,
Markovadmin
KeymasterHi,
It is possible, you can look at this https://www.htmlelements.com/demos/scheduler/filtering/
Regards,
Markovadmin
KeymasterHi,
It’s possible, you can try something like this:
async function loadTasks() { const res = await fetch('/api/tasks'); const tasks = await res.json(); kanban.dataSource = tasks; }Regards,
MarkovApril 28, 2026 at 2:24 pm in reply to: How do I customize grid lines in Smart Chart using JavaScript? #113542admin
KeymasterHi,
To customize the grid lines in the Smart UI Chart, you need to configure axis-related options within the seriesGroups property. While the context provided does not show direct axis or grid line properties, Smart UI Chart typically allows grid line customization via axis options (such as valueAxis, xAxis, or similar, which may include properties for grid line color, width, and style).
What is missing?
The relevant properties for grid line customization (for example, grid line color, width, or dash style) are not explicitly listed in the provided context. You should inspect the seriesGroups object, particularly its axis options like valueAxis and xAxis for members such as:gridLinesColor
gridLinesWidth
gridLinesDashStyle
These are likely where grid line appearance can be customized.Example setup (Pseudocode):
<smart-chart id="chart" [dataSource]="data" [seriesGroups]="seriesGroups" ></smart-chart> // In your script: const seriesGroups = [ { type: 'line', valueAxis: { gridLinesColor: '#cccccc', gridLinesWidth: 1, gridLinesDashStyle: '4,4' // dashed grid lines }, series: [ { dataField: 'value', displayText: 'Example Series' } ] } ];To customize grid lines, look for grid line properties inside the corresponding axis object within seriesGroups. If you need specific member names, review the seriesGroups documentation for axis customization options.
regards,
MarkovApril 28, 2026 at 2:21 pm in reply to: How do I handle two-way binding with Smart Editor in web app? #113539admin
KeymasterHi,
You usually have to simulate two-way binding by explicitly syncing incoming props → editor state and editor changes → your app state, while guarding against loops and stale updates.
You can try this code:
function SmartEditorWrapper({ value, onChange }) { const editorRef = useRef(null); const lastValueRef = useRef(value); // Initialize editor once useEffect(() => { editorRef.current = createSmartEditor({ content: value, onUpdate: (newContent) => { // prevent unnecessary updates if (newContent !== lastValueRef.current) { lastValueRef.current = newContent; onChange(newContent); } } }); return () => editorRef.current?.destroy(); }, []); // Sync external value → editor useEffect(() => { if (!editorRef.current) return; if (value !== lastValueRef.current) { lastValueRef.current = value; editorRef.current.setContent(value); } }, [value]); return <div id="editor-container" />; }Regards,
Peteradmin
KeymasterHi,
You can refer v25.5 from your website as well. Codepen is a public tool.
Regards,
Markovadmin
KeymasterHi,
Unfortunately, we are unable to reproduce this based on the provided information using both versions. Could you share a codepen sample and steps to follow here?
Regards,
Markovadmin
KeymasterHi,
The public smart.elements.js in the demos is with ver. 25. You can click the Edit in Codepen button of some of the Grid demos to try it out and then share an example and steps which show an issue. We were not able to run the provided code snippet.
Regards,
Markovadmin
KeymasterHi,
Batch edit is supported, please refer to https://www.htmlelements.com/demos/grid/editing-batch/
Regards,
Markovadmin
KeymasterHi,
Please, look at https://www.htmlelements.com/docs/table-css/
Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/admin
KeymasterHi,
You need to set the dataSource property.
const table = document.getElementById('table'); table.columns = [ { label: 'Name', dataField: 'name' }, { label: 'Age', dataField: 'age' } ]; table.dataSource = [ { name: 'John', age: 30 }, { name: 'Anna', age: 25 } ];Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/admin
KeymasterHi,
The feature is supported.
<smart-table id="table"></smart-table> const table = document.getElementById('table'); table.virtualization = true;Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/admin
KeymasterHi,
Yes, it is possible. For example:
const table = document.querySelector('smart-table'); fetch('https://api.example.com/users') .then(res => res.json()) .then(data => { table.dataSource = data; });Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/admin
KeymasterHi,
Please, look at https://www.htmlelements.com/docs/kanban-css/
Best regards,
MarkovSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts