Creating a kendo-grid with reusable options using AngularJS

Question

How to create a kendo-grid with reusable options using AngularJS?

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.

Another important behavior is to keep a reference to the grid :

// In the controller : $scope.grid
<div kendo-grid="grid" k-options="gridOptions"></div>

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.

myApp.directive('myApp', ['$compile', function ($compile) {
    var directive = {
        restrict: 'A',
        replace: true,
        template: '<div></div>',
        scope: {
            gridConfiguration: '='
        },
        controller: function ($scope) {

            $scope.gridIds = [];
            $scope.gridIdsSelected = [];

            var updateSelected = function (action, id) {
                if (action === 'add' && $scope.gridIdsSelected.indexOf(id) === -1) {
                    $scope.gridIdsSelected.push(id);
                }
                if (action === 'remove' && $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) >= 0;
            };

            $scope.selectAll = function ($event) {
                var checkbox = $event.target;
                var action = (checkbox.checked ? 'add' : 'remove');
                for (var i = 0; i < $scope.gridIds.length; i++) {
                    var id = $scope.gridIds[i];
                    updateSelected(action, id);
                }
            };
        },
        link: function ($scope, $element, $attrs) {
            var baseColumns = [
                {
                    headerTemplate: '<input type="checkbox" id="selectAll" ng-click="selectAll($event)" ng-checked="isSelectedAll()">',
                    template: '<input type="checkbox" name="selected" ng-checked="isSelected(#=Id#)" ng-click="updateSelection($event, #=Id#)">',
                    width: 28
                }
            ];

            for (var i = 0; i < $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;
}]);

Answer 1

I've put an example directive here: http://embed.plnkr.co/fQhNUGHJ3iAYiWTGI9mn/preview

It activates on the my-grid attribute and inserts a checkbox column. The checkbox is bound to the selected property of each item (note that it's an Angular template and it uses dataItem to refer to the current item). To figure out the selected items you can do something like:

var selection = $scope.grid.dataSource.data().filter(function(item){
    return item.selected;
});

The checkbox that is added in the header will toggle the selection.

HTH.

Answer 2

@rGiosa is right I've tried to do that :

var options = angular.extend({}, $scope.$eval($attrs.kOptions));
options['resizable']= true;

Seems to add the attribute in options object but the grid is still not resizable why? http://plnkr.co/edit/Lc9vGKPfD8EkDem1IP9V?p=preview

EDIT: Apparently,Options of the Grid cannot be changed dynamically. You need to re-create the whole Grid with different options in order to disable/enable them dynamically?!

Cheers