Angular + TreeView refresh problems

[Ivan]

Hi,

This should be a minimal test case for TreeView reading its data from json file. Currently, we are testing it localy, using Internet Information server.
This is how we invoke the page:

http://localhost/cbp/index.html#/bb

In Chrome, F5 does not reload TreeView, Ctrl+F5 does. In Internet Explorer, reload displays TreeView for a fraction of a second and then its erased.

What problems do you see in this source and how should it be resolved?

Thanks,
Ivan

[Ivan]

If I remove 'kendo.directives' from:

var bb = angular.module('app.bb', ['kendo.directives']);

refresh problems will be gone. How come?

Although for this test case kendo.directives are not required, the whole project relies on them, so this is not a solution.

Anybody?

[Mihai]

Hi Ivan,

There are several problems with your code:

1. it does not include the Kendo UI stylesheets.  You should include at least kendo.common.min.css and a theme, i.e. kendo.default.min.css, so that widgets look alright.

2. Your bbCtrl controller is instantiated twice.  It's easy to verify this by placing an alert inside it.  That's because it was present in the route provider config (index.html at line 23) but also specified in bb.tpl.html in the containing DIV.  I removed it from index.html.

3. Your tree view was created thrice.  That's because the controller itself was instantiated twice, and it creates the tree with $("#bbTree").kendoTreeView(...), but also because your in bb.tpl.html you have:

    <div id="bbTree" kendo-tree-view k-data-source="treeData"/>

which asks the angular-kendo directives to create a tree view with the datasource in treeData; except that there is no such variable in your scope, so that last tree was empty.  That's why apparently it worked if you removed the kendo.directives.  To fix I left that element only as <div id="bbTree"></div>.  Either do that, or use the Angular-Kendo directives -- but not both.

I'm attaching a zip with the modified files.

Regards,
Mihai
Telerik

 

 

[Ivan]

Thank you Mihail for your answer.

Due to other considerations, I decided to replace:

var treeview = $("#bbTree").kendoTreeView({...}).data("kendoTreeView");
with:
$scope.treeOptions = {...};

and in bb.tpl.html:
<div id="bbTree">
with:
<div kendo-tree-view k-options="treeOptions">

Reload does not present a problem any more. Do you think that this solution is correct? However, when I merge these changes into original project, TreeView still does not get displayed sometimes (although there are no multiple instantiations of bbController any more). Any suggestions?

Moreover, when we connect to remote server (instead of local one), Kendo components are rendered immediately after reload although data arrives couple of seconds later. How should that be resolved?

Updated minimal project is attached.

Thank you,
Ivan

[Ivan]

Sorry, with these modification that I proposed, refresh is still not working each time...

[Mihai]

Hi,

The problem is now that the Kendo directive will have already instantiated
the TreeView widget by the time the data from your bbService comes.  At the
time the widget is created, treeOptions is not yet present in scope.

There are two solutions to this.

* Solution 1

Define the tree view like this:

<div kendo-tree-view k-options="treeOptions" k-rebind="treeOptions"></div>

This will tell angular-kendo that it should rebuild the widget whenever the
treeOptions variable changes in the scope.

* Solution 2: (better)

Modify your bbCtrl like this:

bb.controller('bbCtrl', function ($scope, $location, bbService) {
    $scope.treeOptions = {
        dataTextField: 'Name',
        loadOnDemand: false
    };
    init();
    function init(){
        bbService.getbbTree().then(function(response){
            $scope.treeData = response.data.items;
        });
    };
});

So I declare the treeOptions from the start.  Then when the data comes in, I
set the treeData in scope.  The widget definition in HTML is the following:

<div kendo-tree-view k-options="treeOptions" k-data-source="treeData"></div>

This is better because the widget will not be completely reinitialized.
Angular-Kendo pays special attention to the k-data-source attribute and it
will only rebuild the items when it changes, instead of destroying the
widget and creating it again (which is what happens with the k-rebind in
Option 1).

Hope this helps.

Regards,
Mihai
Telerik

 

 

[Ivan]

Thank you Mihai, that solved our problem!

Best regards,
Ivan