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

Render Custom Attributes to Output

2 Answers 136 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Mark Kucera
Top achievements
Rank 1
Mark Kucera asked on 27 Dec 2013, 10:38 PM
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

2 Answers, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 02 Jan 2014, 12:11 PM
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
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.
Hugo Augusto
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 07 Jun 2023, 09:26 PM

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
Telerik team
commented on 12 Jun 2023, 01:29 PM

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:

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
Top achievements
Rank 2
Iron
Veteran
Iron
commented on 15 Jun 2023, 10:59 AM

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
Telerik team
commented on 16 Jun 2023, 09:57 AM

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: 

1
Mark Kucera
Top achievements
Rank 1
answered on 02 Jan 2014, 03:23 PM
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
Tags
TreeView
Asked by
Mark Kucera
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Mark Kucera
Top achievements
Rank 1
Share this question
or