How to use paging and filtering in angular 2

5 posts, 0 answers
  1. WAF
    WAF avatar
    9 posts
    Member since:
    Aug 2013

    Posted 29 Aug Link to this post

    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
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 31 Aug Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. WAF
    WAF avatar
    9 posts
    Member since:
    Aug 2013

    Posted 13 Sep in reply to Dimiter Topalov Link to this post

    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

     

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    628 posts

    Posted 13 Sep Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. WAF
    WAF avatar
    9 posts
    Member since:
    Aug 2013

    Posted 04 Oct in reply to Dimiter Topalov Link to this post

    thank you very much for your help!
Back to Top