Rank 1
Hi, In my application I have a sorting by both Column header click and by column menu. React
I am able to sort multiple columns only by column header click. Events triggerred in these headers click properly maintains their sort state variable, preserving the whole previous user inputs
But at the same time, I am not able to sort multi columns via column menu option. The event.sort for these events trigger only the current sort applied but not maintaining the previous inputs of it... The Grid refreshes everytime the new column menu input sort is provided
So, I need maintain a state combining both the sorting forms.
Any solutions to have a common state or to prevent the tefresh ?
And one more add on, I have given sortable.mode = multiple and sortable.allowUnsort = true.... How do we get to know the field name when unsort is applied, the event.sort simply returns an array and no info on the field name
2 Answers, 1 is accepted
Hi, Hindhuja,
Regarding the column menu, I tested it while setting the `mode` property of `editable` to `multiple`. This allowed me to sort multiple columns using the column menu. Is this what you need?
On the other hand, to get the unsorted field in the `onSortChange` handler, you can achieve this by storing the sort array length and the last item in the array. In the below example, in the `sortChange` function, when the sort array length decreases, I am logging the field name of the unsorted field:
However, if you prefer getting the field name directly in the event, I would suggest submitting a feature request in our feedback portal where new ideas are constantly being evaluated and the most popular ones are implemented in future releases:
I hope this helps, but please let me know if you have any further questions.
Regards,
Wissam
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 1
Yeah, https://stackblitz.com/edit/react-ybyxeu?file=app%2Fmain.jsx is the one I was looking for. But DatastateChangeEvent is not trigerred on the sort user action.
With the given above example, I have handled the below logic in different way, not as result, dataState.
Is there any other way of triggering the DataStateChange event without this
Hi, Hindhuja,
Changing the sorted state of the Grid should trigger its `DataStateChange` event. In addition, the sort state can only be handled using either the `onSortChange` event or `DataStateChange` event.
I could see based on the provided code sample that you are handling the data state change event as recommended in the documentation. Could you please provide me more information on what you want to change? In case you prefer not to have a `result` state variable, you can directly set the Grid's `data` prop to `process(products, dataState)`.
For convenience, I updated the previous example to use the `DataStateChange` event instead of `onSortChange`. In the `dataStateChange` method, I am calling the `sortChange` function that checks for the unsorted field:
I hope this helps.
Regards,
Wissam
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.