Grid Encapsulation

6 posts, 0 answers
  1. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 18 Apr 2017 Link to this post

     

    Hello,

    I'm trying to create a grid that will be reused very often

     

    <div>--other content--</div>
    <kendo-grid [data]="gridData"></kendo-grid>

     

    I tried to encapsulate this  into my own <custom-grid> component

     

    <custom-grid [gridData]="myData"></custom-grid>

     

    I'm aware that in the jquery version i could use grid-options to give my encapsulated grid all the info i needed.

    Was this removed in the angular version?

    Thank you.

  2. Stefan
    Admin
    Stefan avatar
    2828 posts

    Posted 20 Apr 2017 Link to this post

    Hello Mario,

    If the same Grid options can be used for different Grids I can suggest passing the options to the k-options attribute. The options can be saved in a $scope variable and that this variable can be used for multiple Grids.

    Notice how the mainGridOptions object is passed to the k-options attribute:

    http://dojo.telerik.com/UDUPa

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

    I hope this is helpful.

    Regards,
    Stefan
    Telerik by Progress
    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. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 20 Apr 2017 in reply to Stefan Link to this post

    Hello Stefan, thank you for the replay, 

    My apologies but i failed to express that i'm working in kendo-ui-angular, using angular version 4.0.0, and it seems that the k-options is not avaiable in the kendo-ui-angular version, hence me asking.

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 20 Apr 2017 Link to this post

    Hi Mario,

    Thank you for the clarification.

    The Kendo Ui for Angular Grid component does not support multiple configurations to be set via an object like the k-options directive from the Kendo UI for jQuery Angular v. 1.x directives, but there are a couple of viable approaches to achieve the desired behavior.

    You can wrap the Grid component in a parent component that contains all necessary configurations, and reuse this parent component in multiple places, e.g.:

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

    Alternatively, you can receive the Grid options in the custom wrapper-component as an input, and set them in the Grid component inside accordingly, e.g.:

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

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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. mario
    mario avatar
    8 posts
    Member since:
    Apr 2017

    Posted 20 Apr 2017 in reply to Dimiter Topalov Link to this post

    Hi Dimiter,

    Seems that wraping the kendo in its own component will be the solution, although i need to twink it a bit for my needs.

    Thank you for the information.

  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1263 posts

    Posted 21 Apr 2017 Link to this post

    Hello Mario,

    You are welcome. Do not hesitate to contact us again, if you have any other questions.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    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.
Back to Top