Templates when binding to a hierarchical model

[Scott]

I'm looking for an example of how to use a template when binding to a hierarchical model.  I'm able to sucessfully bind a treeview using the binding to model example shown in the demos however I can't seem to figure out how to use a template like what is shown in the templates example.  Are there any good examples out there on how to accomplish this?

[raphael]

Hi scott,

I don't know if this is what you are looking for. I used my treeview to show my menu elements:

here you have my simplified model.

public class MenuModel
   {
       public int MenuId { get; set; }
       public int? ParentId { get; set; }
       public string Name { get; set; }
       public List<MenuModel> Children { get; set; }
   }

on my controller I just send back to the view my menu graph with his children element

Root
        Child level 1
               Child level 2
                    ...... child level n

in my view I simply bind the treeview like that

    @(Html.Telerik().TreeView()
        .Name("TreeView")
        .BindTo(Model, mappings =>
        {
            mappings.For<MenuModel>(binding => binding
                    .ItemDataBound((item, menu) =>
                    {
                        item.Text = menu.Name;
                        item.Value = menu.MenuId.ToString();
                        item.Expanded = true;
                    })
                    .Children(m => m.Children));
        })
)

in this way I got the entire  hierarchical model in my treeview.

Hope this help you.

Raphael

[Daniel]

Hi,

In order to use a template for the item you should set an action which to render the HTML to the TreeViewItem Content property. For example:

Html.Telerik().TreeView()
        .Name("TreeView")
        .BindTo(Model, mappings =>
        {
            mappings.For<Category>(binding => binding
                    .ItemDataBound((item, category) =>
                    {
                        item.Text = category.CategoryName;
                        item.Content = () => { Html.RenderPartial("ItemTemplate", category); };
                    });

        }).Render();

Kind regards,
Daniel
the Telerik team

[Scott]

I actually ended up getting what I wanted by using a string of HTML for the text and setting the encoding to false like the following.

@{Html.Telerik().TreeView()
        .Name("MyTreeView")
        .BindTo(Model.ItemCollection, mappings =>
        {
            mappings.For<MyHierarchicalModel>(binding => binding
                    .ItemDataBound((item, myItem) =>
                    {
                        item.Text = string.Format("<strong>{0}</strong>", myItem.Description);
                        item.Encoded = false;
                        item.Value = myItem.ItemId.ToString();
                        item.ImageUrl = myItem.IconUrl;
                        item.Expanded = true;
                    })
                    .Children(myItemChild => myItemChild.ItemCollection));
        }).Render();
}

My hierarcchical model has a child item collection like raphael's so would that solution account for that as well?  Also does it make a call to the server to load the partial view for each item?

[Daniel]

Hi Scott,

If the item has children then you should use your current approach. Using the Content to set the template will override any children.
Regarding your other question - a request is not made when using the Content property. The template is generated by calling the Action that writes the HTML.


Regards,
Daniel
the Telerik team

[Scott]

Good to know, thanks.