Align Image next to the Text

[crazy05]

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>

[Dimitar]

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