angular with kendo grid in templateUrl

Question

(sorry if this is duplicate, but what i've found does not answer my question: Databinding is not working with kendo grid in angular JS directives )

I am trying to create a directive with a templateUrl containing a kendo grid, and use this directive in a controller.

I can manage to bind some of the directive's attributes (e.g. my-grid-options, which is initialized in the controller) but not my-grid-id.

What am I missing? (full plunk here)

the directive:

Directives.myGrid = function() {
    return {
        scope: {
            myGridId: "=",
            myGridOptions: "="
        },
        restrict: "E",
        transclude: true,
        templateUrl: 'myGrid.html',
        link: function(scope) {
            //... some code using the myGridId
            scope.myGridId.....
        }
    }
}

myGrid.html:

<div kendo-grid="myGridId" k-options="myGridOptions" id="myGridId">      
</div>

how I want to use it:

<body ng-app='app' ng-controller='myCtrl'>
     <my-grid my-grid-id="mainGrid" my-grid-options="mainGridOptions"></my-grid>    
</body>

controller:

angular.module('app').controller('myCtrl',function($scope){
    $scope.ds = [
          {Category:"Toys", Name: "Doll", Code: "p1", Special: false},  
          ....            
          {Category:"Stationary", Name: "Crayons", Code: "p4", Special: false}
        ];

    $scope.mainGridOptions = {            
        columns: [
            {
                field: "Category",
                title: "Category"
            },
            {
                field: "Name",
                title: "Name"
            },
            {
                field: "Code",
                title: "Code"
            }, 
            {
                field: "Special",
                title: "Special Offer"
            }, 
        ],
        dataSource: $scope.ds,
        sortable: true,
        selectable: true,
        resizable: true,
        pageable: true,
        reorderable: true,
        columnReorder: function (e) {
          //do something trivial... for example sake, but a more complex event is used
          $.each($scope.mainGrid.wrapper.find('tbody tr'), function () {
              var model = $scope.mainGrid.dataItem(this);
              if (model.Special === true) {
                  $(this).addClass('special-row');
              }
          });
        }
    };
  });

Thanks for any advice.

It might be me being stupidly in a rush, but i don't see $scope.mainGrid variable anywhere in your controller. However, you do try to bind it to your directive using the attribute 'my-grid-id'... — ocket-san
@ocket-san i am trying to produce it through the kendo-grid in the directive. see how it works if I use directly a kendo-grid instead of a directive with a kendo-grid — claudia alexa
Ok. Also, i tried to look at your plunkr link, but it timed out everytime. Could u fix that so i can have a better look? tnx — ocket-san
@ocket-san it worked for me but i also froze it now and checked from someone else and works as well. can you give it another go? thanks — claudia alexa

ocket-san ocket-san · Accepted Answer · 2016-02-02T09:48:55

Ok, so i got to see your plunk. I did a few changes and here is the result.

You still got some problems in there. Check my changes in your directive:

angular.module('app').directive('myGrid', function(){
      return {
        scope: {
            gridId: "=",
            gridOptions: "="
        },
        restrict: "E",
        replace: true,
        templateUrl: 'myGrid.html',
        link: function(scope) {
           console.log(gridId);
           console.log(scope.gridId);
            // var doMore = function() {
            //     $.each(scope.gridId.wrapper.find('tbody tr'), function () {
            //         var model = $scope.gridId.dataItem(this);
            //         if (model.Category === "Stationary") {
            //             $(this).addClass('stationary-row');
            //         }
            //     });
            // };

            // var extendReorder = function(baseReorder) {
            //     doMore();
            //     if (baseReorder)
            //         baseReorder();
            // };

            scope.gridOptions.columnReorder = extendReorder(scope.gridOptions.columnReorder);
        }
    };
  });

I removed the tranclude:"true", as it caused a directive collision. Then there were errors about you gridId being "undefined". I don't know what its purpose is, so i just gave it a value in the controller (check the plunk). If it is not completely what you want yet, let me know, i look further into it.

angular with kendo grid in templateUrl

2 Answers