This is a migrated thread and some comments may be shown as answers.

Using custom TreeViewItem fields in template

3 Answers 509 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 18 Jun 2013, 01:30 PM
Hi,

I currently am using the MVC wrapper extensions to create a TreeView from my models. I would like to pass some data from the model to the template so that I can display it alongside the text upon click.
Here is my TreeView:
@(Html.Kendo().TreeView()
    .Name("s-list-event-container")
    .HtmlAttributes(new { @class = "s-list-container", style = "color: white" })
    .Events(events => events
        .Select("preventSelect")
    )
    .TemplateId("template-list-event")
    .BindTo(Model.ToList(), mapping => mapping
        .For<ArdentMC.Sentry.Data.Event>(binding => binding
            .Children(e => e.EventObjects)
                .ItemDataBound((item, e) =>
                {
                    item.Id = e.EventID.ToString();
                    item.Text = e.Name;
                    // Here's where I'd like to add a description. The line below runs but appears to do nothing.
                    item.HtmlAttributes.Add("data-description", e.Description);
                })
        )
        .For<ArdentMC.Sentry.Data.EventObject>(binding => binding
            .Children(o => o.EventObjects)
                .ItemDataBound((item, o) =>
                {
                    item.Id = o.EventObjectID.ToString();
                    item.Text = o.Name;
                })
        )
    )
)
Thanks for any help,
Jeff

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 20 Jun 2013, 11:34 AM
Hello Jeff,

 I tried exactly what you tried and the html attributes are added exactly as expected.

However keep in mind this HTML attributes are added to the LI element.

for example the following:

<%=
    Html.Kendo().TreeView()
        .Name("treeview-right")
        .BindTo((IEnumerable<CategoryItem>)ViewBag.inline, (NavigationBindingFactory<TreeViewItem> mappings) =>
        {
            mappings.For<CategoryItem>(binding => binding.ItemDataBound((item, category) =>
                {
                    item.Text = category.CategoryName;
                })
                .Children(category => category.SubCategories));
             
            mappings.For<SubCategoryItem>(binding => binding.ItemDataBound((item, subCategory) =>
            {
                item.Text = subCategory.SubCategoryName;
                item.HtmlAttributes["data-TEST"] = subCategory.SubCategoryName + DateTime.Now.Ticks;
            }));
        })
%>

Will produce the following html markup:
<li class="k-item k-last" data-test="Foo635073353040190416" data-uid="5f846b17-fa6b-4b62-bc4e-cdc35a3eebd6"
    role="treeitem">
    <div class="k-bot">
        <span class="k-in">Floor</span></div>
</li>

You can test the same with the MVC Wrapper demos.

If this is not working for some reason on your side please send a small project that we can run so we can further debug and investigate whats behind this.Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jeff
Top achievements
Rank 1
answered on 20 Jun 2013, 01:08 PM
How can I access these properties in the template though? I need to do something like this:
<div>${item.customAttribute}</div>
<!-- Need to be able to access customAttribute, even if it's an HtmlAttribute -->
Thanks,
Jeff
0
Petur Subev
Telerik team
answered on 24 Jun 2013, 10:06 AM
Hello Jeff,

I am afraid it is not possible to access these html attributes inside of the template.

Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TreeView
Asked by
Jeff
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or