RadMenuItem's popup control.

9 posts, 1 answers
  1. laimonassutkus
    laimonassutkus avatar
    9 posts
    Member since:
    Mar 2017

    Posted 03 Aug Link to this post

    Hi,

    For some strange reason in my application the popup of RadMenuItem gets very big (see the attached picture). I have made a sample project and in a new one i can not reproduce the unexpected behaviour. So i want to do some work-arounds and control the popup size on the opening event (MouseHoover). So far i have tried this : 

    this.menuItem.MouseHover += (sender, args) => {
    this.menuItem.DropDown.PopupElement.MaxSize = new Size(100, 100);
    this.menuItem.DropDown.PopupElement.Size = new Size(100, 100);
    };

    However this results in some even more weird behaviour - the popup splits into two areas - you can see this in the attached picture (green area and blue area). I am quite certain that the blue area is represented as "menuItem.DropDown.PopupElement". The question is - what is called the green area? How can I control the size of that ?

     

    Thank you very much!

  2. laimonassutkus
    laimonassutkus avatar
    9 posts
    Member since:
    Mar 2017

    Posted 03 Aug in reply to laimonassutkus Link to this post

    Forgot to attach picture with colors.
  3. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 03 Aug Link to this post

    Hi Laimonas,

    Without a way to reproduce this I cannot say why there are two areas and where the second one comes from. I would suggest you open a support ticket and attach your project there. This will allow us to determine what is happening in the application.

    Should you have any other questions do not hesitate to ask.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. laimonassutkus
    laimonassutkus avatar
    9 posts
    Member since:
    Mar 2017

    Posted 04 Aug in reply to Dimitar Link to this post

    Hi again. I have reproduced the problem. As you can see RadMenuItem's (radmenuitem1) popup is way too big. I want that it would wrap around inner elements. Thank you.

     

    P.S. I can not submit a ticket currently because my companies issued subscribtion has ended. So i am posting the code here:
    https://ufile.io/dokdi

  5. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 04 Aug Link to this post

    Hello Laimonas,

    Thank you for sharing the code. 

    In this case the menu is taking the height from its parent control. The menu is control itself and this allows you to use its MaximumSize property:
    radMenuItem1.DropDown.MaximumSize = new Size(0, 50);

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. laimonassutkus
    laimonassutkus avatar
    9 posts
    Member since:
    Mar 2017

    Posted 08 Aug Link to this post

    After a suggested code I get this weird behaviour (see the picture attached).
  7. Answer
    Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 08 Aug Link to this post

    Hello,

    I have checked this and the RootElement already has a minimum size. In this case, you should reset its minimum size like this:
    private void RadMenuItem1_DropDownOpening(object sender, CancelEventArgs e)
    {
        radMenuItem1.DropDown.MaximumSize = new Size(0, 50);
        radMenuItem1.DropDown.RootElement.MinSize = new Size(0, 0);
     
    }

    Should you have any other questions do not hesitate to ask.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. laimonassutkus
    laimonassutkus avatar
    9 posts
    Member since:
    Mar 2017

    Posted 08 Aug in reply to Dimitar Link to this post

    This is a very nice solution. Thanks !!!

    However it raised one more problem that I cant seem to tackle. After this enhancement i need to control the location of the drop down because now it is not aligned. (See the picture for details - cantcontrol.png). 

    With this code i can't seem to be able to control the location of the drop down:

    this.radMenuItem14.DropDown.Location = new System.Drawing.Point (50, 50);
    this.radMenuItem14.DropDown.RootElement.Location = new System.Drawing.Point (50, 50);
    this.radMenuItem14.DropDown.PopupElement.Location = new System.Drawing.Point (50, 50);

    Even i tried to put it in the event handler:

    private void DropDownOpening (object sender, CancelEventArgs e)
                {
                (sender as RadMenuItem).DropDown.RootElement.MinSize = new Size (0, 0);
                (sender as RadMenuItem).DropDown.Location = new System.Drawing.Point (50, 50);
                (sender as RadMenuItem).DropDown.RootElement.Location = new System.Drawing.Point (50, 50);
                (sender as RadMenuItem).DropDown.PopupElement.Location = new System.Drawing.Point (50, 50);
                }

    And there i get pretty strange behaviour again (see the attached picture - weirddropdown.png)

    How do i sync drop down location with menu item's location then ?

  9. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 09 Aug Link to this post

    Hi Laimonas,

    You can use the following approach to set the location:
    private void RadMenuItem1_DropDownOpening(object sender, CancelEventArgs e)
    {
        var item = sender as RadMenuItem;
        item.DropDown.MaximumSize = new Size(0, 50);
        item.DropDown.RootElement.MinSize = new Size(0, 0);
        var args = e as RadPopupOpeningEventArgs;
     
        var y = item.PointToScreen(item.Location).Y;
     
        args.CustomLocation = new Point(args.CustomLocation.X, y);
    }

    Do not hesitate to contact us if you have other questions.
     
    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top