Kendo grid refresh problem

[Ivan]

Scenario is:

Each selection of the node in kendo treeview, dynamically adds tab in kendo tabstrip control. Each tab is populated with kendo grid control.

Content of a grid is populated using angular directive.

$scope.performTreeSelect = function(selectedBB, updateMapper, breadCrumb, tabText) {
    var tree = $('#bb-tree').data('kendoTreeView'); // $scope.treeView

    // tabstrip start
    var tabstrip = $("#tabStrip").kendoTabStrip().data("kendoTabStrip");
    $scope.bbDataSourceFactory.push({});
    var bbDataSourceFactoryIndex = $scope.bbDataSourceFactory.length - 1;
    if (updateMapper) {
        bulletinBoardService.bbDataSourceMapper.push({"factoryIndex":bbDataSourceFactoryIndex, "selectedBBId":selectedBB,"breadCrumb":breadCrumb,"tabText":tabText  });
    }
    var bbDirectiveHTML =
        '<div style="padding-left: 60px;"><div><p>' + breadCrumb + '</p></div>' +
            '<display-basket grid-id="' + selectedBB +'" actions="bbActions" uids="uids" grid-options="bbOptions" grid-data-source-factory="bbDataSourceFactory[' + bbDataSourceFactoryIndex + ']"  grid-data-source-options="bbDataSourceOptions">' +
            '</display-basket>'+
        '</div>';
    var bbDirective = angular.element(bbDirectiveHTML);

    tabstrip.append({text: tabText, content: ''});
    angular.element(document.getElementById("tabStrip")).append(bbDirective);

    $compile(bbDirective)($scope);
};

We have an option to click a refresh button and the following procedure in the controller of the kendo treeview is called:

Here is the code that handles events fired from the directive:

$scope.$on('actionClick', function(e) {
    bulletinBoardService.selectedBBId = e.targetScope.gridId;
    $scope.uids = e.targetScope.uids;

    switch (arguments[1].ev) {
        case 'refresh':
            $scope.refresh(arguments[1].gridId);
            break;

    }
});

$scope.refresh(arguments[1].gridId); calls the following function:

var populateGrid = function (selectedBB) {
    if ( selectedBB ) {
        for (var i=0; i< bulletinBoardService.bbDataSourceMapper.length; i++){
            var it = bulletinBoardService.bbDataSourceMapper[i].selectedBBId;
            if (it == selectedBB){
                $scope.bbDataSourceFactory[bulletinBoardService.bbDataSourceMapper[i].factoryIndex ] = function () {
                    return CBPmWebAPI.BulletinBoardDocumentsDataSource( selectedBB, bulletinBoardService.bbDataSourceOptions );
                };
                break;
            }
        }
    }
};

2. Directive displayBasket:

link: function ( scope, element, attrs ) {
    element.prepend( bsktDirModule.formActionsDisplayHTML( scope.actions ) );
    element.removeAttr("set_on_click");
    $compile( element.contents() )( scope );

    scope.$watch( 'gridDataSourceFactory', function ( gridDataSourceFactory, oldgridDataSourceFactory ) {
        if ( gridDataSourceFactory ) {
            // Set the grid's data source to the result of invoking the factory
            var grid = $( '#' + scope.gridId ).data( 'kendoGrid' );

            // GRID IS UNDEFINED - WHY?????

            if (grid)
            {
                grid.setDataSource( gridDataSourceFactory() );
                scope.uids = [];
            }
        }
    });
},

When we click the refresh button in the directive following code is executed (Note msg is "refreshed"):

$scope.handleClick = function(msg) {
    $scope.$emit('actionClick', {ev: msg, gridId: $scope.gridId});
};

Initially grid variable is not defined, but after clicking refresh button which is rendered within the directive grid variable is defined. Why does it happen?

Thanks,
Ivan

[Mihai]

Hello,

It's not clear from your code if a grid is even created. (if so, where?)

One possible cause would be that the Kendo directives operate asynchronously.  When you do:

$compile( element.contents() )( scope );

the widgets aren't available on the next line, but after a timeout.  So if somehow your watcher for gridDataSourceFactory gets called immediately, the grid won't be there.  I've no other ideas based on the code you sent.

If you can provide a runnable sample I might be able to help better.

Regards,
Mihai
Telerik