kendo-angular-ui Grid Server Side Filter/Paging/sort

[bryian]

Where can I find an example of Server Side Filtering (multiple columns) using .net c# (API) / Angular 5? 

[Jeff]

I'm trying to implement something similar, but I have no control over the web api (not even written in .Net Core) or the format of the json received.

[Dimiter Topalov]

Hello Bryian,

The most straight-forward approach for achieving the server-side data operations in a .NET-based backend and consume it in a Kendo UI for Angular Grid, is described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

We suggest the general mechanism for a custom implementation to follow this pattern:

1) The Grid emits a filterChange (and subsequently - a dataStateChange) event that contain the current filter descriptors

2) Typically there is a data service that is called in the Grid event handler, passing the filters (or the whole state depending on whether all data operations like paging, sorting, etc. will be handled on the server)

3) The client data service performs a request to the remote server (in this case - the .NET backend API), passing the Grid state (the state needs to be serialized in a way that will be parsed successfully on the server - in our example this is done by the toDataSourceRequestString() function)

4) The request data is parsed on the server, the respective database query or other data manipulations are performed, and the resulting data set (typically an object with properties "data" that contains the data items collection, and "total" - the total number of items) is passed back as a response

5) The response is processed on the client such that the data object the Grid is bound to is updated with the new items and the Grid is rerendered.

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[bryian]

I'm good with kendo-angular-ui and Kendo-UI for ASP.NET Core.

Separate topic. I was wondering if the Kendo-UI for ASP.NET Core will work with Aurelia (aurelia-kendoui-bridge/grid/grid), if yes, where to find the sample code.

[Svet]

Hi Bryian,

I am afraid that Aurelia framework is out of the scope of the functionality and features provided by Kendo Ui for Angular. They should provide their own documentation as to what is supported.

On a side note, please open a separate thread for questions/issues that are not directly related to the thread's initial topic. This will facilitate a tidier support history and better support service in general. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Miguel]

Do you know where find any example of Server Side Kendo-UI Filter/Paging/sort like yiou mentioned?

Regards

[Svet]

Hi Jeff,

In general the grid is agnostic of where its data comes from. You can check the following article, dedicated to the data-binding of the grid, demonstrating some examples:
https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-binding/

We can further handle the (dataStateChange) event and send the current state of the grid to the server, where some custom logic can be implemented in order to do server filtering, sorting, paging etc. Indeed, the developer is control of using the proper server side technology and implementation, that will meet the requirements for the specific use case scenario.

In case further assistance is required for this case, could you open a new support ticket, where we can continue the discussion. This will help us to keep a clean history of the forum. Thank you in advance.

Regards,
Svetlin
Progress Telerik

[Jeff]

I've gotten past binding data to a grid.  The grid is sending properly sending skip and take to the web api.  My issue is with multiple column sorting.  Since I'm not using .Net Core, I do not have DataSourceRequest in the web api to extract the sort options.  Is there an example showing how I can implement multi-column sort without DataSourceRequest?

[Svet]

Hi Jeff,

Indeed, such implementation could be quite rigorous. But we do not provide such example as it would be using custom logic, that is entirely based on a specific implementation. 

Let me know in case I can provide any further assistance about the built in features of Kendo Ui for Angular.

Regards,
Svetlin
Progress Telerik

[Svet]

Hi Miguel,

Please check the following example projects using the DataSourceRequest model binder to perform data operations on the server:

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/aspnetcore-data

and

https://github.com/telerik/kendo-angular/tree/master/examples-standalone/aspnetwebapi-data

Both projects are referenced in the earlier suggested article in this thread:

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Michael]

Where did the above link move to? 

https://www.telerik.com/kendo-angular-ui/components/dataquery/mvc-integration/

returns 404

[Dimiter Topalov]

Hi Michael,

The URL now has a dash in the "data-query" part:

https://www.telerik.com/kendo-angular-ui/components/data-query/mvc-integration/

I apologize for the inconvenience.

Regards,
Dimiter Topalov
Progress Telerik

[Teun]

Is it possible to add server-side comparer logic to sort descriptors? The grid is based on served dto's that do not perfectly match the data models.

For example, an items grid has a column 'IsAvailable' where the database contains the names of people that booked an item. I would like users to be able to sort (and filter) on availability (true/false) but also handle it server-side because of pagination.

[Teun]

To clarify, I'd like to do this specifically for one (or a few) columns while still making use of the ToDataSourceResult() method to handle filtering/sorting/etc of all other, regular, fields.

[Svet]

Hi Teun,

Please see the following example that shows how to handle all data operations separately on the server:

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

The ApplyOrdersSorting function demonstrates how to apply any custom sort to the data on the server.

I hope this helps.