Render Custom Attributes to Output

3 posts, 0 answers
  1. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 27 Dec 2013 Link to this post

    Hello,  i'm trying to render some custom attributes into a RadTreeNode and actually have them appear in the rendered output.  I've tried adding them in the NodeDataBound event using a method like this:

    protected void rdTreeUpdateProfileActionEventList_NodeDataBound(object sender, RadTreeNodeEventArgs e)
        e.Node.Attributes.Add("data-toggle", "tooltip");
        e.Node.Attributes.Add("data-placement", "right");
        e.Node.Attributes.Add("data-trigger", "hover");

    but this doesn't actually work the way i'd expect.  Using the code above, i can see that my 3 custom attributes are persisted in some Javascript code:

    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadTreeView, {"_postBackOnClick":true,"_postBackOnExpand":true,"_postBackReference":"__doPostBack(\u0027ctl00$leftContentArea$wucUpdateProfileActionTree1$rdTreeUpdateProfileActionEventList\u0027,\u0027arguments\u0027)","_skin":"Web20","_uniqueId":"ctl00$leftContentArea$wucUpdateProfileActionTree1$rdTreeUpdateProfileActionEventList","attributes":{},"clientStateFieldID":"ctl00_leftContentArea_wucUpdateProfileActionTree1_rdTreeUpdateProfileActionEventList_ClientState","collapseAnimation":"{\"duration\":200}","enableDragAndDrop":true,"expandAnimation":"{\"duration\":200}","nodeData":[{"value":"-1","expandMode":2,"cssClass":"TrashFolderNode","selectedCssClass":"SelectedTrashFolderNode","hoveredCssClass":"HoverTrashFolderNode","selectedImageUrl":"/Assets/images/icon_trash_hover.png","hoveredImageUrl":"/Assets/images/icon_trash_hover.png","category":"-1","toolTip":"Expand to see all of the update profile action events in this folder.","attributes":{"data-toggle":"tooltip","data-placement":"right","data-trigger":"hover"}},{"value":"7","expandMode":2,"cssClass":"FolderNode","selectedCssClass":"SelectedFolderNode","hoveredCssClass":"HoverFolderNode","selectedImageUrl":"/Assets/images/icon_folder_hover.png","hoveredImageUrl":"/Assets/images/icon_folder_hover.png","category":"0","toolTip":"Expand to see all of the update profile action events in this folder.","attributes":{"data-toggle":"tooltip","data-placement":"right","data-trigger":"hover"}},{"value":"1","expandMode":2,"cssClass":"FolderNode","selectedCssClass":"SelectedFolderNode","hoveredCssClass":"HoverFolderNode","selectedImageUrl":"/Assets/images/icon_folder_hover.png","hoveredImageUrl":"/Assets/images/icon_folder_hover.png","category":"0","toolTip":"Expand to see all of the update profile action events in this folder.","attributes":{"data-toggle":"tooltip","data-placement":"right","data-trigger":"hover"}}]}, {"nodeDragging":nodeDragging}, null, $get("ctl00_leftContentArea_wucUpdateProfileActionTree1_rdTreeUpdateProfileActionEventList"));
    so i guess this would be persisted on the server side if i needed to access this information, but what i'd really like is to have these values written out into the node itself, similar to how the "tooltip" attribute writes out a title attribute
    current output:
    <span title="Expand to see all of the events in this folder." class="rtIn FolderNode">Main</span>

    desired output:
    <span title="Expand to see all of the events in this folder." class="rtIn FolderNode" data-toggle="tooltip" data-placement="right" data-trigger="hover">Main</span>

    Is there any way to accomplish this?


  2. Boyan Dimitrov
    Boyan Dimitrov avatar
    1746 posts

    Posted 02 Jan 2014 Link to this post


    Thank you for contacting Telerik Support.

    I would like to apologize for the delayed response.

    Please note that all attributes added in NodeDataBound event handler are persisted on the client-side in the node object attributes collection but they are not rendered to HTML element.
    An easy and convenient way to render those attribute values to the associated span element would be to add those attributes to the span DOM element. You can retrieve the node's DOM element by simply using the built-in node client-side method "get_element()" as explained in this help article. The following help article describes how you can add an attribute to a DOM element.

    Please note that I will suggest iterating through all RadTreeView node client-side objects on page load and add their "data-" attributes to the associated DOM element. Here you may see how you can access the RadTreeView client-side object and access its node objects.

    Hope that this will be helpful.

    Boyan Dimitrov
    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 RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 02 Jan 2014 Link to this post

    This is perfect!  Thanks so much.  i was able to get this working in almost no time at all with this information.  For anyone else who might stumble upon this, my final result looks like this:

    <telerik:RadTreeView ID="rtMailingList" runat="server" OnClientLoad="FixNodeToolTips">

    <script type="text/javascript" language="JavaScript">
    function FixNodeToolTips(sender, eventArgs) {
        var tree = $find(sender.get_id());
        var nodes = tree.get_allNodes();
        for (var i = 0; i < nodes.length; i++) {
            nodes[i].get_textElement().setAttribute("data-toggle", "tooltip");
            nodes[i].get_textElement().setAttribute("data-placement", "top");
            nodes[i].get_textElement().setAttribute("data-trigger", "hover");
            nodes[i].get_textElement().setAttribute("data-delay", '{ "show": "700", "hide": "100" }');

    The attached image displays how this appears to end-users.

    Thanks for the pointers and the excellent help!
Back to Top