This is a migrated thread and some comments may be shown as answers.

Align Image next to the Text

1 Answer 43 Views
Menu
This is a migrated thread and some comments may be shown as answers.
crazy05
Top achievements
Rank 1
crazy05 asked on 15 Sep 2014, 06:33 PM
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>

1 Answer, 1 is accepted

Sort by
0
Dimitar
Telerik team
answered on 18 Sep 2014, 10:28 AM
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.
 
Tags
Menu
Asked by
crazy05
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Share this question
or