This is a migrated thread and some comments may be shown as answers.

Details causes main grid to refresh?

4 Answers 85 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Collin
Top achievements
Rank 1
Collin asked on 01 May 2014, 08:12 PM
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.

4 Answers, 1 is accepted

Sort by
0
Mihai
Telerik team
answered on 05 May 2014, 12:38 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Collin
Top achievements
Rank 1
answered on 05 May 2014, 01:57 PM
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
0
Accepted
Mihai
Telerik team
answered on 06 May 2014, 12:11 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Collin
Top achievements
Rank 1
answered on 09 May 2014, 01:22 PM
Awesome thanks!
Tags
Grid
Asked by
Collin
Top achievements
Rank 1
Answers by
Mihai
Telerik team
Collin
Top achievements
Rank 1
Share this question
or