Detail grid with same type of data with on load functionality

4 posts, 0 answers
  1. Pratik
    Pratik avatar
    2 posts
    Member since:
    Oct 2016

    Posted 19 Oct Link to this post

    Hi,

    I have grid with service and their types and their advisors

    each advisor also have types.

    I want to load type and adviosrs on service name clicks.

    and want to load all types of particular advisours on advisor click

     

    I have attached image please have look and suggest approch, how can we achieve this

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 20 Oct Link to this post

    Hi Pratik,

    You can check out the Grid's hierarchy (master-detail) functionality:

    http://demos.telerik.com/kendo-ui/grid/hierarchy

    http://demos.telerik.com/kendo-ui/grid/detailtemplate

    Alternatively, consider the Kendo UI TreeList that seems a better match for the desired functionality:

    http://docs.telerik.com/kendo-ui/controls/data-management/treelist/overview

    http://demos.telerik.com/kendo-ui/treelist/index

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
  3. Kendo UI is VS 2017 Ready
  4. Pratik
    Pratik avatar
    2 posts
    Member since:
    Oct 2016

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

    Hi,

    Thanks for you reply.

    Treeview list looks good but example shows it supports only similar type hirearchy like employee and manager like data.

    But my data are different ServiceTypes/TransportTypes + Adviosor and Advisor > Transportypes.

    How it can be fit in treelist on load, with editable functionality.

    Please also check attached image in Question.

    Thanks in adavance.

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    347 posts

    Posted 26 Oct Link to this post

    Hi Pratik,

    Master-detail Grids hierarchy will fit the described scenario better. You can find all configuration options, methods, and events, for implementing the functionality in our Grid API reference:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-detailTemplate

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailInit

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-collapseRow

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-expandRow

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailCollapse

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-detailExpand

    Working examples can be found in the previously linked online demos, as well as in various how-to articles from our documentation, e.g.:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/detail-template-editor

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/edit-master-row-data-in-detail-template

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/refresh-grid-in-detail-template

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/detail-grid-export

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Templates/data-attribute-initialization-with-detail-template

    http://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/reorder-nested-grid-rows

    ... and more.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
Back to Top
Kendo UI is VS 2017 Ready