RadToolbarButton attributes in html

4 posts, 0 answers
  1. cheburek
    cheburek avatar
    25 posts
    Member since:
    May 2009

    Posted 28 Dec 2011 Link to this post

    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

    But unfortunately I can see only
    <a class="tipsylnk rtbWrap"...>
    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 $(''). selector
    and process all items in the same way.
    So is it possible to render custom attributes to html element attribute
    for RadToolbarButtons?
  2. Richard
    Richard avatar
    479 posts
    Member since:
    Nov 2011

    Posted 28 Dec 2011 Link to this post

    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!
  3. Syed
    Syed avatar
    4 posts
    Member since:
    Apr 2013

    Posted 29 Apr 2013 Link to this post

    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.
  4. Peter Milchev
    Admin
    Peter Milchev avatar
    654 posts

    Posted 21 Oct 2019 Link to this post

    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.
Back to Top