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
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
Hi Nadav,
Do you have documentation on how to use the SortCompare?
I need to sort the string with number in server side.
Thanks
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
- Documentation article - sort.compare
- Dojo Sample - https://dojo.telerik.com/UneyOCUz
- Documentation article - columns.sortable.compare
- Dojo Sample - https://dojo.telerik.com/ABOJUguN
Take a look at the resource above and let me know in case additional information is required.
Best regards,
Tsvetomir
Progress Telerik
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.
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
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);
}
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