RadToolbarButton attributes in html

[cheburek]

Hi!

I am looking for a way to add custom attributes to RadToolbarButton to be rendered in html

When I use following snippet

RadToolBarButton button = new RadToolBarButton();
button.Attributes["data-attr"] = "CustomText";
button.CssClass += "tipsylink";


I expect to see 
<a class="tipsylnk ..." data-attr="CustomText"...>


But unfortunately I can see only 
<a class="tipsylnk rtbWrap"...>
 without data-attr attribute.

I do use jquery to read such attributes from web controls for my custom needs. 
And that works for all standard asp.net controls but unfortunately 
radtoolbar implementation is different - as I understand it stores 
custom attributes in another place.

I know that it is possible to read such attributes on client side using

var toolBar = $find("<%=RadToolBar1.ClientID %>");
var button = toolBar.findItemByText("Button 1");
alert(button.get_attributes().getAttribute("DisplayName"));


but actually I'd like to use standard jquery $('.tipsylnk'). selector 

and process all items in the same way.

So is it possible to render custom attributes to html element attribute 

for RadToolbarButtons?

[Richard]

cheburek:

I am able to add the custom attribute to a toolbar button added in server side script. And, then, I can access the newly added attribute in order to immediately display the new value on a label. But, as you note, it does not get added to the HTML markup. See the attached image ("RadToolBarIssue.png") of the updated page in Firefox using Firebug.

   protected void btnAddButton_Click(object sender, EventArgs e)
   {
       RadToolBarButton newButton = new RadToolBarButton("Added Server-Side");
       //newButton.Attributes["data-attr"] = "CustomText";
       newButton.Attributes.Add("data-attr", "CustomText");
       lblInfo.Text = newButton.Attributes["data-attr"].ToString();
...

Does it have to be added in the rendered markup for your purposes? Or, can you access it server-side after adding it? I have not been able to locate the newly added attribute in the DOM of the rendered page. But, there should be a way to add it programmically. I'm investigating further.

Cheers!

[Syed]

Hi Cheburek,

I am facing a similar issue like yours. I would be glad if you could mention here what was your solution to the problem.

Thanks,
Syed.

[Peter Milchev]

Hello Guys,

The attributes set server-side to the items are available only in the client-side object of the items and not as DOM element attributes. 

In order to apply them as DOM attributes also, you can use the OnClientLoad of the Toolbar to add them with JavaScript:

RadToolBarButton newButton = new RadToolBarButton("Applied HTML attributes");
newButton.Attributes.Add("data-attr", "attributevalue");

<telerik:RadToolBar RenderMode="Lightweight" ID="RadToolBar1" OnClientLoad="OnClientLoad" runat="server">

<script>
    function OnClientLoad(sender, args) {
        var allItems = sender.get_allItems();

        for (var i = 0; i < allItems.length; i++) {
            var item = allItems[i];
            var attr = item.get_attributes().getAttribute("data-attr");

            if (attr) {
                $telerik.$(item.get_element()).attr("custom-attr", attr);
            }
        }

        console.log($telerik.$("[custom-attr]"));
    }
</script>

Regards,
Peter Milchev
Progress Telerik