Angular directive embed in kendo grid does not execute

Question

I'm using kendo ui in my MVC project. So, I have this simple directive that executes when it's not rendered by kendo.

.directive('okok', ['$log', function($log){
    return {
        link: function (scope, elm) {
            $log.log('directive okok!!');
        }
    };

}])

The directive executes in this line:

<h2 okok>Hello??</h2>

But it does not execute when razor generates the html. Here

@(Html.Kendo().Grid(Model.CoolModel)
          .Name("CoolGrid")
          .Columns(cols => {
              cols.Bound(c => c.StatusDescription).Title("This is my test")
                  .ClientTemplate("<div okok></div>");
          })
    /* Mode code :) */
)

Please note the line: .ClientTemplate("<div okok></div>");

Not sure if the output is handle as a string an I have to do something else. Help is appreciated!

score 0 · Answer 1 · answered Jul 13 '14 at 15:39

I manage this scenario by compiling the element that wraps the grid when the content is bound.

Kendo has an example in its Q&A page where they show how to embed a menu into a grid.cell and the script that enables the submenu has to be executed after the content is render. It kinda lame.

So, I have a function in my controller that compiles an element in the scope.

$scope.rebindElm = function(elm){
   $compile(elm)($scope);
}

And in the view a script is executed when kendo.grid.OnContentBound (or something like that)

function bindContent(e){
  var elm = angular.element('gridName');
  var scope = elm.scope();
  if (scope != null) {
    scope.rebindElm(elm);
  }
}

Yes, it feels like a hack but that's the only way I found to get directives to execute when they are generated with kendo.mvc

Angular directive embed in kendo grid does not execute

1 Answers1