Rank 1
Hello everyone,
I'm having an issue when I add a "compare" function in the "group" field of the "State"(which take Array<GroupDescriptor> ).
It doesn't seem to be working as I don't see it in the URL query when I convert it to string from DataSourceRequestState with toDataSourceRequestString. Also the object received in data isn't sorted or process by the function as it should.
I try many things to make it work. I tried to change the function to a string. I even tried to encoded it directly in the URL.
I want to do something a little bit similar to what is on the kendo ui for jQuery on the groupable.sort. Except it will be on the group of State React :
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.groupable.sort.compare
Also, Sorry for my English, it is not my native language.
Thank you,
1 Answer, 1 is accepted
Hi Houcine,
The GroupDescriptor in KendoReact has "compare" option for passing custom compare function, but it is for client-side processing of the data and it will not be passed to the query string generated by toDataSourceRequestString, since the function can't be executed on server-side.
If you want to have custom compare function for the grouping I would suggest implementing it within the controller that will process the data. The DataSourceRequest will hold information about the GroupDescriptor and you can add your custom "compare" directly to the descriptor within the controller for the field in question.
Regards,
Konstantin Dikov
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 1
Hi Konstantin,
Thank you for the great response. I am mostly working on the frontend so I am a little bit out of knowledge about controllers. Do you know where can I find an example of the use of compares in the controller? I will greatly appreciate it,
Thank again,
Hi Houcine,
I have consulted with the MVC team and it seems that it is not possible to use custom compare function with server operations. As for the toDataSourceRequestString helper method, it will not be able to serialize the compare function.
Nevertheless, if you provide more information about the exact scenario that you have, how are you retrieving the data and the exact result that you want to achieve, we might be able to provide an alternative solution.
Looking forward to your reply with the additional details.
Rank 1
Hi Konstantin,
My problem is that I want to use a treelist that get the data directly from the datasource. Since I didn't see any example of that online for react, I did it manually but It come with alot of issues.
Since I have confidential code that I can't expose I will give you a shorter example to illustrate what I need.
So let say I want to have the treelist of animals( with classification) like the one I joined as a file/picture. Each animal have its own family, order and class. I also want to have some agreggate information such as the count of healthy, unhealthy and the ratio of healthy animals for each group (which is why I asked for the custom compare). However I also want to sort each columns desc/asc(even for the ratio).
The things is that. on the server side, I only have rows of animals with id from their respected family, order and class( as shown in the file/picture as a grid). What I do currently is group them by Family and Order. It is working right now. The response data give me the right grouping. I then create my own treelist with the response However, I am not capable of doing the sorting with the grouping. The sorting should happen when I press any column in the column Header. It should sort it by the column that was pressed.
Thank you again for the help. I know this is a lot of informatio so feel free to ask any clarification,
Hi Houcine,
For what I understand, you can send all items from the server-side on the client and prepare the data to be used either within the Grid or within the TreeList. Looking at the data itself, it might be more convenient to use the TreeList component directly, which will provide the sorting functionality that you want:
However, if you want to use the Grid, note that the SortDescriptors passed within the helper "process" method will sort the items within the group with that sort expression and not the groups. Nevertheless, you can manually add "compare" function to the GroupDescriptor as well if you want the groups to be sorted with a different logic as well:
I should point out that each group item has only a value based on the group field and the child items for a group can have different values for each of the other fields, so relying on those values for sorting a group is not stable. With that in mind, the TreeList where each node is a separate data item might be the better solution.
Rank 1
Hi Konstantin,
I should have added one more details. We can't get all items at once because it will be really heavy on the client-side. It tried the process it is working fine. However, I have a problem when I use sorting and grouping together in the URL request(toDataSourceRequestString). The URL itself is fine, but the result isn't sorted. It is grouped though. Are all the features from the "process" method also available in the server side(except "compare" field if I understand correctly)?
I joined a screenshot of my "TreelistState" object which is only an extension of State(from kendo-data-query) with a new "expanded" field.
Again feel free to ask anymore details, I think we will get the bottom of it soon enough,
Thank you
The State from the screenshot should be handled correctly with the server-side ToDataSourceResult method. However, the sort expression will be applied only for the data items and not over the group items. You can check the behavior of the sorting in the following MVC demo (which uses DataSourceRequest and ToDataSourceResult):
The result is the same as with the KendoReact's "process" method.
Since you can't pass all items, the only remaining option is to manually build the response on server-side using the information from the DataSourceRequest. A possible implementation for custom binding with the DataSourceRequest can be found in the following MVC demo:
If you go to "View Source" and "CustomAjaxBindingController.cs" you will find custom implementation for the data operations using the DataSourceRequest data.