What is the revertChanges() effect of the grid.store method?

[scottlin]

Dear Sirs,

I add a "Reset" button to the grid editing top bar, which has Add, Delete, Edit buttons as well.
Did some test and found that the grid.store.revertChanges() will revert the changes made by Add and Delete, but not the Edit.

Please advise if this is the designed behavior or not.
Or what should I do in the Edit function so that reverChanges can take effect.

PS. Please also advise the name of the reset icon.

Thanks!

Scott Lin

        {
            type     : 'button',
            ref      : 'resetButton',
            icon     : 'b-fa-reset',
            text     : 'Reset',
            disabled : false,
            tooltip  : 'Reset changes (added, modified and removed rows)',
            onAction : async() => {
                grid.store.revertChanges();
                Toast.show('Changes reverted');
            }
        },

This is the code to update the grid.selectedRecord.data with the FieldSet input data:

const populationForm = new FieldSet({
    appendTo : 'container',
    title    : 'Population Editor',
    width    : '5em',
	hidden: false,
	collapsible: { direction: 'left' },
	scrollable: true,
    items: [
        { id: 'id', type: 'text', label : 'Id' },
        { id: 'country', type: 'text', label : 'Country' },
        { id: 'population', type: 'number', label : 'Population' },
        { id: 'yearlychange', type: 'number', label : 'Yearly Change' },
        { id: 'netchange', type: 'number', label : 'Net Change' },
        { id: 'density', type: 'number', label : 'Density' },
        { id: 'area', type: 'number', label : 'Area' },
        { id: 'migrants', type: 'number', label : 'Migrants' },
        { id: 'fert', type: 'number', label : 'Fert' },
        { id: 'age', type: 'number', label : 'Age' },
        { id: 'urban', type: 'number', label : 'Urban' },
        {
            type  : 'button',
            text  : 'Apply',
            style : 'margin:2em 0 1em 0',
            onClick() {
				grid.selectedRecord.data = populationForm.values;
            }
        }
    ]
});

[ghulam.ghous]

Hi Scottlin,

grid.store.revertChanges() reverts all the changes that includes added, removed and modified. https://bryntum.com/products/grid/docs/api/Core/data/mixin/StoreCRUD#function-revertChanges. Please see the clip below. About the reset button icon, I didn't get what you are saying. We use font-awesome icons with appending b- at the start of the class. https://bryntum.com/products/grid/docs/api/Core/widget/Button see here.

Screen Recording 2024-01-31 at 1.15.42 PM.mov

(5.94 MiB) Downloaded 16 times

Regards,
Ghous

[scottlin]

Dear Ghous,

Thanks for your information!

Please advise if there is an API to update the grid.selectedRecord.
I can not find a proper update API in the CRUD section of the Grid Store.

In the mean time, I test the cellEdit: true scenario, the revertChanges() do works.

I'm wondering if there is a way to update the state of the grid.selectedRecord to make it a 'dirty' state so that the revertChanges() can work.

[mats]

This should be easy to solve in your application code. You can store the selected record id yourself anytime and restore as well, anytime.

[ghulam.ghous]

Hi Scottlin,

Can you try using this in your fieldSet record.set('fieldName', newValue);? It makes the record dirty. You can check in gantt.selectedRecord.meta.modified. So I added a button besides the gantt and on Action of the button I updated the task name in the following manner using set method on model https://bryntum.com/products/gantt/docs/api/Core/data/Model#function-set

new Button({
    appendTo    : 'container',
    text     : 'Update Name',
    onAction : () => {
        gantt.selectedRecord.set('name', 'Updated Name');
    }
});

Then I reverted these changed using gantt.store.revertChanges.

Screen Recording 2024-01-31 at 9.14.30 PM.mov

(6.77 MiB) Downloaded 13 times

Hope it helps!

Regards,
Ghous

[scottlin]

Dear Ghous:

The revertChanges() worked now, many thanks!

record.set({
    name : 'Clark',
    city : 'Metropolis'
});

By referencing the code above, I change the following statement to:

grid.selectedRecord.set(populationForm.values);

Following is the Editor Form:

const populationForm = new FieldSet({
    appendTo : 'container',
    title    : 'Population Editor',
    width    : '5em',
	hidden: false,
	collapsible: { direction: 'left' },
	scrollable: true,
    items: [
        { id: 'id', type: 'text', label : 'Id' },
        { id: 'country', type: 'text', label : 'Country' },
        { id: 'population', type: 'number', label : 'Population' },
        { id: 'yearlychange', type: 'number', label : 'Yearly Change' },
        { id: 'netchange', type: 'number', label : 'Net Change' },
        { id: 'density', type: 'number', label : 'Density' },
        { id: 'area', type: 'number', label : 'Area' },
        { id: 'migrants', type: 'number', label : 'Migrants' },
        { id: 'fert', type: 'number', label : 'Fert' },
        { id: 'age', type: 'number', label : 'Age' },
        { id: 'urban', type: 'number', label : 'Urban' },
        {
            type  : 'button',
            text  : 'Apply',
            style : 'margin:2em 0 1em 0',
            onClick() {
				grid.selectedRecord.set(populationForm.values);
            }
        }
    ]
});

[ghulam.ghous]

Hi Scottlin,

Glad it worked, please don't hesitate to reach out to us if you have any further questions.

Regards,
Ghous