Add custom attributes

[Edwin]

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

[Peter]

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

[Edwin]

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

[Peter]

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

[Edwin]

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

[Peter]

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

[Edwin]

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

[Edwin]

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