Toolbar template in custom directive of AngularJS

[Paul-Guillaume]

Hello,

I'm currently working with Kendo UI and AngularJS and i've encountered an issue creating a custom directive to add a custom toolbar a grid.

What I need is a toolbar with a search input for a grid.

Here is the code :
- Controller :

controllers.MyCtrl1 = function($scope) {
        //Kendo Grid Test custom directive
        $scope.gridColumns = [{
            field: "ContactName",
            title: "Contact Name",
            width: 140
        }, {
            field: "ContactTitle",
            title: "Contact Title",
            width: 190
        }, {
            title: "Location",
            template: "{{dataItem.City}}, {{dataItem.Country}}"
        }, {
            title: "Selected",
            template: "{{dataItem.selected ? 'Yup' : 'Nope'}}"
        }];

        $scope.gridOptions = {
            selectable: true,
            sortable: true,
            pageable: true,
            dataSource: {
                type: "odata",
                transport: {
                    read: "http://demos.kendoui.com/service/Northwind.svc/Customers"
                },
                pageSize: 6
            },
            columns: $scope.gridColumns
        };
    };
    controllers.MyCtrl1.$inject = ['$scope'];

- Directive :

/* Directives */

 

    var toolboxDirectives = angular.module('myApp.directives', []);

 

    toolboxDirectives.directive('appVersion', ['version', function(version) {

        return function(scope, elm) {

            elm.text(version);

        };

    }]);

 

    // Sample directive.  Activate it by passing my-grid attribute to

    // the div which constructs the grid.  It expects your div to also

    // have a kendo-grid attribute, to activate the Kendo UI directive

    // for creating a grid.

    toolboxDirectives.directive('myGrid', ['$compile', function () {

        return {

            restrict: 'A',

            scope: true,

            controller: function ($scope) {

                window.crap = $scope;

                $scope.toggleSelectAll = function(ev) {

                    var grid = $(ev.target).closest("[kendo-grid]").data("kendoGrid");

                    var items = grid.dataSource.data();

                    items.forEach(function(item){

                        item.selected = ev.target.checked;

                    });

                };


            },

            link: function ($scope, $element, $attrs) {

                var options = angular.extend({}, $scope.$eval($attrs.kOptions));

                options.columns.unshift({

                    template: "<input type='checkbox' ng-model='dataItem.selected' />",

                    title: "<input type='checkbox' title='Select all' ng-click='toggleSelectAll($event)' />",

                    width: 50

                });

                options.toolbar = kendo.template("<div class='toolbar'><label>Search:</label><input type="search" /></div>");

                console.log(options);

            }

        };

    }]);

- HTML :

<div my-grid kendo-grid="grid" k-options="gridOptions"></div>

I've used an exemple made by someone on this forum to try this method. It works when it adds a column with the checkbox.
I've add a "console.log(options)" to see if the key "toolbar" was added in the JSON, and it is... But the toolbar doesn't appear...

I've tried to change the part :

options.toolbar = kendo.template("<div class='toolbar'><label for='grid-search'>Search:</label><input id='grid-search' ng-model='searchValue' /></div>");

By :

$scope.gridOptions.toolbar = kendo.template("<div class='toolbar'><label for='grid-search'>Search:</label><input id='grid-search' ng-model='searchValue' /></div>");

Which is not what I want, but for the grid which use this JSON as options it works...

I don't see what is the problem when I use a "generic" method... 
Maybe I've made a mistake, it's my first project using Kendo and AngularJS.

I'm aware for any advice.

(Sorry for my English if it's bad)

Thank you very much

[Petyo]

Hi Paul,

by extending the $scope options, you are leaving the original object unmodified. If you modify it directly, the toolbar works as expected - please check this example.

Regards,
Petyo
Telerik

 

 

[Paul-Guillaume]

Oh I see. I undersand why it works for the Array.

Thank you very much for your explanation.