title: Creating a kendo-grid with reusable options using AngularJS
body: <p>How to create a kendo-grid with reusable options using AngularJS?</p>
  
  <p>Besides the default settings, the grid must include a checkbox column dynamically with the option to select all rows . Methods to treat the selections should be part of the directive and, somehow, I should be able to access the rows selected in controller.</p>
  
  <p>Another important behavior is to keep a reference to the grid :</p>
  
  <pre><code>// In the controller : $scope.grid
  &lt;div kendo-grid="grid" k-options="gridOptions"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Below an initial path that I imagined, but it is not 100% working because AngularJS not compile information from checkbox column, so do not call the methods of the controller directive. At the same time I'm not sure where force $compile in this code.</p>
  
  <pre><code>myApp.directive('myApp', ['$compile', function ($compile) {
      var directive = {
          restrict: 'A',
          replace: true,
          template: '&lt;div&gt;&lt;/div&gt;',
          scope: {
              gridConfiguration: '='
          },
          controller: function ($scope) {
  
              $scope.gridIds = [];
              $scope.gridIdsSelected = [];
  
              var updateSelected = function (action, id) {
                  if (action === 'add' &amp;&amp; $scope.gridIdsSelected.indexOf(id) === -1) {
                      $scope.gridIdsSelected.push(id);
                  }
                  if (action === 'remove' &amp;&amp; $scope.gridIdsSelected.indexOf(id) !== -1) {
                      $scope.gridIdsSelected.splice($scope.gridIdsSelected.indexOf(id), 1);
                  }
              };
  
              $scope.updateSelection = function ($event, id) {
                  var checkbox = $event.target;
                  var action = (checkbox.checked ? 'add' : 'remove');
                  updateSelected(action, id);
              };
  
              $scope.isSelected = function (id) {
                  return $scope.gridIdsSelected.indexOf(id) &gt;= 0;
              };
  
              $scope.selectAll = function ($event) {
                  var checkbox = $event.target;
                  var action = (checkbox.checked ? 'add' : 'remove');
                  for (var i = 0; i &lt; $scope.gridIds.length; i++) {
                      var id = $scope.gridIds[i];
                      updateSelected(action, id);
                  }
              };
          },
          link: function ($scope, $element, $attrs) {
              var baseColumns = [
                  {
                      headerTemplate: '&lt;input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()"&gt;',
                      template: '&lt;input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)"&gt;',
                      width: 28
                  }
              ];
  
              for (var i = 0; i &lt; $scope.gridConfiguration.columns.length; i++) {
                  var column = $scope.gridConfiguration.columns[i];
                  baseColumns.push(column);
              }
  
              var gridOptions = {...};
  
              var grid = $element.kendoGrid(gridOptions).data("kendoGrid");;
              $scope.$parent[$attrs[directive.name]] = grid;
          }
      };
  
      return directive;
  }]);
  </code></pre>