[REACT] OnSelectionChange setState

[it vec]

At the moment I don't know the correct way to use the bryntum reference, so try to handle the changes through the react state, the purpose of this is that I want to get the selected row to perform other actions in another section of the screen outside of bryntum

const handleSelectionChange = useCallback(({ selected, mode }) => {
    if (mode === 'row') {
        setSelectedRow(selected.length ? selected[0] : null);
    }
}, []);
    

// Bryntum conponent
<BryntumGrid
    title={title}
    tbar={
        headerActions.length > 0 ? {
            items: headerActions.map((action) => ({
               type: "widget",
               html: action,
           })),
           style: {
               display: "flex",
               width: "100%",
               height: "54px",
            },
         }
         :  undefined
     }
	ref={bryntumRef}
	columns={columns}
	data={data}
	store={{
		transformFlatData: true,
	}}
	// features 
	treeFeature
	filterBarFeature={{
		disabled: !enableFilterBar,
	    	// compactMode: false,
	}}
	cellEditFeature={{
		disabled: true,
	}}
	cellMenuFeature={{
		disabled: true,
	}}
	stripeFeature
	// selection config
	selectionMode={{
		// This enables selection of individual cells
		cell: false,
		// This enables selection of a column of cells by clicking column header
		column: false,
		// This adds a row number column which upon click, selects row
		rowNumber: false,
		// This enables selection of multiple rows using checkboxes
		checkbox: checkable,
		// This enables selection of multiple rows by holding down shift key
		multiSelect: multiCheck,
		dragSelect: multiCheck,
		// This enables deselection of a row upon click
		deselectOnClick: true,
	}}
	bbar={{
		type: "toolbar",
		cls: "style-bbar",
	items: [
		{
			type: "container",
			html: <BryntumPagination />,
		}],
	}}
	onSelectionChange={handleSelectionChange }
/>

I get as a result:

Warning: unstable_flushDiscreteUpdates: Cannot flush updates when React is already rendering.

Although my react status is updated, in the table, the row is no longer shown as selected, apart from the error shown above, what is wrong?

[tasnim]

Hi,

Please try our recommended way to set selected records https://bryntum.com/products/grid/docs/api/Grid/view/mixin/GridSelection#property-selectedRecords

In react, you could do it with a grid instance. Here is a guide on how to get the grid instance in react https://bryntum.com/products/grid/docs/guide/Grid/integration/react/guide#the-native-bryntum-grid-instance

Best regards,
Tasnim

[it vec]

Can you provide me an example where I can see more in depth the use of the ref, and how I can detect changes?

I wanted to use the table events, but I get the error I mentioned in the first comment

[tasnim]

Hi,

Sure, Here is a simple react code snippet for you

import { useEffect, useRef } from 'react';
import { BryntumGrid, BryntumDemoHeader } from '@bryntum/grid-react';

import './App.scss';
import { gridConfig } from './AppConfig';

function App() {
    const gridRef = useRef(null);

useEffect(() => {
    const grid = (gridRef.current as any).instance;
    grid.selectedRecords = [1];
}, []);

return (
    <>
        <BryntumDemoHeader />
        <BryntumGrid ref={gridRef} {...gridConfig} />
    </>
);
}

export default App;

I wanted to use the table events, but I get the error I mentioned in the first comment

Sorry, I don't understand what you mean by table events, could you please elaborate a bit further?

Best regards,
Tasnim