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

[Solved] Adding custom attributes to TreeViewItem

9 Answers 306 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Travis
Top achievements
Rank 1
Travis asked on 15 Sep 2011, 11:00 PM
I'm creating a list of TreeViewItems in my controller.  Is there any way to add custom attributes to my TreeViewItems that will be accessible via jquery?  I was looking at the .Content property, but its type is an Action and that kind of confused me.  What is this and how do I set it from code, i.e. in my controller.

9 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 16 Sep 2011, 09:13 AM
Hello Travis,

If the TreeView items are declared explicitly, you can use HtmlAttributes:

item.Add().Text("item text").HtmlAttributes(new { customAttr = "customValue" })

Note that this will generate invalid HTML markup unless you use HTML5 custom data attributes.

http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes

If the items are retrieved from a Model, you can use ItemDataBound, as shown in the following demo:

http://demos.telerik.com/aspnet-mvc/treeview/databindingtomodel?theme=forest

Greetings,
Dimo
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
0
Travis
Top achievements
Rank 1
answered on 19 Sep 2011, 03:46 PM
That looks like razor syntax.  I'm adding treeviewitems in my controller like this:

TreeViewItem t1 = new TreeViewItem();
t1.Text = "my node";
t1.Value = "node value"
t1.HtmlAttributes.Add("customattr","custom value");

The HtmlAttribute "customattr" does not appear in firebug.  I also tried doing a jquery select on "customattr" attribute with no results.
0
Dimo
Telerik team
answered on 20 Sep 2011, 10:07 AM
Hi Travis,

I am not sure what your implementation is, but the following works as expected and the custom attributes are rendered:

Controller

public ActionResult TreeView()
{
    ViewBag.TreeViewItems = Enumerable.Range(1, 10).Select(i =>
    {
        var item = new TreeViewItem { Text = "my node", Value = "node value" };
        item.HtmlAttributes.Add("customattr", "custom value");
        return item;
    });
 
    return View();
}

Master

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
 
<!DOCTYPE html>
<html>
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css")) %>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
<body>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %></body>
</html>

View

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Simple.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Telerik.Web.Mvc.Extensions" %>
<asp:Content ID="title" ContentPlaceHolderID="TitleContent" runat="server">
    TreeView
</asp:Content>
<asp:Content ID="styles" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<%=
 
    Html.Telerik().TreeView()
        .Name("TreeView1")
        .BindTo((IEnumerable<TreeViewItem>)ViewBag.TreeViewItems, (item, data) => {
            item.Text = data.Text;
            item.Value = data.Value;
            item.HtmlAttributes.Merge(data.HtmlAttributes);
        })
%>
</asp:Content>

Alternative View

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Simple.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Telerik.Web.Mvc.Extensions" %>
<asp:Content ID="title" ContentPlaceHolderID="TitleContent" runat="server">
    TreeView
</asp:Content>
<asp:Content ID="styles" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="aboutContent" ContentPlaceHolderID="MainContent" runat="server">
<%=
 
    Html.Telerik().TreeView()
        .Name("TreeView1")
        .Items(i => ((IEnumerable<TreeViewItem>)ViewBag.TreeViewItems).Each(item => i.Add().Text(item.Text)))
%>
</asp:Content>


All the best,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Travis
Top achievements
Rank 1
answered on 20 Sep 2011, 03:42 PM
TreeViewHtmlAttr.zip
I've attached my sample project which doesn't work for me.
0
Dimo
Telerik team
answered on 21 Sep 2011, 06:08 AM
Hi Travis,

You should also set HtmlAttributes in the View, similarly to the Text:

.Items(i => ((IEnumerable<TreeViewItem>)ViewBag.TreeViewItems).Each(item => i.Add().Text(item.Text).HtmlAttributes(item.HtmlAttributes)))

Greetings,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Travis
Top achievements
Rank 1
answered on 21 Sep 2011, 04:16 PM
Ok, that works.  How do I do that though when using ajax binding:

.DataBinding(dataBinding => dataBinding
        .Ajax().Select("_SelectNodes", "MyController"))
0
Dimo
Telerik team
answered on 22 Sep 2011, 07:32 AM
Hi Travis,

I am afraid that passing custom attributes is not supported with Ajax binding, because they are not serialized. Sorry for any inconvenience caused.

Kind regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
JulioValiente
Top achievements
Rank 1
answered on 04 Mar 2012, 01:24 AM
How about Adding template to treeviewitem? is it also supported? and how will I do that?
0
Amrut
Top achievements
Rank 1
answered on 01 Nov 2012, 03:32 PM
How can I add html attributes to tree node  in client side bindings.
something like this

function onDataBinding(e) {
    var treeview = $('#NewTreeView').data('tTreeView'); 
    var jsonObject = [
            { Text: "Product 1", Expanded: true,
                HtmlAttributes: [{'data-url': '/google/id=90'},
{'data-id':'BAF7A535-6484-4E27-B690-17AD39E67441'}],



                Items: [
                  { Text: "Product 1.1" },
                  { Text: "Product 1.2" },
                  { Text: "Product 1.3" },
                  { Text: "Other products", LoadOnDemand: true, Value: "other" }
              ]
            },
        ];
        treeview.bindTo(jsonObject);
}

and how can I get added data in OnSelect node event
like 
function onSelect(e) {
    var nodeData = e.data();
}
the treeview in cshtml

@(Html.Telerik().TreeView()
        .Name("NewTreeView")
        .ClientEvents(events => events
            .OnDataBinding("onDataBinding")
                .OnSelect("onSelect")
        )
)

Thanks,


Amrut Kulkarni
Tags
TreeView
Asked by
Travis
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Travis
Top achievements
Rank 1
JulioValiente
Top achievements
Rank 1
Amrut
Top achievements
Rank 1
Share this question
or