How can I prevent a row from jumping up or down due to a column's sorting or filtering? For example, in this link (https://stackblitz.com/edit/react-r5nvbb?file=app%2Fmain.jsx), sort by First Name, and then edit a cell (for example, edit the first name in the first row, Andrew Davolio to Jan Davolio) - how to prevent that row that's being edited from getting sorted dynamically while the user is interacting with it?
This is a major problem when someone filters for only one value (say, Andrew in the First Name column), and wants to change the first name to something else (anything but Andrew) - the row in edit completely disappears from view because the grid is filtering dynamically.
1 Answer, 1 is accepted
Hello, Janki,
Thank you for the example.
This can be done by sorting the data only when the user sorts a column, not each time the Grid is re-rendered:
https://stackblitz.com/edit/react-durpud?file=app/main.jsx
Please have in mind that the Grid shows the data that is passed to its data prop. This means that the developer has full control over when to sort, filter, and update the data.
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 4
Bronze
Iron
Iron
Hey Stefan,
Thank you for your reply and the example!
I have filtering (through column menus), sorting, and paging on the grid - in order to remove the process() function wrapping around the data in the grid component, do I have to create separate functions for onFilterChange, onSortChange, and onPageChange?
This seems like a lot of work just to ensure that the grid doesn't sort/filter out changes to a user-enabled edit row. Is there something I'm possibly missing? I found that when I had these onChange functions split out before, it made my application more prone to errors/bugs than if I handle everything in a process(orderBy(data, sort), datastate) function in the <Grid data={}> field.
There is no need to add all of these separate functions. The application can keep using the onDataStateChange event and the process method. The difference is that we have to call the process method inside the onDataStateChange event in order to process it once, not each time the state changes.
The important part with filtering is that we have to keep two separate data collections, one that has all of the data and one with the filtered data.
Another option is to have a custom cell that will keep the state internally and do not update the Grid while the user is typing. This will not move the cell even if it is sorted. It will move it when the user leaves the cell. This is an example on how to make a cell with an internal state:
https://stackblitz.com/edit/react-78t8gs-czip5g?file=app%2Fmain.jsx