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;
}]);

mishoo · Accepted Answer · 2014-05-05 08:51:04Z

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.

answered May 5, 2014 at 8:51

mishoo

2,4191 gold badge18 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rGiosa Over a year ago

mishoo, the problem with this solution is that the default options are configured on the controller, and I can not reuse the grid settings, such as sortable, resizable, pageable, etc...

macwier Over a year ago

It seems you don't think too much about angular scope. window.crap = $scope; :)

jaybe78 · Accepted Answer · 2014-05-08 17:04:47Z

1

@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

edited May 8, 2014 at 17:04

answered May 8, 2014 at 16:40

jaybe78

3684 silver badges22 bronze badges

1 Comment

Claus Conrad Over a year ago

Check below the heading Rebinding widgets on how to have the grid watch for options changes. Apparently only one variable can be watched.

Collectives™ on Stack Overflow

Creating a kendo-grid with reusable options using AngularJS

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related