[Solved] Treeview load on demand problem in partial view

[Daniel]

Hi,

We are having problems with telerik Treeview load on demand when the treeview is loaded in a partial view. The problem happens in Firefox and Chrome but not IE. The parent list of nodes is correctly rendered but load on demand is not working for any children nodes. We are using Ajax databinding but when the '+' is clicked for any of the parent nodes, it is replaced by the busy icon (that does not dissapear) and the children nodes are never loaded. We have used exactly the same code outside of a partial view and it works without any problems. The treeview with load on demand inside a partial view seems to be the problem.

Here is the treeview control as defined in the partial view:

<%= Html.Telerik().TreeView()
        .Name("TreeViewRuleCategories")
        .BindTo(Model.RuleCategories, (item, RuleCategory) =>
        {   // bind initial data
            item.Text = RuleCategory.CategoryName;
            item.Value = RuleCategory.CategoryId.ToString();
            item.LoadOnDemand = true;
        }).DataBinding(dataBinding =>
            dataBinding.Ajax()
                       .Enabled(true)
                       .Select("OnTreeViewRulesLoading", "MappedRules")
            ).ClientEvents(events => events.OnSelect("OnRuleCategoryNodeSelected"))
%>

Note that we also had to explicity reference the treeview.min.js file at the top of the partial view:

<script src="/Scripts/2010.3.1318/telerik.treeview.min.js" type="text/javascript"></script>

The treeview would not render at all without this file included. Including it in the parent view did not help.

Here is the server ajax method with one TreeViewItem returned for testing purposes:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult OnTreeViewRulesLoading(TreeViewItem node)
{
    List<TreeViewItem> nodes = new List<TreeViewItem>();
    nodes.Add(new TreeViewItem() { Text = "Category", Value = "1", LoadOnDemand = true, Enabled = true });

     return new JsonResult { Data = nodes };
}

We have verified that the OnTreeViewRulesLoading method is being called using the visual studio debugger. We have also used firebug to verify that a correct JSON result is being returned.

We are using version 2010.3.1318 of the telerik MVC controls and jquery 1.4.4.

Any help would be appreciated

[Daniel]

Here is some more information about the problem:

• The partial view holding the treeview is displayed in a telerik window
• The partial view is returned through a jquery post request
• The controller action returns the view through the PartialView method

Client side javascript:

function SelectRule() {
        var url = '<%= Url.Action("SelectRule", "MappedRules") %>';
        $.post(url, {}, function (data) {
            var window = $('#SelectRuleWindow').data('tWindow');
            window.content(data);
            window.open();
        });
    }

Where data holds the partial view returned by the server.

Server code that returns partial view

public ActionResult SelectRule()
{
  return PartialView("SelectRulePartialView", GetRuleCategoryViewModel());
}

Debugging this in firebug, an error is detected when the OnTreeViewRulesLoading method returns (see first post for definition). The error message from firebug is "Item is not defined". According to firebug, this comes from line 141 of http://aspnet-scripts.telerikstatic.com/mvcz/2010.3.1318/jquery-1.4.4.min.js.

Just to recap the problem:

• Treeview load on demand gives the above error when the treeview is inside a partial view that is returned through a post request and displayed in a telerik window
• The same treeview code works perfectly with load on demand when defined in a standard view.

its also worth mentioning that in IE this problem doesn't happen, but the first level of child nodes beneath the parent do not respond to any click events.
Hopefully someone can help!

[Atanas Korchev]

Hello Daniel,

 Could it be that some of the required JavaScript files by the treeview is not registered? You need to manually register those files when a Telerik UI component is loaded with Ajax.

Regards,
Atanas Korchev
the Telerik team

[Daniel]

Thanks for the reply - I have the treeview working properly now.

The treeview component needed to be manually registered as well as referenced at the top of the partial view. Without the reference to the treeview.min.js file at the top of the partial view, it won't respond to any click events.

[Rachael]

Added comment to wrong post.