How to use image sprites with RadMenuItem ImageUrl

[Tom]

I assign static images to RadMenuItems via the ImageUrl property, and now would like to use image sprites instead.

Because I could not find a way to do this, I next tried to configure each RadMenuItem by setting the Text value " " and a CssClass with an appropriate background image in the code behind Page_Load. But I would like to change the class on the client side, and cannot figure out how to do that. Besides, this seems like a pretty messy kludge.

What is the recommended way forward?

 

 

Resources

Current functioning RadMenu can be found in the upper right corner of this site: https://an.rsl.wustl.edu/msl/mslbrowser  -- It's the Account / Cart / Help menu.

Here is what I was trying with the CssClass approach. The RadMenu declaration on the client side:

 

<div>
  <telerik:RadAjaxManager runat="server" ID="ram"></telerik:RadAjaxManager>
  <telerik:RadScriptManager runat="server" ID="rsm"></telerik:RadScriptManager>
  <asp:PlaceHolder runat="server" ID="phTop"></asp:PlaceHolder>
  <br />
  <asp:Button runat="server" ID="bTest" Text="Test" OnClick="bTest_Click" />
  <br />
  <telerik:RadButton runat="server" ID="rbTest2" OnClientClicked="setCartIconFull" AutoPostBack="False"></telerik:RadButton>
  <asp:PlaceHolder runat="server" ID="phBottom"></asp:PlaceHolder>

  <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
  <telerik:RadTabStrip runat="server" ID="rts">
    <Tabs>
      <telerik:RadTab runat="server" Text="Mission" Value="rtMiss"></telerik:RadTab>
      <telerik:RadTab runat="server" Text="<span class='i-s-nav-n-s16Sol vaMid'></span> Sol" Selected="True"></telerik:RadTab>
      <telerik:RadTab runat="server" Text="<span class='i-s-nav-n-s16maps vaMid'></span> Maps"></telerik:RadTab>
    </Tabs>
  </telerik:RadTabStrip>


  <asp:Label runat="server" ID="l1" CssClass="is-nav-16-CC"></asp:Label>
  <asp:Label runat="server" ID="l2" CssClass="is-nav-16-CCw"></asp:Label>
  <asp:Label runat="server" ID="l3"></asp:Label>
  <span class="is-nav-16-CC" style="height: 16px; width: 16px;"></span>
</div>
<img src="i/n/s16null.png" />
<asp:ImageButton runat="server" ID="ibTest" CssClass="is-nav-32-cartMenuEmpty" Width="70" Height="32" />
<div>
  <telerik:RadMenu runat="server" ID="rmTest" ClickToOpen="True" Height="40" Width="505"
    EnableShadows="True" Style="z-index: 2900">
    <Items>
      <telerik:RadMenuItem runat="server" Value="rmiBarAccount">
        <GroupSettings OffsetX="0" OffsetY="4"></GroupSettings>
        <Items>
        </Items>
      </telerik:RadMenuItem>
      <telerik:RadMenuItem runat="server" Value="rmiBarHelp" Text=" ">
        <GroupSettings OffsetX="0" OffsetY="4"></GroupSettings>
        <Items>
        </Items>
      </telerik:RadMenuItem>
      <telerik:RadMenuItem runat="server" Value="rmiBarCart" Text=" ">
        <GroupSettings OffsetX="0" OffsetY="4"></GroupSettings>
        <Items>
        </Items>
      </telerik:RadMenuItem>
      <telerik:RadMenuItem runat="server" Value="rmiBarNon" Text=" ">
        <GroupSettings OffsetX="0" OffsetY="4"></GroupSettings>
        <Items>
        </Items>
      </telerik:RadMenuItem>
    </Items>
  </telerik:RadMenu>
</div>

 

 

The code behind configuration:​

 

RadMenuItem rmiAcct = rmTest.FindItemByValue("rmiBarAccount");
rmiAcct.Text = " ";
rmiAcct.CssClass = "is-nav-32-accountMenuSignedOut-rmi";

RadMenuItem rmiCart = rmTest.FindItemByValue("rmiBarCart");
rmiCart.Text = " ";
rmiCart.CssClass = "is-nav-32-cartMenuEmpty-rmi";


RadMenuItem rmiHelp = rmTest.FindItemByValue("rmiBarHelp");
rmiHelp.Text = " ";
rmiHelp.CssClass = "is-nav-32-ucMenuHelp-rmi";

 

 

 My CSS classes (using sprites):

.is-nav-32-accountMenuSignedIn-rmi .rmText {
  width: 128px;
  height: 32px;
  background: url('../i/s/_nav32Sprite.png') -1px -1px;
  width: 112px   /* correct for goofy RadMenu*/
  height: 31px;  /* correct for goofy RadMenu*/ }

.is-nav-32-accountMenuSignedOut-rmi .rmText {
  width: 128px;
  height: 32px;
  background: url('../i/s/_nav32Sprite.png') -130px -1px;
  width: 112px;  /* correct for goofy RadMenu*/
  height: 31px;  /* correct for goofy RadMenu*/
}

.is-nav-32-cartMenuEmpty-rmi .rmText {
  width: 70px;
  height: 32px;
  background: url('../i/s/_nav32Sprite.png') -325px -1px;
  width: 54px;  /* correct for goofy RadMenu*/
  height: 31px;  /* correct for goofy RadMenu*/
}

.is-nav-32-cartMenuFull-rmi .rmText {
  width: 70px;
  height: 32px;
  background: url('../i/s/_nav32Sprite.png') -396px -1px;
  width: 54px;  /* correct for goofy RadMenu*/
  height: 31px;  /* correct for goofy RadMenu*/
}

.is-nav-32-ucMenuHelp-rmi .rmText {
  width: 55px;
  height: 32px;
  background: url('../i/s/_nav32Sprite.png') -1554px -1px;
  width: 39px;  /* correct for goofy RadMenu*/
  height: 31px;  /* correct for goofy RadMenu*/
}

div.RadMenu .rmLink {
  padding: 0;
}

 

The sprite image is attached.

 

[Magdalena]

Hello Tom,

Thank you for contacting Telerik support.

If you set the property the EnableImageSprites property to true, the RadMenu will render sprite elements rmLeftImage to each item. You can also set this property only to an exact item. The default size of that element is set by our inbuilt styles to 16x16 pixels. If you would like to change the size of a sprite image, you can apply it by the following:

html .RadMenu span.rmLeftImage {
    width: ...;
    height: ...;
}

Further you can set a custom CSS class to any item by the property CssClass. This class name can be used in a selector for defining background position for exact icon.

aspx:

<telerik:RadMenu runat="server" EnableImageSprites="true">
    <Items>
        <telerik:RadMenuItem Text="Item" CssClass="icon1" />
        <telerik:RadMenuItem Text="Item" CssClass="icon2" />
    </Items>
</telerik:RadMenu>

CSS:

.rmLeftImage {
    background-image: url( ... );
}

.icon1 {
    background-position: ... ;
}

.icon2 {
    background-position: ... ;
}

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Tom]

Thanks for the quick reply, Magdalena.

A question remains: how do I change the RadMenuItem CssClass on the client side?

Scenario: I want the cart icon to reflect an empty or full cart. In the past I would change the ImageUrl on the client side. Now I want to change the CssClass.

Javascript:

function setCartIconFull() {
  var menu = $find("<%= rmTest.ClientID %>");
  var item = menu.findItemByValue("rmiBarUser");
  item.className = "isTest2";  // this doesn't change the cssClass
  item.CssClass = "isTest2";  // this doesn't work either
  //item.set_imageUrl("i/n/cartMenuFull.png");  // what I used to do
}

[Magdalena]

Hello Tom,

The method .findItemByValue("rmiBarUser") returns RadMenu item object, not a DOM element, so it has no .className property. A DOM element of an item can be accessed by the get_element() method. As Radmenu items DOM elements has also inbuilt CSS classes, we recommend to use jQuery .addClass() method instead of the .cssClass property:

function setCartIconFull() {
    var menu = $find("<%= rmTest.ClientID %>");
    var item = menu.findItemByValue("rmiBarAccount");
    $telerik.$(item.get_element()).addClass("isTest2");
}

We have noticed that there is no item with the "rmiBarUser" value in the markup that you provided in the first thread, so we give you this example with "rmiBarAccount" value.

Regards,
Magdalena
Telerik

 

 

[Tom]

Perfect. That does the trick, Magdalena. I made a slight tweak to remove the existing class and then add the new class (first a removeClass call, then the addClass call.

function setCartIconFull() {
  var menu = $find("<%= rmTest.ClientID %>");
  var item = menu.findItemByValue("rmiBarAccount");
  $telerik.$(item.get_element()).removeClass("isTest");
  $telerik.$(item.get_element()).addClass("isTest2");
}

[Tom]

Oops. I was a little too excited. There is still a problem.

Here is how the RadMenuItem looks on page load, with the CssClass set to "isTest" in the code behind:

<li class="rmItem rmFirst">
    <a class="rmLink rmRootLink isTest" href="#">
        <span class="rmLeftImage" title=""></span>
        <span class="rmText rmExpandDown"></span>
    </a>
    <div class="rmSlide"></div>
</li>

 

And here's how it looks after I've set the class to "isTest2" with the jQuery addClass directive on the client side:

<li class="rmItem rmFirst isTest2">
    <a class="rmLink rmRootLink isTest" href="#">
        <span class="rmLeftImage" title=""></span>
        <span class="rmText rmExpandDown"></span>
    </a>
    <div class="rmSlide"></div>
</li>

 

Look closely and you notice that the list item tag gets the class set on the client side and the anchor tag gets the class set in the code behind. That means that whichever class (isTest or isTest2) is defined last in the stylesheet, that will be the class that is used.

Question: How should I define the class in the code behind and then change it on the client side so that I'm changing the same tag?

[Magdalena]

Hello Tom,

You can apply a custom CSS class to rmLink instead of rmItem by the following:

var menu = $find("<%= rmTest.ClientID %>");
var item = menu.findItemByValue("rmiBarAccount");
var rmLinkElement = $telerik.$(item.get_element()).find(".rmLink");
$telerik.$(rmLinkElement).addClass("isTest2");

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Tom]

Thanks, Magdalena!