Jean-Pierre
Top achievements
Rank 1
Rank 1
Jean-Pierre
asked on 09 Jan 2019, 04:02 PM
Hello,
In a react grid, i have an editable text field. I discovered that the whole grid was re-rendered after each keystroke. Depending on the size of the grid and its complexity, this may slow down the cell edition.
Is it possible to only re-render the edited cell ? How can I speed up cell edition ?
Regards,
Jean-Pierre
1 Answer, 1 is accepted
0
Hello, Jean-Pierre.
Yes, the Grid is re-rendered after each key press, but this is expected as it is taking advantage of React virtual DOM. Even if the render of the entire Grid component is called, React compare the DOM and only repainting the changed cell.
I extended our editing example to have more records and the Grid is still working at the same speed:
https://stackblitz.com/edit/react-bhmvrh?file=app/main.js
The main idea for speeding up is the ensure that the component that holds the Grid data state will have only the Grid, as this may cause re-render other components.
Regards,
Stefan
Progress Telerik
Yes, the Grid is re-rendered after each key press, but this is expected as it is taking advantage of React virtual DOM. Even if the render of the entire Grid component is called, React compare the DOM and only repainting the changed cell.
I extended our editing example to have more records and the Grid is still working at the same speed:
https://stackblitz.com/edit/react-bhmvrh?file=app/main.js
The main idea for speeding up is the ensure that the component that holds the Grid data state will have only the Grid, as this may cause re-render other components.
Regards,
Stefan
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items