1

I can't figure out what is going on here. I'm trying to make a custom directive for grids and will use element attributes to customize a given instance. In doing so i've made two files

grid-controller.js

app.controller('gridController', ['$scope', function ($scope ) {

    //Initilization code

    $scope.gridOptions = {
        //Setup options
    };

    $scope.detailOptions = function (e) {
        console.log('winning');
        return {
            dataSource: {
                transport: {
                    read: {
                        url: "/detail" + e.OrderNumber + ".json",
                        dataType: 'json'
                    }
                },
                error: function (e) {
                    console.log(e);
                },
                pageSize: true,
                serverPaging: false,
                serverFiltering: false,
                serverSorting: false,
            },
            columns: [
                    {
                        field: "ItemCode",
                        label: "lblItemCode",
                        title: ""
                    }, {
                        field: "ItemDesc",
                        label: "lblItemDesc",
                        title: ""
                    }, {
                        field: "QuantityOrdered",
                        label: "lblQuantityOrdered",
                        title: ""
                    }
            ],
            scrollable: false,
            sortable: true
        };
    }

}]);

grid-directive.js

app.directive('grid', function () {
    return {
        // Restrict E for element
        restrict: 'E',
        // Here we setup the template for the code we want to replace our directive
        template: "<div> \n\
                        <div kendo-grid='grid' \n\
                             k-options='gridOptions'\n\
                             k-data-source='dataSource'>\n\
                        </div> \n\
                        <script type='text/x-kendo-template'\n\
                                id='details'>\n\
                                <div kendo-grid >\n\
                                </div>\n\
                        </script>\n\
                   </div>",
        replace: true,
        scope: {
        },
        controller: "gridController",
        link: function (scope, element, attrs) {

            //Gather some attribute data and set it to the gridOptions object


            if(scope.$eval(attrs.detailsGrid))
            {
                scope.gridOptions.detailTemplate = kendo.template($("#details").html());
                scope.gridOptions.detailInit = scope.detailOptions;
            }

            //More customization code

            scope.dataSource = new kendo.data.DataSource({
                //Setup dataSource options for main grid
            });
        }
    };
});

For sake of brevity i've excluded a lot of the extra code.

My problem is whenever I try to open the details of a row the row opens...closes...and the grid appears to refresh. It almost looks like something is crashing and the main grid is refreshing as a result.

Here is the associated plunkr with the commented portions fleshed out.

Nolic0321
  • 151
  • 1
  • 11

1 Answers1

0

So the day after I posted the question angular-kendo released an update that addressed this issue. After updating the library and fixing up my code a bit the details grid works as expected!

Nolic0321
  • 151
  • 1
  • 11