Align Image next to the Text

2 posts, 0 answers
  1. crazy05
    crazy05 avatar
    72 posts
    Member since:
    Sep 2014

    Posted 15 Sep 2014 Link to this post

    This is the image we did using and css. I am trying to implement the same in RAD Menu.

    How can I align image right to the text in Radmenuitem ?

    In this image, hover over the text and image will slide the menu. How can do it in radmenu ?
    <telerik:RadMenu ID="rmMenu" runat="server" EnableImagePreloading="true" EnableEmbeddedSkins="false"     BorderColor="Black" BorderStyle="None" BorderWidth="0px" Skin="COPMenu" BackColor="Transparent" ExpandAnimation-Type="None">
           <Items>
                   <telerik:RadMenuItem ID="riTrans" runat="server" Text="Communication"></telerik:RadMenuItem>
                    <telerik:RadMenuItem ID="riGen" runat="server" Text="Appointment Book"></telerik:RadMenuItem>
          </Items>
    </telerik:RadMenu>
  2. Dimitar
    Admin
    Dimitar avatar
    1415 posts

    Posted 18 Sep 2014 Link to this post

    Hello Ram,

    Thank you for contacting us.

    1. You should just set the Image and TextImageRelation properties:
    RadMenuItem mainItem = new RadMenuItem("Main Item");
     
    mainItem.Image = Image.FromFile(@"C:\my.png").GetThumbnailImage(18, 18, null, new IntPtr());
    mainItem.TextImageRelation = TextImageRelation.TextBeforeImage;

    2. You can use the MouseEnter and MouseLeave event to show and hide the menu. For example you can use the MouseEnter event to just show the menu. In the MouseLeave event you should check if the mouse is within the drop down and if not, close it. In addition you can close the the drop down when the mouse leaves it:
    void mainItem_MouseLeave(object sender, EventArgs e)
    {
     
        RadMenuItem mainItem = sender as RadMenuItem;
        RadMenuElement element = mainItem.Owner as RadMenuElement;
        if (element != null)
        {
            Point pt = element.PointToControl(Cursor.Position);
            Point popupPoint = element.PointToControl(mainItem.DropDown.Location);
     
            Rectangle popupRectangle = new Rectangle();
            popupRectangle.Location = popupPoint;
     
            popupRectangle.Size = new Size(mainItem.DropDown.Width, mainItem.DropDown.Height);
            if (mainItem.IsPopupShown && !popupRectangle.Contains(pt))
            {
                mainItem.DropDown.Hide();
            }
        }
        mainItem.DropDown.MouseLeave -= dropDown_MouseLeave;
        mainItem.DropDown.MouseLeave += dropDown_MouseLeave;
    }
     
    void dropDown_MouseLeave(object sender, EventArgs e)
    {
        ((RadDropDownMenu)sender).Hide();
    }
     
    void mainItem_MouseEnter(object sender, EventArgs e)
    {
        RadMenuItem mainItem = sender as RadMenuItem;
        if (!mainItem.IsPopupShown)
        {
            mainItem.ShowChildItems();
        }
    }

    Please let me know if there is something else I can help you with. 
     
    Regards,
    Dimitar
    Telerik
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WinForms is Visual Studio 2017 Ready
Back to Top