TreeView template binding

[Cookie Monster]

Hello,

Can I somehow put in a treeview server-side binding and templatimg at the same time ?
Like here: I'm doing a dynamic menu binding, but at the last level I'd like to have same template for all child items:

mappings.For<User>(binding => binding

.ItemDataBound((item, user) =>

{

item.Text = user.FullName;

item.Value = user.FullName;

})

//.Children(user => { return new List<string>{"template"};})

Html.Telerik().TreeView()
            .Name("HierarchyView")
            .BindTo(Model, mappings =>
            {
                mappings.For<Division>(binding => binding
                        .ItemDataBound((item, branch) =>
                        {
                            item.Text = branch.Name;
                        })
                        .Children(branch => branch.Branches)
                        );
                mappings.For<Region>(binding => binding
                        .ItemDataBound((item, branch) =>
                        {
                            item.Text = branch.Name;
                        })
                        .Children(branch => branch.Branches)
                        );
                mappings.For<ProfitCentre>(binding => binding
                        .ItemDataBound((item, branch) =>
                        {
                            item.Text = branch.Name;
                        })
                        .Children(branch => branch.RMs)
                        );
                mappings.For<User>(binding => binding
                        .ItemDataBound((item, user) =>
                        {
                            item.Text = user.FullName;
                            item.Value = user.FullName;
                        })
                        //.Children(user => { return new List<string>{"template"};})
                        );
            }).Render();

[Georgi Krustev]

Hello Cookie Monster,

To achieve your goal you need to add one more level of mappings for the last level of items. In the .ItemDataBound method you can set your template, and to avoid any possible errors just return null for the children collection.

...
                mappings.For<User>(binding => binding
                        .ItemDataBound((item, user) =>
                        {
                            item.Text = user.FullName;
                            item.Value = user.FullName;
                        })
                        .Children(user => user.LastItems)
                        );
                mappings.For<LastItem>(binding => binding
                        .ItemDataBound((item,lastItem) =>
                        {
                            item.Content(()=>%> add template <%);
                        }
                        .Children(lastItem => null)
                )
...

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Cookie Monster]

Hello Georgi,

Thanks. I did it like that:

mappings.For<User>(binding => binding
                        .ItemDataBound((item, user) =>
                        {
                            item.Text = user.FullName;
                            item.Value = user.FullName;
                        })
                        .Children(user => user.GetMenuItems())
                        );
                mappings.For<TreeViewItem>(binding => binding
                        .ItemDataBound((item, lastItem) =>
                        {
                            item.Content(() => Html.RenderPartial("~/Views/Account/TreeMenu.ascx", (User)null));
                        })
                        .Children(lastItem => null));

And got an exception

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1593: Delegate 'System.Action<Telerik.Web.Mvc.UI.TreeViewItem,StGeorge.MWS.Contract.Hierarchy.HierarchyElement>' does not take '1' arguments

Source Error:

Line 8: Html.Telerik().TreeView() Line 9: .Name("HierarchyView") Line 10: .BindTo(Model, mappings =>

[Cookie Monster]

Also, yours example
 mappings.For<TreeViewItem>(binding => binding
                        .ItemDataBound((item, lastItem) =>
                        {
                            item.Content(() =>%> <a>test!</a><%);
                        })
                        .Children(lastItem => null));
gave me another exception

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1026: ) expected

Source Error:

Line 238: #line default Line 239: #line hidden Line 240: @__w.Write(" <a>test!</a>");

And that one didn't work either:
mappings.For<TreeViewItem>(binding => binding
                        .ItemDataBound((item, lastItem) =>
                        {
                            item.Content(() =>
                                             {%> <a>test!</a><%
                                             });
                        })
                        .Children(lastItem => null));

[Georgi Krustev]

Hello Cookie Monster,

The first error which you post in most cases is related with missing "System.Linq" namespace in the web.config or something with the passed collection as Model.
For your convenience I have attached you a simple test project which implements the required functionality.

Best wishes,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Cookie Monster]

Thank again!
But, I need to render control as the content of the item.
Pretty much like this:

 mappings.For<TreeViewItem>(binding => binding
                        .ItemDataBound((item, lastItem) =>
                        {
                            item.Content(() => { Html.RenderPartial("~/Views/Account/TreeMenu.ascx", lastItem); });
                        })
                        .Children(lastItem => null));

And I keep getting this exxception

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1593: Delegate 'System.Action<Telerik.Web.Mvc.UI.TreeViewItem,StGeorge.MWS.Contract.Hierarchy.HierarchyElement>' does not take '1' arguments

Source Error:

Line 8: Html.Telerik().TreeView() Line 9: .Name("HierarchyView") Line 10: .BindTo(Model, mappings => Line 11: { Line 12: mappings.For<Division>(binding => binding

[Cookie Monster]

Hi
I've fixed that.
I guess the issue for me was in the .Contant() function of the TreeViewItem.

If I specify content like .Content(() => {,,,}) it throws an exception, but the code .Content = () => {} works perfectly fine.
Thanks

[Cookie Monster]

Hello,

Now I faced another issue.

1) I specify item mapping:
 mappings.For<User>(binding => binding
                        .ItemDataBound((item, rm) =>
                        {
                            item.ActionName = "BrowseFor";
                            item.ControllerName = "Home";
                            item.RouteValues.Add("rmId", rm.Id);
                            
                            item.Text = rm.FullName;
                            item.Value = rm.FullName;

                            item.Content = () =>
                                                  {
                                                      Html.RenderPartial("~/Views/Account/TreeMenu2.ascx", rm);
                                                  };
                        })
                        .Children(user => null)
But when I click on the item the "Home" controllers action "BrowseFor" does not get invoked.
Although with the declaration like that
 mappings.For<User>(binding => binding
                        .ItemDataBound((item, rm) =>
                        {
                            item.ActionName = "BrowseFor";
                            item.ControllerName = "Home";
                            item.RouteValues.Add("rmId", rm.Id);
                            
                            item.Text = rm.FullName;
                            item.Value = rm.FullName;
                        })
                        .Children(user => null)
it does.



2) When I try to render a simple treeview I got an exception:
at Telerik.Web.Mvc.Infrastructure.Implementation.AuthorizeAttributeCache.GetAuthorizeAttributes(RequestContext requestContext, String controllerName, String actionName)
   at Telerik.Web.Mvc.Infrastructure.Implementation.ControllerAuthorization.IsAccessibleToUser(RequestContext requestContext, String controllerName, String actionName)
   at Telerik.Web.Mvc.Infrastructure.Implementation.NavigationItemAuthorization.IsAccessibleToUser(RequestContext requestContext, INavigatable navigationItem)
   at Telerik.Web.Mvc.UI.NavigatableExtensions.IsAccessible(INavigatable item, INavigationItemAuthorization authorization, ViewContext viewContext)
   at Telerik.Web.Mvc.UI.TreeView.WriteItem(TreeViewItem item, IHtmlNode parentTag, ITreeViewHtmlBuilder builder)
   at Telerik.Web.Mvc.UI.TreeView.<>c__DisplayClass5.<WriteHtml>b__3(TreeViewItem item, Int32 index)
   at Telerik.Web.Mvc.Extensions.EnumerableExtensions.Each[T](IEnumerable`1 instance, Action`2 action)
   at Telerik.Web.Mvc.UI.TreeView.WriteHtml(HtmlTextWriter writer)
   at Telerik.Web.Mvc.UI.ViewComponentBase.Render()
   at Telerik.Web.Mvc.UI.ViewComponentBuilderBase`2.Render()


   at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
   at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
   at System.Web.UI.Control.Render(HtmlTextWriter writer)
   at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
   at System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children)
   at System.Web.UI.Control.RenderChildren(HtmlTextWriter writer)
   at System.Web.UI.Page.Render(HtmlTextWriter writer)
   at System.Web.Mvc.ViewPage.Render(HtmlTextWriter writer)
   at System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter)
   at System.Web.UI.Control.RenderControl(HtmlTextWriter writer)
   at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Here is a treeView Desclaration
 if (Model != null)
    Html.Telerik().TreeView()
            .Name("UserHierarchyView" + Model.Id)
            .Items(treeview =>
                       {
                           treeview.Add()
                               .Text("Planning & Tracking")
                               .ImageUrl("~/Content/Default/images/note.gif")
                               .ImageHtmlAttributes(new { alt = "Planning & Tracking" });


                           treeview.Add()
                               .Text("Customers")
                               .Action("Home", "BrowseFor", new {rmId = Model.Id, con="Customer", act="Index"})
                               .ImageUrl("~/Content/Default/images/customers.gif")
                               .ImageHtmlAttributes(new {alt = "Active Customers"})
                               .Items(subItem =>
                                          {
                                              subItem.Add()
                                                  .Text("Quadrant")
                                                  .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Quadrant", act = "Index" })
                                                  //.ImageUrl("~/Content/Default/images/contactsItems.gif")
                                                  .ImageHtmlAttributes(new {alt = "Customers Quadrant"});

                                              subItem.Add()
                                                  .Text("Inactive")
                                                  .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Customer", act = "InactiveCustomers" })
                                                  .ImageUrl("~/Content/Default/images/customers_i.gif")
                                                  .ImageHtmlAttributes(new {alt = "Inactive Customers"});

                                              subItem.Add()
                                                  .Text("Pending Deletion")
                                                  .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Customer", act = "DeletedCustomers" })
                                                  .ImageUrl("~/Content/Default/images/customers_d.gif")
                                                  .ImageHtmlAttributes(new {alt = "Pending Deletion Customers"});
                                          });
                           treeview.Add()
                               .Text("Prospects")
                               .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Prospect", act = "Index" })
                               .ImageUrl("~/Content/Default/images/prospects.gif")
                               .ImageHtmlAttributes(new {alt = "Active Prospects"})
                               .Items(subItem =>
                                          {
                                              subItem.Add()
                                                  .Text("Inactive")
                                                  .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Prospect", act = "InactiveProspects" })
                                                  //.ImageUrl("~/Content/Default/images/contactsItems.gif")
                                                  .ImageHtmlAttributes(new {alt = "Inactive Prospects"});

                                              subItem.Add()
                                                  .Text("Pending Deletion")
                                                  .Action("Home", "BrowseFor", new { rmId = Model.Id, con = "Prospect", act = "DeletedProspects" })
                                                  //.ImageUrl("~/Content/Default/images/contactsItems.gif")
                                                  .ImageHtmlAttributes(new {alt = "Pending Deletion Prospects"});

                                          });

                            treeview.Add()
                               .Text("Campaigns")
                               .ImageUrl("~/Content/Default/images/campaign.gif")
                               .ImageHtmlAttributes(new { alt = "Campaigns & Leads" });
                       })
            .Render();

I guess it has something to do with the .Action() method.. Could you please advise how can I fix those 2 issues ?

[Georgi Krustev]

Hi Cookie Monster,

Straight onto your questions:

#1: I have attached a test project which implements the required functionality.

#2: After further investigation, we noticed that current that if item has content action name, controller name and route name are disregarded. To avoid this behavior I will suggest you use item.Url property. In this case you need to use Html.Action(action name, controller name);

All the best,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Brian Matuska]

I just tried your sample mvc treeview app and it worked fine.  However, if i modify Index.Aspx and change

mappings.For<TreeViewMvcApp.Controllers.HomeController.Division>(binding => binding
                        .ItemDataBound((item, branch) =>
                        {
                            item.Text = branch.Name;
                        })
                        .Children(branch => branch.templates)
                        );

To:

mappings.For<TreeViewMvcApp.Controllers.HomeController.Division>(binding => binding
                        .ItemDataBound((item, branch) =>
                        {
                            item.Text = branch.Name;
                            item.Value = branch.ID;
                        })
                        .Children(branch => branch.templates)
                        );

I'll get an compilation error.

Compilation Error

Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

Compiler Error Message: CS1593: Delegate 'System.Action<Telerik.Web.Mvc.UI.TreeViewItem,TreeViewMvcApp.Controllers.HomeController.Division>' does not take '1' arguments

Source Error:

Line 13: Html.Telerik().TreeView() Line 14: .Name("HierarchyView") Line 15: .BindTo(Model, mappings => Line 16: { Line 17: mappings.For<TreeViewMvcApp.Controllers.HomeController.Division>(binding => binding

Edit:

Got it to work with .ToString() 

item.Value = branch.ID.ToString(); However, I couldn't get the value on client Selected event.

var item = $(e.item); item.text(); //works item.val(); //returns empty string.

[Ken Lewis]

Hi,

Georgi Krustev wrote:
"The first error which you post in most cases is related with missing "System.Linq" namespace in the web.config or something with the passed collection as Model."

I'm getting the same CS1593 error mentioned above and I think my Model is the culprit. Could you say more about what kind of problems with the passed model collection could cause this?

Thanks!

Ken

[Georgi Krustev]

Hello Ken Lewis,

In general the aforementioned exception can be thrown for most of the compilation error occurred into the action context.  In other words if a compilation error occurs somewhere into the context of the action methods a common exception will be thrown. This exception in this case does not show the core of the problem. Unfortunately regarding this explanation the only reasonable way to figure out where the problem could be is to debug.

Regards,
Georgi Krustev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[CsHARPMan]

What is the best way to have TreeView bind to sitemap and create my own templates instead of overwriting css styles?