Batch editing like in DevExtreme DataGrid

[sjsingh85]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• React Grid
• React Chart
• React Scheduler

Description

I am trying to implement Batch editing like DevExtreme DataGrid

a. Buttons: To be used for server side save and reverting grid to original state.

• I understand that Save and Cancel buttons can be placed in toolbar using custom template like in this Example.
• Function callbacks for save and cancel could be passed in at parent/root level where this plugin is being used.

b. Modified records

• To keep a record of modified cells, I can either attach that information within the row record when onCommitChanges is called on client side.
• (Preferred) Or maintain a pluginstate as in the Example

Assuming my above assumptions are correct, and I am on right path:

1. How can I add an eventhandler for onCommitChanges to my custom template plugin.

2. How can I render a updated cell with a colored background or may be a button to undo that particular cell value? I tried implementing this using tableCell Template from Table plugin but could not figure out how to get all required props to be passed into Table.Cell component? Basically what all getters and actions will I have to declare to be passed into Table.Cell.

3. How will my custom edit templates be maintained if I modify this Table.Cell template?

Environment

• devextreme-reactive: latest
• react: latest
• browser: chrome
• material-ui: latest

[LazyLahtak]

Hi @sjsingh85,

I created an example illustrating how to implement batch editing with the TableInlineCellEditing plugin. The sample has some custom plugins:

• BatchChanges - applies changes without changing rows;
• BatchDisplaying - renders Table.Cells, which were changed with the subsequent change of the background color;
• BatchPanel - renders buttons in Toolbar, which apply or cancel displayed changes.

Please let us know if this sample meets your requirements.

[sjsingh85]

Thanks a lot @LazyLahtak, the example you provided is a perfect starting point for me.
This does clarify on how I can create custom templates (point 2 above) which was the major pain point for me.

I will work on it and ping back if I face any other challenges. Thanks!

[LazyLahtak]

You are welcome!

[sjsingh85]

Hey @LazyLahtak

I am seeing a bit of a performance issue with editing a cell in this example. If you increase the number of records to say 40 instead of 8, you can feel a lag while typing fast.
The reason for this is the logic in batch-displaying.js where we check which template to render for each cell. And for obvious reasons, as the number of rows increase - the performance degrades as react has to work on render cycle for each cell within it.

Profiler shows the issue as well.

Is there a way we can memoize <TemplatePlaceholder params={{ ...params }} />;
Thanks!

[LazyLahtak]

@sjsingh85,

Thank you for your response. We will research this issue and fix it in the next release. You can follow this topic to be informed about our progress.
Right now you can use VirtualTable to increase performance.