Refresh with loading animation

[Dan]

I need to refresh the whole treeview and I found on forums that to do that is to call .dataSource.read() method. However when I call this method the user does not see that the treeview is loading and he still sees the old data.

How to refresh the treeview and display the loading animation just like when the treeview is loaded for the first time?

[Stoyan]

Hi, Dan,
Thank you for your question.

I am working on the reported issue. However I need some more time to provide a solution. I am going to return with an answer within 24hours.

Thank you for your patience in advance.

Regards,
Stoyan
Progress Telerik

[Stoyan]

Hi, Dan,
Once again thank you for your patience.

To refresh the dataSource of the TreeView and then to show animation while loading the data:

1. use the setDataSource method to set the new remote data
2. capture the dataSource's requestStart and requestEnd events
3. run the kendo.ui.progress method which display a loading animation over the containter which is passed as the parameter
4. in the requestStart pass true as the second parameter to start the animation
5. in the requestEnd pass false to end the animation

This Dojo showcases the above: https://dojo.telerik.com/@Stoyan/uQUVusEb

Hopefully this approach is helpful in your scenario. If additional questions arise, don't hesitate to reach out.

Regards,
Stoyan
Progress Telerik

[Dan]

Hi Stoyan,

Thank you for the solution but now I have another question: Is there a way to create a clone for a DataSource? Or can I set the same datasource? The datasource that I use is already configured for remote data and do not want to write the same settings twice. (The reason I ask is because I use the .net core telerik so the datasource is already configured on the server) 

[Stoyan]

Hello, Dan,

I am not sure whether I understand correctly what is your goal. Are you looking to change the data by updating the dataSource or do you need to only refresh the TreeView and run the initial animation.

If you are only looking to refresh the TreeView I suggest to destroy the Widget and then initialize it again. For more details on destroying Widgets view this article. Please note that initializing a new Widget from leftover elements is not recommended. It is better to reinitialize the TreeView from a newly appended DOM element.

If my assumption is wrong, please consider clarifying how does resetting the dataSource without changing the data fit your scenario.

Looking forward to your reply.

Regards,
Stoyan
Progress Telerik

[Dan]

Hi Stoyan,

Like I said in the first post. I need to read again the data. Since I am calling dataSource.read() it means that my dataSource is using the data from the server and I need to just call again the read method. The reason is that the read method is using an extra parameter that changes the data from the tree view. So when that extra parameter is changed I need to call the server again to retrieve the new data. And like I said in the post the problem with just read is that the treeview does not show a progress to the user that something is happening.

[Stoyan]

Hello, Dan,
Thank you for the provided clarification.

In this case I can suggest using the  transport.read.data property of the DataSource. It allows you to define a function that returns additional parameters to be send to the remote service.

To enable the reload of the dataSource of the TreeView set the loadOnDemand to true. This way child nodes will be fetched only when a parent node is expanded. Then handle the expand event. It is triggered before a subgroup gets expanded. The event provides a reference to the Node that's about to be expanded so you can set it's loaded flag to false. This will allow you to reload the node with the .read() method, as well as the next time it is expanded. To summarize:

1. define the dataSource
2. handle the requestStart and requestEnd events to show the animation

   requestStart:function(){
       kendo.ui.progress($("#treeview"), true);
   },
   requestEnd:function(){
       kendo.ui.progress($("#treeview"), false);
   },

3. define the data property's function containing the logic that returns a parameter to be send with the .read request

   read: {
          url: serviceRoot + "/Employees",
          dataType: "jsonp",
          data: function(){
              return {
                 param: $(additionalValue).val()}
          }
   }

4. define the TreeView
   • set loadOnDemand:true
   • handle the expand event 

     loadOnDemand:true,
     expand:function(e){
            var itm = e.sender.dataItem(e.node);
            itm.loaded(false);
     }

5. call the .read() method

   function readMethod(){
       var tv = $("#treeview").getKendoTreeView(); 
       tv.dataSource.read();       
   }

This Dojo showcases the above. If you inspect the Network Tab you will note tha additional parameter passed to the remote service. The value of the parameter is the value of the input positioned above the TreeView.

Hopefully this fits your scenario.

Regards,
Stoyan
Progress Telerik

[Dan]

Hi Stoyan,

I already imagined this from the previous post however it seems that the requeststart and requestend are executed also for expand events. I just need the animation only for the programmatically called "refresh" of the treeview. Thank you for the hints.

[Stoyan]

Hi, Dan,

to avoid running the animation when the TreeView is expanded the animation can be set up in the readMethod function. This is made possible because read() returns a promise that is resolved with the response.

function readMethod(){
          kendo.ui.progress($("#treeview"), true);
          var tv = $("#treeview").getKendoTreeView();

          tv.dataSource.read().then(function() {
            	kendo.ui.progress($("#treeview"), false);
          });
}

 

Additionally, it's worth noting that  according your requirements the loader animation can be contained from spreading over the whole page. To achieve this set the CSS of the wrapper element to position:relative.

This Dojo demonstrates the above suggestions.

Regards,
Stoyan
Progress Telerik