DetailGrid DataSource using functions for CRUD ops

[Christopher]

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:

001.(function () {
002.    'use strict';
003.
004.    var controllerId = 'manageApps';
005.    angular.module('app').controller(controllerId, ['$scope', 'applicationInfoRepository', 'roleRepository', manageApps]);
006.
007.    function manageApps($scope, applicationInfoRepository, roleRepository) {
008.
009.        $scope.custom = {};
010.
011.        $scope.custom.error = false;
012.
013.        var showError = function () {
014.            $scope.custom.error = true;
015.        };
016.
017.        var openSuccess = function (message, org) {
018.            $scope.custom.message = message;
019.            $scope.custom.orgVal = org;
020.            var instance = $modal.open({
021.                templateUrl: "Success.html",
022.                scope: $scope,
023.                windowClass: 'modal-dialog-center'
024.            });
025.            return instance;
026.        };
027.
028.        var openConfirm = function (org) {
029.            $scope.custom.orgVal = org;
030.            var instance = $modal.open({
031.                templateUrl: "Confirm.html",
032.                scope: $scope,
033.                windowClass: 'modal-dialog-center'
034.            });
035.            return instance;
036.        };
037.
038.        var readApps = function (options) {
039.            applicationInfoRepository.getApps().then(function (data) {
040.                options.success(data);
041.            }, showError);
042.        };
043.
044.        var createApp = function (options) {
045.            applicationInfoRepository.addApp(options.data).then(function (data) {
046.                options.success(data);
047.                openSuccess('added', data.appName);
048.            }, showError);
049.        };
050.
051.        var updateApp = function (options) {
052.            applicationInfoRepository.updateApp(options.data).then(function () {
053.                options.success(options.data);
054.                openSuccess('updated', options.data.appName);
055.            }, showError);
056.        };
057.
058.        var deleteApp = function (options) {
059.            applicationInfoRepository.deleteApp(options.data.appName).then(function () {
060.                options.success(options.data);
061.                openSuccess('deleted', options.data.appName);
062.            }, showError);
063.        };
064.
065.        var appListDataSource = new kendo.data.DataSource({
066.            type: 'json',
067.            errors: 'errorHandler',
068.            transport: {
069.                read: readApps,
070.                create: createApp,
071.                update: updateApp,
072.                destroy: deleteApp,
073.                parameterMap: function (data, operation) {
074.                    if (operation !== "read") {
075.                        return JSON.stringify(data);
076.                    } else {
077.                        return kendo.data.transports["odata"].parameterMap(data, operation);
078.                    }
079.                }
080.            },
081.            schema: {
082.                errors: "error",
083.                edit: "onEdit",
084.                model: {
085.                    id: 'appName',
086.                    fields: {
087.                        appName: {
088.                            type: 'string',
089.                            editable: true,
090.                            validation: { required: { message: "Application Name is required." } },
091.                        },
092.                        active: { type: 'boolean', defaultValue: true }
093.                    }
094.                }
095.            },
096.            error: function (e) {
097.                var obj = JSON.parse(e.xhr.responseText);
098.                alert(obj.error + ': ' + obj.message);
099.            }
100.        });
101.
102.        $scope.manageAppsGridOptions = {
103.            dataSource: appListDataSource,
104.            sortable: true,
105.            pageable: false,
106.            scrollable: false,
107.            detailTemplate: kendo.template($("#rolesGridTemplate").html()),
108.            editable: {
109.                mode: "inline",
110.                confirmation: function (e) {
111.                    return "Are you sure that you want to delete the application '" + e.appName + "' and all associated application roles and role users?";
112.                }
113.            },
114.            toolbar: [{ name: 'create', text: 'Add New Application' }],
115.            edit: function (e) {
116.                if (!e.model.isNew()) {
117.                    $('input[name=appName]').parent().html(e.model.appName);
118.                }
119.            },
120.            columns: [
121.                {
122.                    command: ["edit", "destroy"],
123.                    title: " ",
124.                    width: "185px"
125.                }, {
126.                    field: "appName",
127.                    title: "Application Name",
128.                    required: true
129.                }, {
130.                    field: "active",
131.                    title: "Active",
132.                    width: "60px",
133.                    template: "<input type='checkbox' disabled='disabled' #= active ? 'checked=\"checked\"' : '' # />"
134.                }
135.            ]
136.        };
137.
138.        var readRoles = function (options) {
139.            roleRepository.getRolesByAppName(options.data.appName).then(function (data) {
140.                options.success(data);
141.            }, showError);
142.        };
143.
144.        var createRole = function (options) {
145.            roleRepository.addRole(options.data).then(function (data) {
146.                options.success(data);
147.                openSuccess('added', data.roleName);
148.            }, showError);
149.        };
150.
151.        var updateRole = function (options) {
152.            roleRepository.updateRole(options.data).then(function () {
153.                options.success(options.data);
154.                openSuccess('updated', options.data.roleName);
155.            }, showError);
156.        };
157.
158.        var deleteRole = function (options) {
159.            roleRepository.deleteRole(options.data.roleId).then(function () {
160.                options.success(options.data);
161.                openSuccess('deleted', options.data.roleName);
162.            }, showError);
163.        };
164.
165.        var roleListDataSource = new kendo.data.DataSource({
166.            type: 'json',
167.            errors: 'errorHandler',
168.            transport: {
169.                read: readRoles,
170.                create: createRole,
171.                update: updateRole,
172.                destroy: deleteRole,
173.                parameterMap: function(data, operation) {
174.                    if (operation !== "read") {
175.                        return JSON.stringify(data);
176.                    } else {
177.                        return kendo.data.transports["odata"].parameterMap(data, operation);
178.                    }
179.                }
180.            },
181.            schema: {
182.                errors: "error",
183.                edit: "onEdit",
184.                model: {
185.                    id: 'roleId',
186.                    fields: {
187.                        roleId: {
188.                            type: 'int',
189.                            editable: false,
190.                            validation: { required: { message: "Role Id is required." } },
191.                        },
192.                        roleName: {
193.                            type: 'string',
194.                            validation: { required: { message: "Role Name is required." } },
195.                        },
196.                        roleDescription: {
197.                            type: 'string',
198.                        }
199.                    }
200.                }
201.            },
202.            error: function (e) {
203.                var obj = JSON.parse(e.xhr.responseText);
204.                alert(obj.error + ': ' + obj.message);
205.            }
206.        });
207.
208.        $scope.detailGridOptions = function (dataItem) {
209.            return {
210.                dataSource: roleListDataSource,
211.                sortable: true,
212.                pageable: false,
213.                scrollable: false,
214.                editable: {
215.                    mode: "inline",
216.                    confirmation: function (e) {
217.                        return "Are you sure that you want to delete the role '" + e.roleName + "' and all associated role users?";
218.                    }
219.                },
220.                toolbar: [{ name: 'create', text: 'Add New Role' }],
221.                columns: [
222.                    {
223.                        command: ["edit", "destroy"],
224.                        title: " ",
225.                        width: "185px"
226.                    }, {
227.                        field: "roleName",
228.                        title: "Role Name",
229.                        required: true
230.                    }, {
231.                        field: "roleDescription",
232.                        title: "Role Description",
233.                        width: "500px",
234.                    }
235.                ]
236.            };
237.        }
238.    }
239.})();

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! 
Chris

[Alexander Valchev]

Hi Christopher,

Straight to your questions.

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. 

Yes, this is correct and is written in the parameterMap API reference.

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 recommend to not copy-paste code snippets that you do not understand. I am not sure where the problem comes from either but I believe that it is connected with the getRolesByAppName function:

var readRoles = function (options) {
          roleRepository.getRolesByAppName(options.data.appName).then(function (data) {
              options.success(data);
          }, showError);
};

The options comes from the dataSource transport and if server operations of the dataSource are enabled should contain information regarding current page, pageSize, take, skip parameters. In your case however the dataSource is not configured for server operations so those data will not be send. Where did you copied the sample from? In case you need further assistance could you please set up a very basic Dojo sample that I can run and examine locally?

Regards,
Alexander Valchev
Telerik