Using Bryntum Grid 5.6.8
I have a Grid that allows users to modify data in a Store. When I make changes to the record (programmatically using record.set) my row is updated and it displays the isModified value correctly. However, when I use record.clearChanges the isModified value gets set to false but my row doesn't seem to re-render. How can I get the row to update after clearing changes?
Example below: If you click Modify on any row the row is updated and displays "Modified? true" in the Name column. After clicking "Clear Changes" you can see in the console that isModified is false but the row did not re-render to display "Modified? false"
import { Store } from '@bryntum/core-thin';
import { BryntumGrid } from '@bryntum/grid-react-thin';
import { useRef } from 'react';
export function GridClient() {
const gridRef = useRef(null);
const gridConfig = useRef({
emptyText: 'There are no items available',
store: new Store({
data: [{ name: 'Hello' }, { name: 'World' }],
}),
columns: [
{
text: 'Name',
field: 'name',
flex: 1,
renderer: ({ record }) => {
return (
<div>
{record.name}
<br />
Modified? {record.isModified.toString()}
</div>
);
},
},
{
text: 'Action',
flex: 1,
renderer: ({ record }) => {
return (
<>
<input
type="button"
value="Modify"
onClick={() => record.set('name', 'Test')}
/>{' '}
<input
type="button"
value="Clear Changes"
onClick={() => {
record.clearChanges();
console.log('isModified?', record.isModified);
}}
/>
</>
);
},
},
],
});
return <BryntumGrid ref={gridRef} {...gridConfig.current} />;
}