Kendo UI Grid Integration With Widget Designers - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Kendo UI Grid Integration With Widget Designers

  • Kendo UI Grid Integration With Widget Designers
  • I'm super familiar with using kendo ui with angular, but your designers doesn't seem to work with the kendo grid directives at all. Here's a sample that doesn't work:

     DesignerView.MyGrid.cshtml

    <div kendo-grid
         k-data-source="gridData"
         k-columns="gridColumns"
         k-selectable="true"
         k-on-change="selected = data"></div>

     

    and here's the angular module, designerview-mygrid.js :

    (function ($)
        //var designerModule = angular.module('designer', ['kendo.directives']);
        var designerModule = angular.module('designer');
     
        //This is basic controller for the "ManageItems" designer view.
        designerModule.controller('MyGridCtrl', ['$scope', 'propertyService', function ($scope, propertyService)
            $scope.feedback.showLoadingIndicator = true;
     
            $scope.gridData = new kendo.data.ObservableArray([
               artist: "Pink Floyd", track: "The dark side of the Moon" ,
               artist: "The Beatles", track: "I've just seen a face" ,
               artist: "Queen", track: "Innuendo"
            ]);
            $scope.gridColumns = [
               field: "artist", title: "Artist" ,
               field: "track", title: "Track"
            ];
     
            //Makes call to the controlPropertyService to get the properties for the widgets.
            propertyService.get()
                .then(function (data)
                    if (data)
                        $scope.properties = propertyService.toAssociativeArray(data.Items);
                    
                ,
                function (data)
                    $scope.feedback.showError = true;
                    if (data)
                        $scope.feedback.errorMessage = data.Detail;
                )
                .finally(function ()
                    $scope.feedback.showLoadingIndicator = false;
                );
        ]);
    )(jQuery);

  • Basically you'll need to push the kendo.directives into the module: 
    var customModule = angular.module("customModule", ["kendo.directives"]);
    angular.module("designer").requires.push("customModule");

     

    Or

     

    var designerModule = angular.module('designer');
       designerModule.requires.push('kendo.directives');