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

[Hugo Augusto]

This important information and the example from Mark, should be present in the documentation. It's not clear that attributes will not be rendered in the node HTML.

[Rumen]

Hi Hugo,

Thank you for your feedback!

Please examine the following documentation section dedicated to defining custom attributes in RadTreeView and share your feedback what is missing or needs to be updated:

• Custom Attributes Overview
• Using Custom Attributes Declaratively
• Using Custom Attributes Server-side
• Using Custom Attributes Client-side

All of the articles above share the following infobox: The custom attribute's name should not be an HTML reserved word. Please see this article for more information.

The https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/troubleshooting/custom-attributes article explains that by design all custom attributes which are valid HTML attributes (such as "type", "onclick" etc) are rendered as HTML attributes and are not serialized in the attributes collection. 
If this is not enough as an explanation or not clear enough I can update it.

[Hugo Augusto]

Hi

The information that custom attributes are not rendered in html is not present anywhere. In my opinion, it should be present on this page:
https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/custom-attributes/using-custom-attributes-at-the-client

Also, the Custom Attributes article at https://docs.telerik.com/devtools/aspnet-ajax/controls/treeview/troubleshooting/custom-attributes, is deceiving since it states "custom attributes which are valid html attributes...are rendered as html attributes..." and this is not true, since they are not rendered into the HTML. That's why it's necessary to use JS to access attributes.

Still maintain my first opinion that this information should be clearly indicated in documentation.

[Rumen]

Thank you for your suggestions! I updated the causion box in the Using Custom Attributes Client-side article to explain that the custom attributes are added to the node object attributes collection, but not to the HTML element of the node. 

I also tested the treeview with some of the valid HTML attributes like URL and dir listed in the Custom Attributes article and verified that they are indeed added to the HTML markup of the node: 

[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