[Solved] how to attach angularjs directive to kendo gird events

[Wit]

How could I attach angularjs directive to kendo ui gird databound event?
Should I take any additional steps when grid is destroyed? 


<div id="kgrid" kendo-grid="kgrid" options="opGrid" my-grid-auto-size></div>

.directive('myGridAutoSize', function (UIService) {

               return {

                restrict: 'A',

                link: function (scope, element, attrs, location) {

                    element.bind('dataBound', function () {

                        UIService.ResizeGrid();

                    });                  

                }

            }

});

[Atanas Korchev]

Hi,

You need to get the grid instance from the element in order to bind events to it. Here is how:

link: function (scope, element, attrs, location) {
     var grid = element.data("kendoGrid");
     grid.bind('dataBound', function () {
         UIService.ResizeGrid();
     });
 }

Regards,
Atanas Korchev
Telerik

 

 

[Wit]

Should I unbind my event when I move to another screen ? Or will it happen anyway? 

[Wit]

Should I unbind my event when I move to another screen ? Or would that happen automatically? 

[Wit]

I am getting undefined for grid :  var grid = element.data("kendoGrid");. Would you have any suggestions?

[Kiril Nikolov]

Hello Witek,

The problem is caused by Kendo UI Grid not being initialized when the directive is executed. This is why you can wrap the bind statement into a $timeout, so it is executed after the Grid has been initialized:

http://dojo.telerik.com/@Kiril/apuBA

Regards,
Kiril Nikolov
Telerik

 

 

[Wit]

Thank you

[Kiril Nikolov]

Hello Witek,

Glad I helped.

In case you have any further questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik