Forcing loading image when expanding nodes

[Marcel]

Hi,

I have implemented some code in the expand function of the treeview to be able to add childeren nodes to a node. The problem I'm facing is that adding the childeren can take some seconds and in the meantime the tree does not show the loading gif. I have looked at the demos provided on the kendoui website. When you use the Binding to remote data example you can see that a loading image is displayed instead of the arrow for the duration of the populating event. I need to implement code that allows this image to be shown in my example.

I have created a fiddle with a javascript sleep for 5 seconds to simulate the time it takes to add the childeren. The fiddle can be found at:

http://jsfiddle.net/cgkzR/4/

Thanks in advance for everyone's time and effort on this one.

[Dimo]

Hello Marcel,

The small loading icon cannot be used in the way you are trying. You can either implement load on demand as in this demo...

http://demos.kendoui.com/web/treeview/remote-data.html

... or you use the kendo.ui.progress method...

kendo.ui.progress($("...selector..."), true); // or false to hide it

...to show and hide a loading indicator over the whole TreeView.

http://docs.kendoui.com/api/web/ui#methods-progress

Regards,
Dimo
Telerik

[Anthony]

Hi

This is an old post but is it possible to get a bit more information as I have exactly the same issue. 

You can populate the tree dynamically in a number of ways:

(1) create a HierarchicalDataSource and KendoTreeView and use 

transport: { read: { url: serviceRoot + "/Employees", dataType: "jsonp"}

(2) create a HierarchicalDataSource and KendoTreeView and use 

transport: {
                          read: function (options)
                          {
                            $.ajax({
                              type: 'GET',

etc

 

(3) Use kendoTreeView, have some initial data then use expand to load the data on demand

 

The original poster and I have used (3), in this scenario the plus icon disappears and you don't get the loading icon.

Using (1) or (2) can you get the loading icon, and somehow pass node data to the server so that it knows what to return?

I have complete control over both the client and server side

 

Thanks

[Anthony]

Answered my own question after posting

If you use this way you get the spinning icon otherwise you don't. Also you can pass your own data by using a querystring in the url and also by using the schema to identify what the id is, this is then passed to the controller action

transport: {
  read: {
    url: "<my url>" + "?token=" + token + "&",
    dataType: "json"
  }
},

schema: {
  model: {
    id: "ClientID",
    hasChildren: "HasChildren"
}
}

 

So your mvc controller action will then look like this

public JsonResult GetTreeRoot(int token, string clientID)

The only thing I'm slightly stuck on now is how to override the plus/minus icons and still keep the refresh icon, something like the below I guess but not quite

 

#myTreePicker .k-icon.k-plus:not(.k-i-refresh)

[Dimo]

Hello Anthony,

Please use "k-loading" instead of "k-i-refresh". In addition, keep in mind that Kendo UI icons are placed in a sprite, so you will need to reset the background-position to "0 0" or "center center".

Regards,
Dimo
Telerik by Progress