Difficulting initializing a Kendo grid in an AngularJS controller - angularjs

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>