Render Custom Attributes to Output

[Mark Kucera]

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?

Thanks!
-Mark

[Boyan Dimitrov]

Hello,

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.

Regards,
Boyan Dimitrov
Telerik

[Mark Kucera]

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:

HTML:

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

JavaScript:

<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" }');
    }
}
//-->
</script>

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

Thanks for the pointers and the excellent help!
-Mark