This is a migrated thread and some comments may be shown as answers.

Grid Encapsulation

5 Answers 170 Views
Grid
This is a migrated thread and some comments may be shown as answers.
mario
Top achievements
Rank 1
mario asked on 18 Apr 2017, 11:18 AM

 

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.

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Apr 2017, 08:01 AM
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 (charts) and form elements.
0
mario
Top achievements
Rank 1
answered on 20 Apr 2017, 09:22 AM

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.

0
Dimiter Topalov
Telerik team
answered on 20 Apr 2017, 03:06 PM
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.
0
mario
Top achievements
Rank 1
answered on 20 Apr 2017, 03:14 PM

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.

0
Dimiter Topalov
Telerik team
answered on 21 Apr 2017, 03:34 PM
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.
Tags
Grid
Asked by
mario
Top achievements
Rank 1
Answers by
Stefan
Telerik team
mario
Top achievements
Rank 1
Dimiter Topalov
Telerik team
Share this question
or