[Solved] access gird form controller in angular

[Wit]

How can I access grid object from controller when using new kendo grid tag?
<kendo-grid  id="kgrid" options="gridDataTest"></kendo-grid>

It was possible with old syntax:
<div kendo-grid="oldgrid"
$scope.oldgrid

Thank you

[Alexander Valchev]

Hello Wit,

I am afraid that this is not supported. Currently you have to use the kendo-widget-name attribute to automatically get reference of the widget in the scope.
For more information please check this help topic: http://docs.telerik.com/kendo-ui/AngularJS/introduction#getting-widget-references

Regards,
Alexander Valchev
Telerik

 

 

[Iwhp]

I am using the "controller as" syntax.

<div ng-controller="ctrl1 as vm">
<select kendo-drop-down-list="kendoselect1"
I do not see $scope.kendoselect1.

I have also tried
<select kendo-drop-down-list="vm.kendoselect1"
But I do also not see vm.kendoselect1

any comments?
Thankx!

[Alexander Valchev]

Hi Harry,

Could you please check this example and let me know what I am missing?

• http://dojo.telerik.com/aFosI

Regards,
Alexander Valchev
Telerik

 

 

[Iwhp]

Thankx Alexander.

I have build my own snipped (based on yours) at http://dojo.telerik.com/@[e-mail]/omUhA/2

This is working fine and the vm.myDropDown.selectedIndex does return the expected value in the controller.

I have also created a new one at http://dojo.telerik.com/@[e-mail]/uPiSA
here I learned, that the SYNTAX is as with normal vm. properties, but the initialization is the one, which I have to be careful about.

Thankx, Harry

[Alexander Valchev]

Hello Harry,

Thank you for the feedback.
If I understood correctly you have managed to resolve the issue, so can we close this thread as resolved?

Regards,
Alexander Valchev
Telerik

 

 

[Iwhp]

Thankx Alexander. Yes please close my request. I was referenceing the widget to early. The "controller as" syntax does work fine.
Cheers Harry

[Brandon]

Hi --

I tried the suggested syntax but still unable to get an instance of the grid in my $scope...

<kendo-grid kendo-widget-name="claimGrid" k-options="mainGridOptions">

I'm able to see $scope.mainGridOptions but not $scope.claimGrid...

Please advise...

Thanks!
Brandon

[Alexander Valchev]

Hi Brandon,

Please isolate your case in a separate Kendo Dojo test page so I can examine your exact implementation and assist you further.

Regards,
Alexander Valchev
Telerik

 

 

[Brandon]

Ultimately, what I'd like to do is have the grid load with all the rows collapsed by default.

I'm trying to achieve that by trying to grab an instance of the grid and call the collapseRow function...  but to no success.

Using the demo grid as an example, my sample code is here: http://dojo.telerik.com/aCaBA

I'm assigning my grid a variable like so:  <div kendo-grid="myGrid"

But it seems I'm unable to access that instance in the js: $scope.myGrid.collapseRow(".k-master-row:first");

[Alexander Valchev]

Hello Brandon,

You receive an error because the Grid widget is not yet initialized at the time when the code is executed.

In order to achieve your goal you should just comment row 61. By default all rows are collapsed initially. The demo that you used as a base expands the first row on dataBound.

• http://dojo.telerik.com/@valchev/ObUnE

Regards,
Alexander Valchev
Telerik

 

 

[Brandon]

Aw, I'm sorry!  Rookie mistake!! :(

Just for future reference, is there an event you would recommend subscribing to in case I want to manipulate the grid at load time?

[Alexander Valchev]

Hi Brandon,

You may use the dataBound event to manipulate the Grid after the data has been loaded.

Regards,
Alexander Valchev
Telerik

 

 

[Fangming]

I have tried to get a reference to kendo-grid, as discussed in this link
http://docs.telerik.com/kendo-ui/AngularJS/introduction#getting-widget-references

<div kendo-grid="myGrid" k-options="detailGridOptions(dataItem)" k-on-change="changed(dataItem)"></div>
$scope.changed = function(dataItem){
              console.log('abc');
              console.log($scope.myGrid);
}

However, it does not work as described in the document.

Can you take a look at this ?
http://dojo.telerik.com/IZIfe

Thanks!

[Fangming]

It seems the reason is the grid is nested.

Is there a way to get the reference to the grid that is nested under another grid?

[Alexander Valchev]

Hi Fangming,

I would not recommend assigning the name of the child Grid instance in this way because the detail template will be rendered multiple times which means that you will have multiple elements with kendo-grid="myGrid" attribute.

In case you want to obtain a reference of the Grid in the change event handler you may use the following approach:

<div kendo-grid="myGrid" k-options="detailGridOptions(dataItem)" k-on-change="changed(kendoEvent, dataItem)"></div>

$scope.changed = function(kendoEvent, dataItem){
   console.log('abc');
   console.log(kendoEvent.sender);
}

Regards,
Alexander Valchev
Telerik

 

 

[Fangming]

Thanks for your reply. It looks good.

However, the k-on-change wont fire now. It sometimes before was working. Not sure what happened.

It even won't work in the kendo example itself. Can you take a look?

http://docs.telerik.com/kendo-ui/AngularJS/the-grid-widget
http://dojo.telerik.com/OPOJa

[Alexander Valchev]

Hello Fangming,

On my side the change event seems to fire as expected. Could you please check the screen cast and let me know what I am missing?

• http://screencast.com/t/FkSdaxVaQz

Regards,
Alexander Valchev
Telerik

 

 

[Fangming]

Yes. It is working now.  :)