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

5 Answers 1375 Views
General Discussions
bryian
Top achievements
Rank 1
bryian asked on 13 Feb 2018, 10:53 PM
Where can I find an example of Server Side Filtering (multiple columns) using .net c# (API) / Angular 5? 
Jeff
Top achievements
Rank 1
commented on 30 Nov 2018, 01:16 PM

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.

5 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 15 Feb 2018, 01:03 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
bryian
Top achievements
Rank 1
commented on 16 Feb 2018, 08:24 PM

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
Telerik team
commented on 20 Feb 2018, 02:27 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Miguel
Top achievements
Rank 1
commented on 08 May 2020, 03:11 PM

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

Regards


0
Svet
Telerik team
answered on 04 Dec 2018, 07:51 AM
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
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.
Jeff
Top achievements
Rank 1
commented on 07 Dec 2018, 01:26 PM

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
Telerik team
commented on 11 Dec 2018, 08:28 AM

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
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
Svet
Telerik team
answered on 12 May 2020, 09:19 AM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Michael
Top achievements
Rank 1
answered on 23 Feb 2021, 03:27 PM

Where did the above link move to? 

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

returns 404

0
Dimiter Topalov
Telerik team
answered on 24 Feb 2021, 08:05 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
bryian
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Svet
Telerik team
Michael
Top achievements
Rank 1
Share this question
or