[REACT] How to update row after clearing modified property

[dennyferra]

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} />;
}

[tasnim]

Hi,

What if you try this https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#function-refreshRows? Does that help?

[dennyferra]

Hi tasnim,

That did not work. I tried refreshRows but the row still does not update. I've attached a video of the behavior (using the example code above and added a call to refreshRows).

[tasnim]

Hi,

Please use https://bryntum.com/products/gantt/docs/api/Core/data/Model#function-revertChanges instead of clearChanges

record.revertChanges()

Now it should work

[dennyferra]

Hi tasnim,

Indeed, revertChanges does roll back the changes and re-renders the row with the previous data however I would like to keep the changes not revert them. For some reason my row keeps displaying "Modified? true" even after calling any of the following: record.clearChanges or record.firstStore.commit - After I make a call to either of those functions I check record.isModified and it returns "false". Next, if I call grid.renderRows I can see that the renderer has record.isModified set to false but the UI does not reflect that, it still displays "Modified? true"

Please see attached video. I added console log when the column renders and shows status of isModified.

In video you can see modify/revert is working correctly. I then try Modify, Commit Store, and Render Rows. Notice in console log after I click Render Rows the renderer runs and logs that record.isModified = false. However, the row still displays "Modified? true" - It appears that the renderer function ran but the UI was never updated - Below is my renderer function:

    renderer: ({ record }) => {
        const modified = record.isModified.toString();
        console.log(`RENDER ROW Name: ${record.name} isModified: ${modified}`);
        return (<div>{record.name}<br />Modified? {modified}</div>);
    },

Thank you for your help

[tasnim]

Hi,

Thank you for the report. We'll investigate it. Here is the ticket to track progress https://github.com/bryntum/support/issues/8808

Best regards,
Tasnim