search complete example with server side pagination mplementation for KendoGrid

[vamaw]

Hi,

Do you have an github one or two example of Kendo Grid with server Side paging implementation ?

I search complete sample with serverSide for option [kendoGridBinding] with service, pagination and LasyLoading in Angular12  with server side RestControler pagination

 

Regards

[Yanmario]

Hi Vamaw,

Let me answer your questions as separate points:

"I search complete sample with serverSide for option [kendoGridBinding] with service, pagination and LasyLoading in Angular12  with server side RestControler pagination"

1. Such an example cannot be achieved because the kendoGridBinding directive only works with local data as described in our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-built-in-directive

Also, I'm not entirely sure of the context of a Grid with paging being LazyLoaded in Angular 12. Could you please clarify ? Thank you.

"Do you have an github one or two example of Kendo Grid with server Side paging implementation ?"

2. In general, all Kendo UI for Angular components, including the Grid, are representational components that can function with any back-end server implementation as long as the data provided data is in a supported format. This means the components are agnostic to where the data comes from. We don't recommend specific server-side implementations. Instead, that is considered a developer effort.

Basically, to make a Grid pageable, it is required to bind its [data] input property to an object of type GridDataResult with data and total properties. Then the [pageable], [pageSize], and [skip] properties of the Grid should be set as well as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/paging/

The actual paging occurs whenever a paging button is clicked. Then both the (pageChange) and (dataStateChange) events of the Grid will be fired and will provide information about the current Grid skip and take.

We recommend handling one of the two events. If paging is used with another data operation such as filtering, grouping, or sorting, we recommend using the dataStateChange event. It will provide details for the other data operations.

Based on these properties, the developer can perform client-side paging of the data or send a remote request with the skip and take values of the Grid and perform the required server operations in order to page the data. Then send the paged data in the form of a GridDataResult object back to the client and pass it to the Grid [data] property.

Please check the following example with Angular v12, where the Grid uses an ODataService to retrieve its data remotely:

https://stackblitz.com/edit/grid-odataservice-angular-12?file=app/app.component.ts

Basically, a remote request is sent on each (dataStateChange) event, and when new data is coming from the server, it is passed to the Grid [data] input property.

I would also like to suggest checking the following article, which shows two projects demonstrating a pageable Grid that performs remote CRUD data operations using the DataSourceRequest model binder and the ToDataSourceResult() method, which processes bulk data operations on the server. These are the only examples that we can currently provide when ASP.NET is used as a server-side implementation.

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

I hope this information steers you in the right direction.

Regards,
Yanmario Menev
Progress Telerik