Kendo UI AngularJS - Detail Grid JSON Datasource

[ian]

 Hello all,

     I'm trying to interface with some rather antiquated technology, and thus far have been successful. My back-end is RM/COBOL 11. I have a custom library which I pass values in an array to the COBOL programs in which they return an array via delegates.These are passed as Collections via a Web API in ASP.Net 5 using the repository pattern, no IQuerryable. This has worked well for me so far, until i got to detail grids and I'm looking for some direction or options. I am somewhat new to Angular and Kendo UI. 

The issue at hand is when I set the datasource on my detail grid everything is fine for single row expansion. But once i bind the next expanded column all prior (still) expanded rows then reflect the calling rows data. I know this is due to way my data is bound to a JSON array and its replaced on the subsequent calls, but my question would be is whats the best way to retain a specific rows data that belongs to it without a query-able datasource? or is my only option to only allow single row expansion? If so can someone point in the right direction on collapsing each prior expanded row before expanding the next?

The detail grid (Party) is looked via the instrument number column value in the main grid. The data in the second expanded party detail overwrites the original data the first expanded row had in it.

Angular Datacontext service

function getParty(instrument) {

 

           return $http({

               url: '/api/app/getparty',

               method: 'GET',

               params: { instrument: instrument }

           })

               .then(success)

               .catch(fail)

 

           function success(response) {

               return response.data;

 

           }

 

           function fail(e) {

               return exception.catcher("XHR Failed for getParty");

           }

       }

 

 Angular Controller (controller as vm syntax)

vm.detailPartyDataSource = [];
 vm.detailPartyOptions = function (dataItem) {
            return {
                dataSource: {
                    data: datacontext.getParty(dataItem.documentInstrument).then(function(data){return vm.detailPartyDataSource = data}),
                    type: "json"
                    },

                scrollable: false,
                sortable: true,
                columns: [
                { field: "name", title: "Name" },
                { field: "nameType", title: "Name Type" },
                { field: "bookPage", title: "Book & Page" },
                { field: "docType", title: "Document Type" },
                { field: "date", title: "Date" },
                { field: "indexed", title: "Indexed" }
                ]
            };

        };

[ian]

For the mean time, I've implemented only one row expanded at a time. Referencing this post, I brought it into Angular using "detailExpand: " in the controller

(function () {
    'use strict';
    var controllerId = 'inquiry';
    angular.module('app').controller(controllerId, ['common', 'datacontext', inquiry]);

    function inquiry(common, datacontext) {
        var getLogFn = common.logger.getLogFn;
        var log = getLogFn(controllerId);

        var vm = this;
        vm.title = 'Inquiry';



        vm.mainGridDataSource = [];
        vm.LastDetailRow = null;
        vm.detailPartyDataSource = [];
        vm.detailCrossDataSource = [];
        vm.mainGridOptions = {
            sortable: true,
            selectable: true,
            groupable: true,
            filterable: true,
            reorderable: true,
            resizable: true,
            detailExpand: function (arg) {
                if (vm.LastDetailRow != null && vm.LastDetailRow.index() != arg.masterRow.index()) {

                    arg.sender.collapseRow(vm.LastDetailRow);
                }

                vm.LastDetailRow = arg.masterRow;
            },
            dataBound: function () {
                var grid = this;
                grid.tbody.find("tr.k-grouping-row").each(function () { grid.collapseGroup(this); });
            },
            columns: [{
                field: "documentInstrument",
                title: "Instrument",
                width: "150px"
            }, {
                field: "documentDate",
                title: "Document Date",
                width: "150px"
            }, {
                field: "documentBookPage",
                title: "Book & Page",
                width: "150px"
            }, {
                field: "documentNameType",
                title: "Name Type",
                width: "120px"
            }, {
                field: "documentName",
                title: "Name",
                width: "250px"
            }, {
                field: "documentType",
                title: "Document Type",
                width: "250px"
            }, {
                field: "documentLegal",
                title: "Legal Description",
                width: "300px"

            }],
            dataSource: {

                data: vm.mainGridDataSource,
                dataType: "json"
            }
        };
        vm.detailPartyOptions = function (dataItem) {
             return ( {
                dataSource: {
                    data: datacontext.getParty(dataItem.documentInstrument).then(function(data){return vm.detailPartyDataSource = data}),
                    type: "json"
                    },

                scrollable: false,
                sortable: true,
                columns: [
                { field: "name", title: "Name" },
                { field: "nameType", title: "Name Type" },
                { field: "bookPage", title: "Book & Page" },
                { field: "docType", title: "Document Type" },
                { field: "date", title: "Date" },
                { field: "indexed", title: "Indexed" }
                ]
            });

        };
        vm.detailCrossOptions = function (dataItem) {
            return {
                dataSource: {
                    data: datacontext.getCross(dataItem.documentInstrument).then(function (data) { return vm.detailCrossDataSource = data }),
                    type: "json"
                },

                scrollable: false,
                sortable: true,
                columns: [
                { field: "xInstrument", title: "Instrument" },
                { field: "xReference", title: "Reference" },
                { field: "xDate", title: "Date" },
                { field: "xDocType", title: "Document Type" },
                { field: "xBookPage", title: "Book & Page" },
                { field: "xLegalDesc", title: "Legal Description" }
                ]
            };
        };
        vm.search = function (startDateString, endDateString, lastName, selectedDocType) {

            return datacontext.getBusiness(startDateString, endDateString, lastName, selectedDocType).then(function (data) {
                return vm.mainGridDataSource = data
            })
        };

        activate();

        function activate() {
            var promises = [];
            common.activateController(promises, controllerId)
                .then(function () { log('Activated Inquiry View'); });

        };

    }
})();

[Nikolay Rusev]

Hello Ian,

You can expand as many items as you need. Detail Grids doesn't know anything about its siblings or parent.

You ca see this Grid example (which is also using angular) that there are different grid instances with different data on levels.

Regards,
Nikolay Rusev
Telerik

 

 

[ian]

Nikolay, Thank you for that reference, is there another way to abstract that out into my datacontext, I'd rather not have data access code in my controller, does it just need to be a kendo.data.DataSource and not a standard array bound to the data property in the datasource object? For example is there any reason i cannot hook a function in the read method of the transport to utilize my datacontext for the fetching of data? or is there a more elegant way to handle it? Im probably overthinking this  

    

[Nikolay Rusev]

Hello Ian,

 

All data-bound type widgets are using DataSource as abstraction for getting-sending data. That said you cannot avoid it. However DataSouce is flexible enough and allows you to control how you retrieve the data.

 

The following article demonstrates how to use $http Service Binding the Grid.

 

Regards,
Nikolay Rusev
Telerik

 

 

[ian]

Nikolay, That is exactly what i was looking for. Very much appreciated.