Wrap kendo-grid in an custom directive

[rgiosa]

I want to create some basic options to reuse and i think that create a custom directive to wrap a kendo-grid is the way to go.

My custom directive has to offer a new checkbox column to select one row or all rows.

I already have some methods to manipulating selected rows, but my intention is to make this methods a part of directive.

Is this possible?

[rgiosa]

Some code:
http://stackoverflow.com/questions/23414930/creating-a-kendo-grid-with-reusable-options-using-angularjs

[mishoo]

Answered on Stack Overflow.

[rgiosa]

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

[mishoo]

@rgiosa I'm not sure I understand what you mean, can you detail? If you'd like for instance to setup defaults for selectable, sortable and pageable in your custom directive you can easily do it (similar to how we modify columns), for example:

// in directive's link function
if (!options.hasOwnProperty("pageable"))
    options.pageable = true;
if (!options.hasOwnProperty("sortable"))
    options.sortable = true;

but again, I probably don't understand what you'd like to do…

[rgiosa]

mishoo, this is exactly what I want! The only point now is that you can not access the grid with $scope.grid.

[mishoo]

You can access it, but not in the directive because the widget is not instantiated at this point. You can do something like this in the controller:

$scope.$on("kendoWidgetCreated", function(ev, widget){
    if (widget === $scope.grid) {
        // $scope.grid is available now
    }
});

The kendoWidgetCreated event is triggered on the scope whenever some widget was created. It's triggered for all widgets and you receive a reference to the widget as the second argument—so we need to check it's actually for the widget we're interested in. I put recently a page about it here: http://kendo-labs.github.io/angular-kendo/#/events

[rgiosa]

mishoo, actually I meant that the $scope.grid is not accessible in the controller.

[mishoo]

Of course it's not — the controller defines the data that your grid is created from. Since that data is only available in scope after the controller runs, we obviously must build the widget after the controller runs. Using the event I that described above you can execute some code right on the moment when the widget becomes available.

Hope this clarifies…

[rgiosa]

mishoo, imagine that I need to use the code below:

$scope.update = function() {
    $scope.grid.dataSource.read();
});

We still have to use the kendoWidgetCreated event?

[mishoo]

Nope, most probably not. But it depends on when $scope.update() is invoked. If you call it immediately from the controller, then it won't work.

[rgiosa]

mishoo, i forked your example here: http://embed.plnkr.co/jyjtU3SEEDYsa2CFRDTo/preview

the $scope.grid is not working...

[mishoo]

Ah, of course, that's because our directive creates a nested scope, and the widget is not visible in the outer scope (which is where that controller runs in). Welcome to AngularJS complexities. ;-)

Here's the fixed sample: http://plnkr.co/edit/uq62XqadunzBKJOrR9uT?p=preview

It's using kendo-grid="widgets.grid", where $scope.widgets = {} is defined in the parent scope. Hope that's good enough because I have no other solution.

[jaybe78]

Let's say I want to change 'resizable' value in the directive'.

link: function ($scope, $element, $attrs) {
                var options = angular.extend({}, $scope.$eval($attrs.kOptions));
                options['resizable']=true;// nothing changes
                options.columns.unshift({
                    template: "<input type='checkbox' ng-model='dataItem.selected' />",
                    title: "<input type='checkbox' title='Select all' ng-click='toggleSelectAll($event)' />",
                    width: 50
                });
            }

Is there a way to make that work?

[rgiosa]

mishoo, in fact the changes made in the directive options is not working... =/

I believe this is an important point, since large applications grids always follow the same pattern.

[jaybe78]

I guess option attributes need to be defined in the compile function of the directive.
I think doing it in the link function is too late, it seems grid has already been created.

[mishoo]

@rgiosa that was because in fact we made a copy of the options (with angular.extend) in the directive. I fixed it, note that now sortable, pageable and selectable are set from the directive and it works: http://plnkr.co/edit/uq62XqadunzBKJOrR9uT?p=preview

[jaybe78]

@mishoo
is that fixed for all the others kendo directives(window,tree,...) as well ?

[mishoo]

@jaybe78 the fix was not in angular-kendo.js but in the sample directive that I wrote for @rgiosa.

[lijuenc]

With reference to your latest plunkr, the checkbox selection is independent of the grid's row selections. How can you keep these two in sync, especially when multiple row selection is enabled on the grid?

[i2shar]

@mishoo : your comment #306 (comment) helped me resolve my problem! All kendo angular documentation mentions that the variable passed to the kendo-grid directive as kendo-grid="grid" is directly available in the controller as $scope.grid - nowhere does it mention that a separate child scope is created. Under what circumstances is the variable directly available in the controller's scope without having to nest it like kendo-grid="widgets.grid" and in what other circumstances is it not?

[mishoo]

@i2shar it's not related to Kendo, it's just how Angular scope works. This document explains in much detail what's going on, and you should read it if you're using Angular (especially if you're defining custom directives).

[lnghiem]

@mishoo: Your directive from http://plnkr.co/edit/uq62XqadunzBKJOrR9uT?p=preview is what I was looking for. However, I noticed that the directive have "scope:true", which make it inherits from the parent scope per my understanding. As a result, when I tried to use this directive more than once (in my case i used two times since I have two kendo grid on my view from) in the same controller it doesn't work. Somehow it created two columns/sets of the checkboxes. I tried to change the "scope: true" to "scope: {}", but it didn't work. I forked your directive into my plunker and attempted to create an insolated scope by changing it to "scope: { mygridoptions: "="}" and pass in "my gridoptions" attribute. It works to the point that it has the checkboxes, but it couldn't invoke the selectAll function. Do you have any suggestions on how to update your directive to use isolated scope so I can use that directive more than once in the same controller?