How to use image sprites with RadMenuItem ImageUrl

8 posts, 1 answers
  1. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 28 Apr 2015 Link to this post

    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.

     

  2. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 29 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 29 Apr 2015 in reply to Magdalena Link to this post

    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
    }

  5. Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 30 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 30 Apr 2015 Link to this post

    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");
    }
  7. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 30 Apr 2015 Link to this post

    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?

  8. Answer
    Magdalena
    Admin
    Magdalena avatar
    421 posts

    Posted 04 May 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  9. Tom
    Tom avatar
    44 posts
    Member since:
    Oct 2010

    Posted 04 Jun 2015 Link to this post

    Thanks, Magdalena!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017