Difficulting initializing a Kendo grid in an AngularJS controller

Question

I'm trying to bind some data to a Angular-Kendo UI grid, but as soon as I click on the tab which contains my grid widget I get this error below :

Error: error:unpr
Unknown Provider
Unknown provider: $modalInstanceProvider <- $modalInstance
Description
This error results from the $injector being unable to resolve a required dependency. 

I'm not really sure why it's crashing on $modalInstance since I'm trying to wire up my Kendo grid with some data. This is strange.

Here's my HTML :

<div data-ng-controller="GridSettingsCtrl" class="col-md-4">
        <div class="col-lg-12"> 
                <h3>Choose a Dimension grouping</h3>  
                <span id="userDimenGrid" kendo-grid="userDimenGrid" 
                        k-data-source="userDimenGridDS"
                        k-options="userDimenGridOptions" 
                        k-rebind="userDimenGridOptions" />
        </div>
    </div>

and here's my Angular controller code :

FYI: the HTML attrib k-data-source="userDimenGridDS" is wired to Kendo DataSource $scope.userDimenGridDS in my js code - which in turn calls read: getUserDimensionsList for the data.

(function () {
'use strict';
angular.module('rage')
   .controller('GridSettingsCtrl', ['$scope', '$modalInstance', 'datacontext', 'widget', gridSettings]);

function gridSettings($scope, $modalInstance, datacontext, widget) {

       var settings = this;

       // add widget to scope
       $scope.widget = widget;

       // set up result object
       $scope.result = jQuery.extend(true, {}, widget);

       $scope.ok = function () {
           $modalInstance.close($scope.result);
       };

       $scope.cancel = function () {
           $modalInstance.dismiss('cancel');
       };

       $scope.userDimenGridOptions = {
           selectable: true,
           sortable: true,
           pageable: true,
           columns: [
             { field: "id", width: "10px", hidden: true },
             { field: "dimension", width: "80px", editor: dimenDropDown, template: "#=dimension#" },  // DropDown editor defined !!
             { field: "hierarchy", width: "60px" },
             { command: [{ name: "edit", text: '' }, { name: "destroy", text: '' }], width: 120 }
           ],
           editable: "inline",
           toolbar: ["create"],             
       };

       // SERVER-SIDE DIMENSIONS DATA SOURCE - see dimenDropDown()
       $scope.dimensionsDataSource = new kendo.data.DataSource({
           transport: {
               read: getDimensionsFromServer
           }
       });


       // USER DIMENSIONS DATA SOURCE !!
       $scope.userDimenData = [];
       $scope.userDimenGridDS = new kendo.data.DataSource({               
           transport: {                  
               read: getUserDimensionsList,
               create: function (options) {
                   options.success(options.data);
               }
           },
           schema: {
               model: {
                   id: "id",
                   fields: {
                       dimension: { type: "string" },
                       hierarchy: { type: "boolean" }
                   }
               }
           },
           pageSize: 5
       });
       // SERVER-SIDE DIMENSIONS DATA SOURCE - see dimenDropDown()
       $scope.dimensionsDataSource = new kendo.data.DataSource({
           transport: {
               read: getDimensionsFromServer
           }
       });

};   // end of gridSettings()

function getUserDimensionsList(options) {
    // Retrieve user dimensions list from server or local cache, and return to Kendo Grid DataSource.
    // Called by: read option of $scope.dimenUserGridDS

    var userDimenFromStorage;
    if ($scope.readUserDimensionsFromCache) {   // pull from cache
        userDimenFromStorage = reportsContext.getUserDimenFromLocalStorage();
    }
    if ($scope.readUserDimensionsFromCache && userDimenFromStorage != null && userDimenFromStorage.length != 0) {
        options.success(userDimenFromStorage);
    }
    else {  // pull from server
        datacontext.getDimenUserList().then(function (data) {
            if (data.status == 'FAIL') {
                if (data.messages.length > 0) {
                    logErr("Error retrieving user Dimensions list: " + data.messages[0]);
                    return;
                }
            }
            else {
                // RETURN DUMMY REC FOR TESTING...
                $scope.userDimenData = data;
                options.success($scope.userDimenData);
            }
        });
    }
}
function getDimensionsFromServer(options) {
    datacontext.getDimensionsFromServer().then(function (data) {
        if (data.status == 'FAIL') {
            if (data.messages.length > 0) {
                logErr("Error retrieving KRI list: " + data.messages[0]);
                return;
            }
        }
        else {
            options.success(data.data);
        }
    });
}
// USER DIMENSION DROPDOWN FOR GRID
function dimenDropDown(container, options) {
    $('<input id="dimenDropDown" data-text-field="name" data-value-field="name" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoComboBox({
        dataTextField: "name",
        dataValueField: "name",
        dataSource: $scope.dimensionsDataSource
    });
}
})();

and here's a screen shot to show the tab I click on to get my "Dimension Grouping" grid, which of course does not render yet due to the error:

As I mentioned, the error occurs as soon as I click on that "Dimensions" tab - which is when it should try and bind the data to the Kendo grid. Here's a screen shot of that :

If anyone can see a problem with my code, your advice would be appreciated...

regards, Bob

Answer 1

I found my problem. I'm using Malhar dashboard widget framework, which specifies the controller in it's settings.

Reference to Malhar dashboard on github: https://github.com/DataTorrent/malhar-angular-dashboard

So my HTML ended up looking like this, without the data-controller attrib:

  <div class="col-md-4">
        <div class="col-lg-12"> 
                <h3>Choose a Dimension grouping</h3>  
                <span id="userDimenGrid" kendo-grid="userDimenGrid" 
                        k-data-source="userDimenGridDS"
                        k-options="userDimenGridOptions" 
                        k-rebind="userDimenGridOptions" />
        </div>
    </div>