This is a migrated thread and some comments may be shown as answers.

Custom server side sorting

8 Answers 2262 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Nadav
Top achievements
Rank 1
Nadav asked on 10 Aug 2016, 10:39 AM

Hello

I want to completely control the server side sorting of my grid. Meaning, when I click a column header, I don't want the grid to do anything - I want to catch the sorting event, update some local parameters in my app, and use a fetch function that I have in my app.

All I want the column header to do is to present the arrow in the relevant direction.

I don't want to use transport.read and serverSorting=true because I seems to have no control over when this function is called.

I'm building my columns from the data received so I need to separate the data fetch from the grid's initial creation.

I tired solving this by catching a change event on the dataSource, and if the event.sender.sort() exists with the relevant parameters, it works, other than the fact that first the grid still sorts the data at client side, and only then it fetches my server side data, which causes a delay, bad performance (~1000 records/30 columns), and unnecessary sorting. event.preventDefault() doesn't stop the client side sorting from happening.

I'm currently using ui-grid (open source angular grid) which allows me to do so - just control the sorting functionality completely. Is that achievable with kendo grid?

8 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 12 Aug 2016, 01:08 PM
Hello Nadav,

Thank you for the interest in Kendo UI.

Using custom sorting for the Kendo UI Grid columns can be achieved by using its columns.sortable.compare property:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.sortable.compare

Additionally, when serverSorting is enabled, you will have full control over the sorting. The DataSource will leave the sorting implementation to the remote service. And you can implement the desired logic for sorting in the remote service:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-serverSorting

Let me know if you need additional information on this matter.

Regards,
Stefan
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Cherryln
Top achievements
Rank 1
answered on 01 Mar 2019, 01:38 PM

Hi Nadav,

 

Do you have documentation on how to use the SortCompare?

I need to sort the string with number in server side.

 

Thanks

0
Cherryln
Top achievements
Rank 1
answered on 01 Mar 2019, 01:39 PM
I mean Stefan.
0
Tsvetomir
Telerik team
answered on 05 Mar 2019, 01:29 PM
Hi Cherryln,

The sorting of records can be applied both the data source and to grid. For instance, the sort.compare function is a used to sort the data source, while the column.sortable.compare is used to sort the grid. For more information on both the cases, refer to the resources below:

1. Sort the Kendo UI DataSource 2. Sort the Kendo UI Grid

Take a look at the resource above and let me know in case additional information is required.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Cherryln
Top achievements
Rank 1
answered on 05 Mar 2019, 03:24 PM

This is how our code is structured.
<script>
var dataSource = new kendo.data.DataSource({
  transport: {
    /* transport configuration */
  },
  type: "aspnetmvc-ajax",

  serverFiltering: true,
  serverSorting: true,
  filter: { logic: "or", filters: [ { field: "Title", operator: "startswith", value: "CR1" }, { field: "Title", operator: "startswith", value: "CR2" } ] },
  sort: { field: "Title", dir: "asc", compare: function(a, b) {
                                                                return a.Title.localeCompare(b.Title, 'en', {numeric: true});
                                                } 
                                },
});
</script>              

And this method is the endpoint we are calling.
public JsonResult Data([DataSourceRequest] DataSourceRequest request, string filters)
{

              //request.Sorts[0].SortCompare is always null
                var gridItems = GetData();
                var gridData = gridItems.ToDataSourceResult(request);

                if (gridData.Total > maxCount)
                                gridData.Total = maxCount;

                return Json(gridData);

}

I am expecting to sort it like this:
CR1
CR2
CR10
CR100

but it doesn't behave that way.

Attached is the sample code for sorting alphanumeric properly.
But it only works when server serverSorting=false.


0
Tsvetomir
Telerik team
answered on 07 Mar 2019, 03:05 PM
Hi Cherryln,

By default, the data source performs the sorting on the client. This is why the sorting is properly applied when the serverSorting is set to false. When the property is set to true, the sorting operation is left to the remote endpoint. Simply the parameters are sent in an object with the field and direction of the sort. Further operations have to be handled manually. 

In other words, when serverSorting is set to true the compare function is ignored. More information on the matter can be obtained in the following article:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/serversorting

Let me know in case additional clarifications are needed.


Best regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Cherryln
Top achievements
Rank 1
answered on 07 Mar 2019, 06:36 PM

Hi Tsvetomir,

I understand all that.

All our sorting happens on the server side, hence we set serverSorting to true.

On the server side, we found a property on DataSourceRequest called "SortCompare". This is what we are trying to use but it doesn't seem to work because it is always NULL.

We tried instantiating it, but it is still not working.

Can you direct us to a documentation on how to properly use the server-side sort compare (SortCompare).

Please refer to the code snippet below.

public JsonResult Data([DataSourceRequest] DataSourceRequest request, string filters)
{
                request.Sorts[0].SortCompare  ---> is always null
                var gridItems = GetData();
                var gridData = gridItems.ToDataSourceResult(request);

                if (gridData.Total > maxCount)
                                gridData.Total = maxCount;

                return Json(gridData);

}

0
Tsvetomir
Telerik team
answered on 11 Mar 2019, 03:35 PM
Hi Cherryln,

When using a custom sorting, both the field and the sort direction are available via the request parameter. More specifically, a collection of SortDescriptor objects are available. What you can do is to loop through all of them and add sort expressions to the existing data. Here is a simple approach:

orders = orders.ApplyOrdersSorting(request.Groups, request.Sorts); // orders is the collection that comes from the database

public static IQueryable<OrderViewModel> ApplyOrdersSorting(this IQueryable<OrderViewModel> data,
  IList<SortDescriptor> sortDescriptors)
{
    if (sortDescriptors != null && sortDescriptors.Any()) // sortDescriptors are actually the request.Sorts
    {
        foreach (SortDescriptor sortDescriptor in sortDescriptors)
        {
            data = AddSortExpression(data, sortDescriptor.SortDirection, sortDescriptor.Member);
        }
    }
  
    return data;
}

The suggestion above can be seen in action in the live demo below. Have in mind that the demo is created for the ASP.NET MVC wrappers, but the server sorting is applicable to all technologies.

https://demos.telerik.com/aspnet-mvc/grid/customajaxbinding

As per the SortCompare object, it is actually a ClientHandlerDescriptor object. Which means that it would be only available when the sorting is executed on the client-side. In this case, it will not be available because the server sorting is enabled. 


Kind regards,
Tsvetomir
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Nadav
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Cherryln
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or