This is a migrated thread and some comments may be shown as answers.

Refresh with loading animation

8 Answers 514 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Dan asked on 09 Feb 2021, 06:05 AM

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?

8 Answers, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 10 Feb 2021, 04:22 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Accepted
Stoyan
Telerik team
answered on 11 Feb 2021, 05:52 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 12 Feb 2021, 05:02 AM

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) 

0
Stoyan
Telerik team
answered on 12 Feb 2021, 12:36 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 12 Feb 2021, 03:14 PM

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.

0
Stoyan
Telerik team
answered on 16 Feb 2021, 10:08 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 16 Feb 2021, 10:57 AM

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.

0
Stoyan
Telerik team
answered on 17 Feb 2021, 02:28 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Stoyan
Telerik team
Dan
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or