Load/Reload TreeView node

[Peter]

Hi;

I've read many different threads on the ability to handle the TreeView content. I am running into an issue that I cannont get working smoothly or not at all. I have a TreeView. This TreeView requires updating when I make an update to a DB. The loading of the TreeView works based on queries on the DB. My main problem is that after I make the DB update I need to request a reload of the current node. Updates are based on the selected TreeView node. I am performing operations like selectedDataItem.load(); but I cannot get the loading to work. It works if the current node has not been expanded. It will not work f the current node has already been expanded. It also does not work if the node had been expanded and no child nodes are present. I.E. after this point adding to the node also does nothing to the TreeView. I do know that the data items used for populating the TreeView are correct because if I restart my app and open the TreeView the items are loaded. What I would like to know is what is the correct way to dynamcially update the TreeView regardless of the TreeView state.

Peter

[Daniel]

Hello Peter,

If the node has already been expanded then it will be marked as loaded and a request will not be made. You should use the loaded method before the load method in order to reload the node.

Regards,
Daniel
Telerik

[Peter]

Hi;
This is my treeview defintion:

@(Html.Kendo().TreeView()
   .Name("GroupTreeView")
   .DataTextField("Name")
   .HtmlAttributes(new { @class = "layout" })
   .DataSource(
      dataSource => dataSource
         .Read(read => read.Action("GetManagmentLevel", "SystemManagement"))
               )
      .Events
      (
         events =>
         {
            events.Select("OnGroupSelect");
            events.Expand("OnGroupExpand");
            events.DataBound("OnGroupTreeBound");          
         }
      )                                                                                  
)

I am performing the following on the TreeView control:

var treeView = $('#GroupTreeView').data('kendoTreeView');
if (treeView != null && CurrentlyActiveGroupTreeNode != null)
{       
    var selectedDataItem = treeView.dataItem(CurrentlyActiveGroupTreeNode);                      
    selectedDataItem.haschildren = true;
    treeView.collapse(CurrentlyActiveGroupTreeNode);
    selectedDataItem.loaded(false);
    selectedDataItem.load();
    treeView.expand(CurrentlyActiveGroupTreeNode);
}

I've validated that the Action that is being requested by the tree is working, is being called. But the tree does expand properly in IE - but looks to be working in Chrome.

Peter

[Daniel]

Hello again Peter,

The node will not be expanded since the collapse animation will not be completed when the method is used. Please check if not calling the collapse method resolves the problem. Also, you should call the expand method in the dataBound event in order to avoid duplicate requests e.g.

var treeView = $('#GroupTreeView').data('kendoTreeView');
if (treeView != null && CurrentlyActiveGroupTreeNode != null)
{
    var selectedDataItem = treeView.dataItem(CurrentlyActiveGroupTreeNode);
    selectedDataItem.haschildren = true;
    selectedDataItem.loaded(false);
    selectedDataItem.load();
    treeView.one("dataBound", function () {
        treeView.expand(CurrentlyActiveGroupTreeNode);
    });
}

Regards,
Daniel
Telerik

[Peter]

Hi;

No; the code you prvoded had no effect. Dynamic expansion works with Google and with Firefox, but not with IE[10]

Peter

[Daniel]

Hello Peter,

I created a small jsBin example that demonstrates this scenario. At least on my side a request is made and the node is expanded in all browsers. Please check it and let me know if I am missing something.

Regards,
Daniel
Telerik

[Peter]

Hi;

Ok; this example was not taking into consideration that we are dynaically loading tree nodes at run tim, i.e. not the entiere tree). The problem did revolve around IE and we came to the conclusion that IEs aggressive caching strategy was causing problems. We have turned off caching in the particular area of concern and IE now behaves as wanted.


Peter

[Steven]

You say you "turned off caching in the particular area of concern and IE now behaves as wanted" but you haven't told us HOW to did this. Please post some instructions (or code sample) to help the rest of us out.

Thanks!

[Peter]

My comment was with regards to standard cache management capabilities [provided by Microsoft web technologies as well as other web management systems]. I didn't EXPLAIN HOW to do this as it is standard knowledge. I do not know what tools you are using so you should review caching strategies with the tools that you use. My answer dealt with the fact that refreshing was not working because of IE's aggressive caching strategy and was resolved by turning it off (in MS ASP.NET MVC tech - you can control caching of requests from the controller that is being called).

Peter

[Steven]

When a node in the
Kendo TreeView is expanded the READ calls a function in my home controller to
get a simple list of nodes for the next level. That C# function is shown below.
I don’t see how I could also return a date time from this function to disable
caching. Please explain.

 

 

        public ActionResult
BindHierarchyTree([DataSourceRequest]DataSourceRequest request, BindHierarchyTreeReq bindHierarchyTreeReq)

        {

            // By default, get the children of the ROOT node

            var parentNode =
SessionHierarchyRootNode;

 

            // If an expanded node ID is provided, get the children of
the EXPANDED node

            if
(bindHierarchyTreeReq.ExpandedNodeID != null)

            {

                var expandedNodeGUID = Guid.Parse(bindHierarchyTreeReq.ExpandedNodeID);

               
parentNode = SessionHierarchyRootNode.FindNodes(x => x.GUID ==
expandedNodeGUID, true)[0];

            }

 

            // Build list of simple tree nodes

            var simpleTreeNodes = new List<VMSimpleTreeNode>();

 

            foreach (var childNode in parentNode.Children)

            {

                var hasChildren =
childNode.hasChildren;

               
simpleTreeNodes.Add(new VMSimpleTreeNode(childNode.GUID.ToString(), childNode.Title,
hasChildren));

            }

 

            // Return simple tree nodes

            return Json(simpleTreeNodes,
JsonRequestBehavior.AllowGet);

        }

 

[Petur Subev]

Hello,

I assume you want to send a timestamp from the client to the server to avoid caching (same approach is used when jQuery's ajax cache:false option is used). How to send additional parameter with the dataSource is covered in the documentation here:

http://docs.kendoui.com/api/framework/datasource#configuration-transport.read.data

e.g.

var dataSource = new kendo.data.DataSource({
  transport: {
    read: {
      url: "http://demos.kendoui.com/service/twitter/search",
      dataType: "jsonp", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
      data: function() {
        return {
          _: new Date().getTime()
        };
      }
    }
  }
});

Kind Regards,
Petur Subev
Telerik

[Peter]

Hi;

The response that Petur gave is another [common] technique to make sure a request submitted will generate a new response (and not a cached one). If you are using ASP.NET MVC then on the controller you can set an attribute on the class definition - [Core.NoCache] which turns off caching for requests made to the controller.

Peter

[Steven]

TreeView Expand Node Caching Issue in IE --- THIS SOLUTION WORKED FOR ME...

You can disable caching for ALL action methods in your controller using this attribute:

[System.Web.Mvc.OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
public class MyController : Controller
{
}

Read more here:
http://stackoverflow.com/questions/1160105/disable-browser-cache-for-entire-asp-net-website

[Paul]

Hi I have the same problem as the original post, i have tried the recommended solution and it gives an error when the selectedDataItem.load() method is called, the error is "Uncaught TypeError: Cannot read property 'length' of undefined "

my code is as follows:

    function RefreshSelectedNode() {

        var treeview = $("#treeview").data("kendoTreeView");
        var getitem = treeview.dataSource.get(selectedId);
        var selectitem = treeview.findByUid(getitem.uid);

        if (treeview != null && selectitem != null) {
            var selectedDataItem = treeview.dataItem(selectitem);
            selectedDataItem.haschildren = true;
            treeview.collapse(selectitem);
            selectedDataItem.loaded(false);
            selectedDataItem.load();
            treeview.one("dataBound", function () {
                treeview.expand(selectitem);
            });
        }
    }


what am i doing wrong?

[Petur Subev]

Hello Paul,

Demonstrate your case with a JsBin example so we can further investigate what exactly causes the exception.

Kind Regards,
Petur Subev
Telerik

[Paul]

Hi Petur 

I was able to resolve this by only calling the RefreshSelectedNode() after the page that was submitted had finished loading by adding this to my Create View
$(document).ready(function () {

                if(reloadtree)
                    RefreshSelectedNode();
}); 

I dont know why as the treeview is loaded on a different "thread" so to speak, but it works....