Add custom attributes

8 posts, 0 answers
  1. Edwin
    Edwin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 13 Jul 2010 Link to this post

    I have a problem with adding custom attributes to menuitems. They can be added in code behind (I have tested the attribute count and contents) but do not show up in the html markup client-side. Custom CSS classes are added without a problem.

    I have tried two ways of adding custom attributes to the menuitems
    -databinding
    -manual build of the menu

    In the attached file I have added an aspx page with code to illustrate the issue.

    http://www.cipsoftware.nl/downloads/telerik%20menutest%202010-07-13.zip

    Did I forget a property or setting?

    Additional info: I am using version 2010 q2 beta build 623 but I have the same problem with version 2009 q3 1314 and al versions in between.

    Kind regards,

    Edwin Dirkzwager
    CIP Software BV
    The Netherlands
  2.
  3. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 14 Jul 2010 Link to this post

    Hello Edwin,

    You should add custom attributes like this:
    protected void Page_Load(object sender, EventArgs e)
       {
           BuildMenu2();
       }
       private void BuildMenu2()
       {
           RadMenuItem rootitem;
           RadMenuItem subitem;
           rootitem = new RadMenuItem("rootitem");
           rootitem.Value = "rootitem";
           rootitem.CssClass = "tooltip";
           rootitem.Attributes["ttip"] = "test";
           subitem = new RadMenuItem("subitem");
           subitem.Value = "subitem";
           subitem.CssClass = "tooltip";
           subitem.Attributes["ttip"] = "test";
           rootitem.Items.Add(subitem);
           mnuCustomers2.Items.Add(rootitem);
       }

    If you review the source of the rendered page, you will find the custom attributes in the following javascript section:
    <script type="text/javascript"> 
    //<![CDATA[
    Sys.Application.add_init(function() {
        $create(Telerik.Web.UI.RadMenu, {"_childListElementCssClass":null,"_skin":"Default","clientStateFieldID":"mnuCustomers2_ClientState","collapseAnimation":"{\"duration\":450}","expandAnimation":"{\"duration\":450}","itemData":[{"attributes":{"ttip":"test"},"items":[{"attributes":{"ttip":"test"},"value":"subitem","cssClass":"tooltip"}],"value":"rootitem","cssClass":"tooltip"}]}, {"itemClicking":OnClientItemClicking}, null, $get("mnuCustomers2"));
    });
    //]]>
    </script>

    You can also verify that the custom attributes have been successfully saved with the following code:
    <script type="text/javascript">
           function OnClientItemClicking(sender, eventArgs) {
               alert(eventArgs.get_item().get_attributes().getAttribute("ttip"));
           }
       </script>
       <telerik:RadMenu ID="mnuCustomers2" runat="server" OnClientItemClicking="OnClientItemClicking">
       </telerik:RadMenu>



    Kind regards,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Edwin
    Edwin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 15 Jul 2010 Link to this post

    Hello Peter,

    The attributes do appear in the javascript code, however this is not the same as for example RadGrid. If I add an attribute to a data row or cell it automatically appears in the html code.

    <TD class=tooltipleft jQuery1279177529572="132" ttip='tooltiptext' tOpacity="1"></TD>
    or
    <TR id=ctl00_cp_gdTasks_ctl00__1 class=rgAltRow inv="" aist="0" ais="" ai="" rj="1" st="0" cid="3"></TR>

    I use a jquery plugin to generate the tooltips and it works great for the grid. But it does need the attributes to be in the html code (either served by the IIS server or added via javascript).

    Also, Attributes["name"] and Attributes.Add("name", "value"); both result in the same javascript but no rendered html.

    Is this correct?

    Kind regards

    Edwin Dirkzwager
    CIP Software BV
  7. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Jul 2010 Link to this post

    Hello Edwin,


    This is by design - custom attributes should not render as html for the menu items. If you need to set a tooltip, you can simply set the  RadMenuItem's ToolTip property - e.Item.ToolTip = tooltip; Please, let me know if there is any reason why you cannot use the ToolTip property for your case.

    Other than that, your observations are correct.


    All the best,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. Edwin
    Edwin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 15 Jul 2010 Link to this post

    Hello Peter,

    That is unfortunate.

    In most cases we need to style the tooltip with additional HTML. The built in tooltip functionality does not support this and display's the html as plain text. I have attached a screenshot with the result of HTML in de standard tooltip property of a RadMenuItem

    Kind regards,

    Edwin Dirkzwager
    CIP Software BV
  11. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 15 Jul 2010 Link to this post


    In that case, I suggest you use RadToolTip. For example, consider the RadToolTip for RadTreeView demo. You can use similar approach with RadMenu as well. Let me know what you think.


    Greetings,
    Peter
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Edwin
    Edwin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 15 Jul 2010 Link to this post

    Hello Peter,

    The example you provided works and is a nice workaround.

    However, this wil increase the payload with aproximatly 100kB mostly due to additional javascript(80kB) but also a hefty 30kB for CSS.

    The tooltip plugin we are using now is much more lightweight (5kb js and a few hundred bytes CSS). A few (10-20) kB's would not have been an issue but this is a bit to much for our requirements :)

    I will try to work around this issue but perhaps it would be nice to provide some option to reduce the payload in a future version. For example:
    • AjaxRequired -> false -> remove the unnecessary js and CSS

    Kind regards,

    Edwin Dirkzwager
    CIP Software BV

  14.
  15. Edwin
    Edwin avatar
    12 posts
    Member since:
    Mar 2008

    Posted 16 Jul 2010 Link to this post

    I have found a working solution for obtaining the attributes of a radmenu if you do not want or cannot use the built-in tooltip functionality or RadTooltip and are using the jquery.tooltip plugin

    $(document).ready(function() {
        $("A.tooltip").tooltip({
            bodyHandler: function() {
                var ttip = $(this).context.parentElement._item.get_attributes().getAttribute("ttip");
                if (!ttip)
                    ttip = '';
                return ttip;
            },
            showURL: false
        });
    });

    This is more complex then the code needed when you create tooltips for RadGrid

    $(document).ready(function() {
        $("A.tooltip").tooltip({
            bodyHandler: function() { return $($(this).attr("ttip")).html();},
            showURL: false
        });
    });

    I hope this helps anyone who requires this type of solution

    Kind regards

    Edwin Dirkzwager
    CIP Software BV
Back to Top