reactjs - Cell edit handler like onCellChange - Stack Overflow

admin管理员组

文章数量:1291309

I use React Devextreame DataGrid to handle change on cell change.

I found many events but I can't to know the column change and the new value after change.

I use batch edeting mode,virtual scrolling mode, i tried onKeyDown, but in can get what i need

 <DataGrid
                scrolling={{ mode: "virtual" }}
                id={'id'}
                dataSource={dataDateGrid}
                onKeyDown={handleKeyDown} // Add key down event handler
                onColumnsChange={val => {
                    console.log('onColumnsChange', val)
                }}
                onEditingChange={val => {
                    console.log('onEditingChange', val)
                }}
              
            >

                <Editing
                    mode="batch"
                    allowUpdating

                />
 </DataGrid >

I tried function onChangesChange but i think it is not coorect

const handleChangesChange = (changes: any) => {
        if (changes.length > 0) {
            // Find the latest change by comparing with previous changes
            const latestChange = changes.find(
                (change: any) => !previousChangesRef.current.includes(change)
            );

            if (latestChange) {
                const { type, data, key, oldData } = latestChange;

                if (type === 'update') {
                    // Compare oldData and data to find the changed column
                    for (const column in data) {
                        console.log('column: ', column);
                        console.log('data: ', data);
                    }
                }

                // Update the previous changes
                previousChangesRef.current = changes;
            }
        }
    }

I use React Devextreame DataGrid to handle change on cell change.

I found many events but I can't to know the column change and the new value after change.

I use batch edeting mode,virtual scrolling mode, i tried onKeyDown, but in can get what i need

 <DataGrid
                scrolling={{ mode: "virtual" }}
                id={'id'}
                dataSource={dataDateGrid}
                onKeyDown={handleKeyDown} // Add key down event handler
                onColumnsChange={val => {
                    console.log('onColumnsChange', val)
                }}
                onEditingChange={val => {
                    console.log('onEditingChange', val)
                }}
              
            >

                <Editing
                    mode="batch"
                    allowUpdating

                />
 </DataGrid >

I tried function onChangesChange but i think it is not coorect

const handleChangesChange = (changes: any) => {
        if (changes.length > 0) {
            // Find the latest change by comparing with previous changes
            const latestChange = changes.find(
                (change: any) => !previousChangesRef.current.includes(change)
            );

            if (latestChange) {
                const { type, data, key, oldData } = latestChange;

                if (type === 'update') {
                    // Compare oldData and data to find the changed column
                    for (const column in data) {
                        console.log('column: ', column);
                        console.log('data: ', data);
                    }
                }

                // Update the previous changes
                previousChangesRef.current = changes;
            }
        }
    }

• reactjs
• events
• datagrid
• devextreme

Share Improve this question Follow edited Feb 14 at 13:57 hakre 198k5555 gold badges447447 silver badges854854 bronze badges asked Feb 13 at 15:04 alaa-sufialaa-sufi 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can use the onSaving callback to add functionality just before the cell/row changes are saved. You can compare the changes and check if a particular column is updated.

const onSaving = useCallback((e: DataGridTypes.SavingEvent) => {
  // e.changes is an array of pending row changes
  console.log(e.changes);

  // Access the changed column & value
  console.log(e.changes[0].data)
}, []);

And you can pass it as prop to the DataGrid component:

<DataGrid
  id="gridContainer"
  dataSource={dataSource}
  showBorders={true}
  selectedRowKeys={selectedItemKeys}
  onSelectionChanged={onSelectionChanged}
  onSaving={onSaving}
>
...
</DataGrid>

You can also use the onSaved callback, but in this callback you will get the entire row which is going to be updated. So you need to compare with the old values to determine the changed cell.

本文标签： reactjsCell edit handler like onCellChangeStack Overflow