bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
53 stars 6 forks source link

record.revertChanges doesn't work when using nested objects with a cell editor #9994

Open taauntik opened 2 weeks ago

taauntik commented 2 weeks ago

Forum post

Hello, I ran into another issue with Grid - the details are as follows:

Description: If you have a nested prop and the column pointing to it and you have the cell edit feature on, the record will not track and revert changes correctly.

Reproduction: Using https://www.bryntum.com/products/grid/examples/celledit/ paste the below code snippet and perform these actions: 1) edit a cell 2) press "Set Values" button on toolbar 3) press "Reset Values" button on toolbar

(steps 1 and 2 are interchangeable)

Expectation: Cells should reset to 0

Actual: records track the changes on the record.modified object. When using nested properties/values, the changes look like this: { nested: { value: 0 } }

When an input is changed, it's added to the modified in string notation: { 'nested.value': 0 }

When following the repro steps, the modified will look something like this: { nested: { value: 0 }, 'nested.value': 22 }

The values are applied in order, so the end result is 22

import { Grid, DataGenerator } from '../../build/grid.module.js?479193';

const grid = new Grid({
    appendTo : 'container',
    features : {
        cellEdit : true,
    },
    columns : [
        { text : 'Name', field : 'name', flex : 1 },
        { text : 'Nested Property', field : 'nested.value', flex : 1 },
    ],

data : DataGenerator.generateData(50).map((item) => {
    return {...item, nested: {
        value: 0
    }}
}),

tbar : [
    {
        type     : 'button',
        color    : 'b-blue',
        text     : 'Set Values',
        onAction : () => {
            grid.store.data.map(d => d.id).forEach(id => {
                grid.store.getById(id).set({ nested: { value: 22 } })
            })
        }
    },
    {
        type     : 'button',
        color    : 'b-red',
        text     : 'Reset Values',
        onAction : () => {
            grid.store.data.map(d => d.id).forEach(id => {
                grid.store.getById(id).revertChanges()
            })
        }
    }
]
});

Video

https://github.com/user-attachments/assets/eb2a3412-08db-46f8-833d-368c4a41cb58