Details causes main grid to refresh?

[Collin]

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.

[Mihai]

Hi,

I managed to make it work.  First, there was a bug in angular-kendo which made the inner grid use the same dataSource as the main grid, resulting in the refresh of the main grid.  Fixed in this commit: https://github.com/kendo-labs/angular-kendo/commit/f6edcb51b3451a515517da96b137d214c0cd5a24

However, I had to make a bunch of fixes to your code as well:

1. it was loading multiple versions of Kendo UI (2013.3.1119 and 2013.2.716, both outdated).  Also, it used jQuery 2.x (Kendo currently supports officially 1.9.1) and Angular 1.3-beta (not tested; please try to stay with 1.2.x for the moment).

2. your initialization of detailInit had no effect; removed it.

3. the inner grid must declare that it uses the options provided by $scope.detailOptions defined in controller, hence k-options="detailOptions(dataItem)".  Minor change in detailOptions too, since it directly receives the data item (not an event).

4. I had to comment out scope: {} in your directive; without this, the step above (3) doesn't work (I mean it can't find detailOptions in the scope).  Can't figure out why that happens though.

Here is the working plunker: http://plnkr.co/edit/oYw7yuiJ3Y7LASb6QebU?p=preview

Hope this helps.

Regards,
Mihai
Telerik

 

 

[Collin]

Ah yes looks like I forgot to go back and do some code cleanup.  This is awesome and thanks for your help!  There's one slight problem.  I'd like to be able to use this directive multiple times in one page.  If we're not using an isolate scope then all my detail grids on one form will share the same options...which is definitely not ideal.  I'll try looking more into a way to get the isolate scope going and maybe dig into why it is having isolate scope doesn't allow us to see the scope.detailOptions.

Here's an example of the ideal situation with the potential "bug" in item 4 you mentioned

[Mihai]

Hi Collin,

Apparently that's how isolated scopes work in AngularJS and it's so by design - https://docs.angularjs.org/guide/directive#isolating-the-scope-of-a-directive

However, I found an workaround: use scope: true.  This will create a child scope, so variables you set in the controller will be visible, but won't be overwritten.

See updated plunker: http://plnkr.co/edit/xpgdSgBAL1FdOZdMJvXJ?p=preview

Regards,
Mihai
Telerik

 

 

[Collin]

Awesome thanks!