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

RadToolbarButton attributes in html

3 Answers 98 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
cheburek
Top achievements
Rank 1
cheburek asked on 28 Dec 2011, 12:58 PM

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?

3 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 28 Dec 2011, 05:30 PM
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!
0
Syed
Top achievements
Rank 1
answered on 29 Apr 2013, 06:38 PM
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.
0
Peter Milchev
Telerik team
answered on 21 Oct 2019, 01:55 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ToolBar
Asked by
cheburek
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Syed
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or