[Solved] TreeView inside partial view load with Jquery ajax

[henke]

Hello,

I have a partial view with a treeview control in it.

The view is loaded through JQuery $.load following the example at http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-using-with-partial-views-loaded-via-ajax.html except using a treeview instead of a grid in the partial view.

every time the partial view is loaded i get an script exeception saying Uncaught TypeError: Object #<an Object> has no method 'tTreeView'

I cant understand what i am doing wrong??

BR Henric

[Atanas Korchev]

Hello henke,

This can occur of the treeview javascript file is not loaded. Make sure this is not the case. The required JavaScript help topic shows the requirements of the treeview.

Regards,
Atanas Korchev
the Telerik team

[henke]

Yes it is correct that the requried javascript is not loaded
but i can't figure out how to solve this.
this is is how the partial view looks:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Keystone.Web.Models.TVViewModel>" %>
<script type="text/javascript" src="../../Scripts/2010.1.518/jquery-1.4.2.min.js"></script>

 <%= Html.Telerik().TreeView()
      .Name("TreeView")
       .ShowCheckBox(true)
      .BindTo(Model.Categorys, mappings =>
      {
       mappings.For<Keystone.Web.Models.Category>(binding => binding
      .ItemDataBound((item, category) =>
      {
        item.Text = category.Name;
        item.Value = category.CategoryId.ToString();
        item.Expanded = true;
        item.Checkable = false;
          })
          .Children(category => category.Products));
          mappings.For<Keystone.Web.Models.Product>(binding => binding
              .ItemDataBound((item, product) =>
              {
                  item.Text = product.Name;
                  item.Value = product.ProductId.ToString();

                  if (Model.CCPs != null)
                  {
                      item.Checked =
                          Model.CCPs
                              .Where(p => p.ProductId.Equals(product.ProductId))
                              .FirstOrDefault() != null;
                  }
               }));
      })%>

      <%= Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
     {
          group.Add("telerik.common.min.js");
          group.Add("telerik.treeview.min.js");
     })
%>

And this is the view that loads the partial view above:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>

    <a href="#" onclick="loadPartialView()">Load partial view</a>

    <script type="text/javascript">
        function loadPartialView(context) {
                $('#result').load('<%= Url.Action("partialTVV", "Home") %>');
        }
</script>

    <div id="result"></div>

</asp:Content>

Any ideas?

BR Henric

[Atanas Korchev]

Hi henke,

You should include the JavaScript files in your view instead of the partial view.

Regards,
Atanas Korchev
the Telerik team

[henke]

Hello Atanas!

I finally got it to work by adding

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
       .Add("telerik.common.min.js")
       .Add("telerik.treeview.min.js")); %>

and the also put
       <%= Html.Telerik().ScriptRegistrar() %>

in my view that loads the partial view.
I didn't realize i had to use them both to get it working

it does tend to be a bit confusing sometimes, at least in my case since I have a view that loads two partial views in two different tabs
and each tab has telerik grid that on rowselecetd loads another patial view with the treeview in it :)

Thank you for your quick respond!

Regards Henke

[henke]

...