Forcing loading image when expanding nodes

5 posts, 0 answers
  1. Marcel
    Marcel avatar
    8 posts
    Member since:
    Jan 2013

    Posted 18 Sep 2013 Link to this post


    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:

    Thanks in advance for everyone's time and effort on this one.
  2. Dimo
    Dimo avatar
    8486 posts

    Posted 19 Sep 2013 Link to this post

    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...

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

    kendo.ui.progress($("...selector..."), true); // or false to hide it show and hide a loading indicator over the whole TreeView.

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 14 Jul 2016 in reply to Dimo Link to this post


    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)
                                  type: 'GET',



    (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



  4. Anthony
    Anthony avatar
    126 posts
    Member since:
    Jun 2013

    Posted 14 Jul 2016 in reply to Anthony Link to this post

    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)

  5. Dimo
    Dimo avatar
    8486 posts

    Posted 18 Jul 2016 Link to this post

    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".

    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top