1 Answer, 1 is accepted
The described behavior can be achieved by setting a state variable to 'true'/'valse' and prevent the onSortChange event based on that variable. For example we can have an 'inEdit' variable which is set to true every time the cell/row enters in an edit mode, and set it to 'false' every time the user cancel/confirm the changes.
In the onSortChange event we can check if the variable is true and do not update the sort descriptor, or if it's false we can proceed the handling as normal.
I've prepared the following stackblitz example, demonstrating the usage of both Inline editing and Sorting features of the KendoReact Grid component:
https://stackblitz.com/edit/react-dsufbx?file=app/main.jsx
Please check my comments in the code for the logic responsible for the described behavior.
Please let me know if you need further assistance, or if i misunderstood your use case and i'll be more than happy to help!
Regards,
Kiril
Progress Telerik
Rank 1
I am having the same issue. The provided answer does not appear to be working correctly. When using the solution add a new record and type in "z" and the new row with jump to a different position. The same will occur when editing an existing row.
Tony
Hello, Tony,
The following behavior occurs because we are implementing the sorting logic in the data prop of the Grid, thus sorting every time on render. The grid operates with the data that we provide and if we want to change a certain behavior it is best to implement our desired logic to the data itself. In this case, we can perform the sorting in the handleSortChange event. This will apply the sorting only when the user sorts again:
handleSortChange = (e) => {
// Prevent Sort change if any row is in edit mode!
if(this.state.inEdit) {return;}
this.setState({
data: orderBy(this.state.data, e.sort),
sort: e.sort
});
}You can also review the full code and functionality in the following runnable snippet:
https://stackblitz.com/edit/react-dsufbx-bwydnf?file=app/main.jsx
Kind Regards,
Filip