How to use paging and filtering in angular 2

[WAF]

Hi everyone,

I am beginner and I am trying to generate a grid and I would like that my grid would have the options of sorting, paging and filtering, so I have been trying to achieve it without a good result unfortunately.

1- At the moment I can sorting but I can't pass to the next page in the grid.

2 - I got two button in the grid to call functions and I don't know how to show them and extract a specific id from the array data

3 - I would appreciate as well if someone can send me any tutorial or samples about filtering mixed with the rest of the options.

The telerik code is in the next route:
SolucionCore2\Core2.WebApi\ClientApp\app\components\arboles\registro

Here is my project:   Download

Thanks in advance and Kind Regards

[Dimiter Topalov]

Hello,

Depending on whether you will have all data on the client before binding the Grid, or you will perform data operations like sorting, filtering, and paging, on the server, the most straight-forward approaches differ.

1) Automatic binding

1.a) Built-in Grid data binding directive - when all the data is available as an array, you can bind the Grid using this directive and all operations will be handled automatically:

http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-automatic-data-binding

1.b) Custom data binding directive - when data is coming from a custom service, you can create custom data binding directive, similar to the one above to handle data operations

2) Handling events and manipulating the data

The most straightforward approach would be to handle the dataStateChange event and process the data in accordance with the incoming state (sorting, paging, filtering and grouping configuration), regardless of whether the data is coming from a remote service, or is available on the client. The Data Query helper function process() can be used to process the whole data in accordance with the passed state:

http://www.telerik.com/kendo-angular-ui/components/grid/filtering/#toc-filtering-basics
Please inspect the described approaches and the respective runnable online demos, and let us know which approach would best suit your needs and if you have any further questions about adjusting it to your scenario.

The buttons in the Grid need to be part of Grid cell templates, designed to provide any custom content to the Grid cells of the respective column. In this template, you have access to the data item, associated with this row, and can pass it to the button click handler function, e.g.:

http://plnkr.co/edit/k4gOKbPbh2DdE3ldy0aB?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[WAF]

Hello Dimiter Topalov,

First off, sorry for the late reply,

I have been reading your reply and the first link is a 404 not found. Can you resend me the correct link?

Kind regards

 

[Dimiter Topalov]

Hi,

We were working on restructuring the documentation site and some sections were moved to different URLs, We finished updating the respective redirects so that old links can still work this morning, so everything should be working as expected now.

Can you please try again, and let us know if you are still experiencing any problems? 

I will also include the updated links just in case:

http://www.telerik.com/kendo-angular-ui/components/grid/data-operations/data-binding/automatic-operations/#toc-automatic-data-binding

http://www.telerik.com/kendo-angular-ui/components/grid/data-operations/filtering/#toc-filtering-basics

Regards,
Dimiter Topalov
Progress Telerik

[WAF]

thank you very much for your help!