CODEWITHSUNDEEP
angularjskendo-grid
claudia alexa
claudia alexa

Reputation: 63

angular with kendo grid in templateUrl

(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.

Upvotes: 0

Views: 474

Answers (2)

claudia alexa
claudia alexa

Reputation: 63

Thanks to @ocket-san for taking the time to look at this.

Eventually I got what I wanted: to extend the kendo-grid inside a directive without affecting any controller implementations which use the kendo-grid.

I managed to do this by creatting a directive of Attribute type which extends the current definition (usage) of the kendo-grid, so wherever I wish to add my extensions I can simply add my directive as an attribute:

<div kendo-grid="mainGrid" k-options="mainGridOptions" id="mainGrid" my-grid >

Instead of:

<div kendo-grid="mainGrid" k-options="mainGridOptions" id="mainGrid">

(fyi: I wanted to set pagination buttons to both top and bottom for all the kendo-grids in my application, without having to duplicate the extension all over the place)

See plunker here.

Upvotes: 0

ocket-san
ocket-san

Reputation: 884

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.

Upvotes: 1

Related Questions