I have a master grid which is a list of applications. The detailrow contains a grid to allow for CRUD operations on roles for that application. I have Create, Read, Update, and Delete working for the master grid, but not for the detail grid.
We are using AngularJS, as well as a repository pattern for the CRUD ops, so none of the examples I've seen seem to correlate to this. I'll just paste my code and that should make things more clear.
First, my manageApps.html:
<div class="row">
<div class="col-md-12">
<div class="title">Manage Applications</div>
</div>
</div>
<div id="applicationInfoGrid" ng-controller="manageApps as vm">
<div kendo-grid k-options="manageAppsGridOptions"></div>
<script type="text/x-kendo-template" id="rolesGridTemplate">
<span>Roles for {{dataItem.appName}}</span>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</script>
</div>
Next, the manageApps.js file:
(function () {
'use strict';
var controllerId = 'manageApps';
angular.module('app').controller(controllerId, ['$scope', 'applicationInfoRepository', 'roleRepository', manageApps]);
function manageApps($scope, applicationInfoRepository, roleRepository) {
$scope.custom = {};
$scope.custom.error = false;
// unimportant code removed
var readApps = function (options) {
applicationInfoRepository.getApps().then(function (data) {
options.success(data);
}, showError);
};
var createApp = function (options) {
applicationInfoRepository.addApp(options.data).then(function (data) {
options.success(data);
openSuccess('added', data.appName);
}, showError);
};
var updateApp = function (options) {
applicationInfoRepository.updateApp(options.data).then(function () {
options.success(options.data);
openSuccess('updated', options.data.appName);
}, showError);
};
var deleteApp = function (options) {
applicationInfoRepository.deleteApp(options.data.appName).then(function () {
options.success(options.data);
openSuccess('deleted', options.data.appName);
}, showError);
};
var appListDataSource = new kendo.data.DataSource({
type: 'json',
errors: 'errorHandler',
transport: {
read: readApps,
create: createApp,
update: updateApp,
destroy: deleteApp,
parameterMap: function (data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
} else {
return kendo.data.transports["odata"].parameterMap(data, operation);
}
}
},
schema: {
errors: "error",
edit: "onEdit",
model: {
id: 'appName',
fields: {
appName: {
type: 'string',
editable: true,
validation: { required: { message: "Application Name is required." } },
},
active: { type: 'boolean', defaultValue: true }
}
}
},
error: function (e) {
var obj = JSON.parse(e.xhr.responseText);
alert(obj.error + ': ' + obj.message);
}
});
$scope.manageAppsGridOptions = {
dataSource: appListDataSource,
sortable: true,
pageable: false,
scrollable: false,
detailTemplate: kendo.template($("#rolesGridTemplate").html()),
editable: {
mode: "inline",
confirmation: function (e) {
return "Are you sure that you want to delete the application '" + e.appName + "' and all associated application roles and role users?";
}
},
toolbar: [{ name: 'create', text: 'Add New Application' }],
edit: function (e) {
if (!e.model.isNew()) {
$('input[name=appName]').parent().html(e.model.appName);
}
},
columns: [
{
command: ["edit", "destroy"],
title: " ",
width: "185px"
}, {
field: "appName",
title: "Application Name",
required: true
}, {
field: "active",
title: "Active",
width: "60px",
template: "<input type='checkbox' disabled='disabled' #= active ? 'checked=\"checked\"' : '' # />"
}
]
};
var readRoles = function (options) {
roleRepository.getRolesByAppName(options.data.appName).then(function (data) {
options.success(data);
}, showError);
};
var createRole = function (options) {
roleRepository.addRole(options.data).then(function (data) {
options.success(data);
openSuccess('added', data.roleName);
}, showError);
};
var updateRole = function (options) {
roleRepository.updateRole(options.data).then(function () {
options.success(options.data);
openSuccess('updated', options.data.roleName);
}, showError);
};
var deleteRole = function (options) {
roleRepository.deleteRole(options.data.roleId).then(function () {
options.success(options.data);
openSuccess('deleted', options.data.roleName);
}, showError);
};
var roleListDataSource = new kendo.data.DataSource({
type: 'json',
errors: 'errorHandler',
transport: {
read: readRoles,
create: createRole,
update: updateRole,
destroy: deleteRole,
parameterMap: function(data, operation) {
if (operation !== "read") {
return JSON.stringify(data);
} else {
return kendo.data.transports["odata"].parameterMap(data, operation);
}
}
},
schema: {
errors: "error",
edit: "onEdit",
model: {
id: 'roleId',
fields: {
roleId: {
type: 'int',
editable: false,
validation: { required: { message: "Role Id is required." } },
},
roleName: {
type: 'string',
validation: { required: { message: "Role Name is required." } },
},
roleDescription: {
type: 'string',
}
}
}
},
error: function (e) {
var obj = JSON.parse(e.xhr.responseText);
alert(obj.error + ': ' + obj.message);
}
});
$scope.detailGridOptions = function (dataItem) {
return {
dataSource: roleListDataSource,
sortable: true,
pageable: false,
scrollable: false,
editable: {
mode: "inline",
confirmation: function (e) {
return "Are you sure that you want to delete the role '" + e.roleName + "' and all associated role users?";
}
},
toolbar: [{ name: 'create', text: 'Add New Role' }],
columns: [
{
command: ["edit", "destroy"],
title: " ",
width: "185px"
}, {
field: "roleName",
title: "Role Name",
required: true
}, {
field: "roleDescription",
title: "Role Description",
width: "500px",
}
]
};
}
}
})();
I know that's a lot, and I'd like to eventually refactor all this into separate directives, but I think that would complicate things even further. I'd like to get it working first.
The biggest issue right now is that the "data" property inside the "readRoles" function doesn't contain any data. I don't even know what is supposed to populate this; I copied the code from somewhere else, and it worked fine for the CRUD functions for the master grid ("readApps", "createApp", "updateApp", and "deleteApp"), but there is no data in the "data" property when "readRoles" is called. I can only assume the "createRole", "updateRole", and "deleteRole" functions will have the same problem, but I can't test those yet.
I have a feeling I need to use the "dataItem" parameter in the "detailGridOptions", something like "dataSource: roleListDataSource(dataItem)" but I can't figure out how to make the kendo.data.DataSource declaration take a parameter, or even if that would work here.
Also, is it the case that the "parameterMap" properties are ignored for these DataSources, since I'm using CRUD functions? I think I read that somewhere. If so, I'll just delete them.
Then, once I get this all working, how would I split these into directives without messing everything up? Or is this something I should even do? I'm new to AngularJS and Kendo, but learning by "trial by fire". I understand most tutorials and examples, but they all do things the "simple" way, and our team is trying to do things by separating concerns, etc. so using repositories, etc.
Thanks in advance for any help!
