menu item on the right

16 posts, 1 answers
  1. Andre
    Andre avatar
    41 posts
    Member since:
    Feb 2018

    Posted 29 Mar 2018 Link to this post

    how can i align the menu item on the right?
    i have inserted a menu item with properties stretch horizontallyl  = true.
    all other with stretch horizontallyl  = false

    thanks 

    andré

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    2769 posts

    Posted 30 Mar 2018 Link to this post

    Hello Andre,

    The items are placed in a WrapLayoutPanel and this is why you cannot just align one of the items to the right. To achieve this you can set the margin when the form size is changed. Here is an example:
    private void RadForm1_SizeChanged(object sender, EventArgs e)
    {
        int itemSize = 0;
        foreach (var item in radMenu1.Items)
        {
            itemSize += (int)MeasurementControl.ThreadInstance.GetDesiredSize(item, new SizeF(float.MaxValue, float.MaxValue)).Width;
        }
        int leftpadding = (radMenu1.Width - itemSize);        
        radMenuItem3.Margin = new Padding(leftpadding, 0, 0, 0);
    }

    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 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Andre
    Andre avatar
    41 posts
    Member since:
    Feb 2018

    Posted 31 Mar 2018 in reply to Dimitar Link to this post

    hi Dimitar

    thank you.

    This solved my problem. !

    andré

  4. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 21 Jan Link to this post

    This does not work for me unless the RadMenuItem's AutoSize property is set to false.  Also with AutoSize being false, I noticed that even with TextAlignment set to MiddleCenter, the text stays aligned to the TopLeft.
  5. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 21 Jan in reply to Brandon Link to this post

    Here is an image showing what I mentioned.  Couldn't figure out how to modify my previous comment.
  6. Dimitar
    Admin
    Dimitar avatar
    2769 posts

    Posted 22 Jan Link to this post

    Hello Brandon,

    The new Margin appears to be taken into consideration now. You need to clear it before measuring the item. Here is the updated code:
    Padding zeroPadding = new Padding(0);
    private void RadForm1_SizeChanged(object sender, EventArgs e)
    {
        int itemSize = 0;
     
        foreach (var item in radMenu1.Items)
        {
            item.Margin = zeroPadding;
            itemSize += (int)MeasurementControl.ThreadInstance.GetDesiredSize(item, new SizeF(float.PositiveInfinity, float.PositiveInfinity)).Width;
        }
        int leftpadding = (radMenu1.Width - itemSize);
        radMenuItem3.Margin = new Padding(leftpadding - 3, 0, 0, 0);
    }

    Let me know how this works for you.

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 22 Jan in reply to Dimitar Link to this post

    That works - ish.  I have 3 menu items to move to the right.  When AutoSize is set to true, I only need to set the padding for the first of the 3, and it'll move the other two to the right of itself along with it.  This is great and all, but it doesn't update when the text on the menu items have changed.  I got around this by capturing the text-changed event of each of the menu items.  Great, now that works.  There's still an issue.  One of the menu items is invisible until data is loaded.  Then it's made visible and its text is updated.  (The form is in it's default state of Maximized) The padding doesn't work on this update for some reason.  If I pull the form out of maximized mode, it scales just fine.  Even when I put it back into maximized it works.  It's just the initial state of being maximized and the menu item made visible/text changed that it doesn't work.

     

    Do I need to capture when the visibility of the menu item is changed as well?  If so, how?

     

    I have provided a screenshot for 

    1: No data loaded

    2: Data loaded, text updated, visibility changed.

  8. Dimitar
    Admin
    Dimitar avatar
    2769 posts

    Posted 22 Jan Link to this post

    Hello Brandon,

    The margin needs to be updated in all these cases manually (or when other properties that affect the layout are changed). You can use the PropertyChanged event to handle the Text and the Visibility. For example:
    public RadForm1()
    {
        InitializeComponent();
         
       
        foreach (var item in radMenu1.Items)
        {
            item.PropertyChanged += Item_PropertyChanged;
        }
    }
     
    private void Item_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "Visibility" ||  e.PropertyName == "Text")
        {
            //update margin
        }
    }

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

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 22 Jan Link to this post

    So now we're going down a rabbit hole of concurrent problems.  I capture the Visibility change event for the menu items and it just keeps hitting it over and over and over, non-stop until an error is thrown for an overflow.  I verified there is nothing else changing the visibility of the menuitem in question.

    Private Sub MenuPosUpdateTrigger(sender As Object, e As PropertyChangedEventArgs) Handles mnuLocation.PropertyChanged, mnuAccount.PropertyChanged, mnuSetting.PropertyChanged
     
        If TypeOf sender Is RadMenuItem Then
            If e.PropertyName = "Visibility" Or e.PropertyName = "Text" Then
                UpdateMenuPos()
            End If
        End If
     
    End Sub
     
    Public Sub UpdateMenuPos()
        Dim itemSize As Integer = 0
        Dim ZeroPadding As New Padding(0, 0, 0, 0)
        For Each item As RadMenuItem In mnuMenu.Items
     
            item.Margin = ZeroPadding
            Dim Sz As Integer = MeasurementControl.ThreadInstance.GetDesiredSize(item, New SizeF(Single.MaxValue, Single.MaxValue)).Width
            itemSize += Sz
     
        Next
     
        Dim LeftPadding As Integer = (mnuMenu.Width - itemSize)
        mnuLocation.Margin = New Padding(LeftPadding, 0, 0, 0)
    End Sub
  10. Dimitar
    Admin
    Dimitar avatar
    2769 posts

    Posted 23 Jan Link to this post

    Hi Brandon,

    I was able to reproduce this, the issue is that I am measuring hidden items as well. This is not necessary and you can avoid it like this:
    Private Sub UpdateMargin()
        Dim itemSize As Integer = 0
     
        For Each item In radMenu1.Items
            item.Margin = zeroPadding
            If item.Visibility <> ElementVisibility.Visible Then
                Continue For
            End If
            itemSize += CInt(MeasurementControl.ThreadInstance.GetDesiredSize(item, New SizeF(Single.PositiveInfinity, Single.PositiveInfinity)).Width)
        Next item
        Dim leftpadding As Integer = (radMenu1.Width - itemSize)
        radMenuItem3.Margin = New Padding(leftpadding - 3, 0, 0, 0)
    End Sub

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

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 23 Jan Link to this post

    Thank you for your solution.  That made a difference.  The problem I face now is that since it doesn't Calculate the size of the mnuLocation item until it's visible, it ends up looking like the attached picture 1 until it becomes visible in the attached picture 2.
  12. Dimitar
    Admin
    Dimitar avatar
    2769 posts

    Posted 24 Jan Link to this post

    Hi Brandon,

    How are you hiding the item? You need to set its visibility to collapsed so its size is not taken into account: 
    radMenuItem1.Visibility = ElementVisibility.Collapsed;

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

    Regards,
    Dimitar
    Progress Telerik
    Get quickly onboard and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  13. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 31 Jan in reply to Dimitar Link to this post

    That solved my problem until today when I changed themes.  If I change the font size at all, the proper positioning stops.  It's set to Segoe UI at size 8, Regular.  If I change it to anything higher, the last two menuitems end up on a new row.
  14. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 31 Jan in reply to Brandon Link to this post

    So I'm guessing it's because the MeasurementControl.ThreadInstance.GetDesiredSize uses the Themed font instead of the active font.  What I don't know is how to adjust it accordingly.
  15. Brandon
    Brandon avatar
    21 posts
    Member since:
    Jan 2019

    Posted 31 Jan Link to this post

    Fixed it myself by modifying the function to set the Font.

     

    Public Sub UpdateMenuPos()
        If Not Me.Visible Then Exit Sub
        Dim itemSize As Integer = 0
        Dim ZeroPadding As New Padding(0, 0, 0, 0)
        Dim F As New Font("Segoe UI", 12, FontStyle.Regular)
     
        For Each item As RadMenuItem In mnuMenu.Items
     
            If item.Visibility <> ElementVisibility.Visible Then
                Continue For
            End If
     
            item.Margin = ZeroPadding
     
            MeasurementControl.ThreadInstance.Font = F
            Dim Sz As Integer = MeasurementControl.ThreadInstance.GetDesiredSize(item, New SizeF(Single.MaxValue, Single.MaxValue)).Width
            itemSize += Sz
     
        Next
     
        Dim LeftPadding As Integer = (mnuMenu.Width - itemSize)
        If mnuLocation.Visibility = ElementVisibility.Collapsed Then
            mnuAccount.Margin = New Padding(LeftPadding, 0, 0, 0)
        ElseIf mnuLocation.Visibility = ElementVisibility.Visible Then
            mnuLocation.Margin = New Padding(LeftPadding, 0, 0, 0)
        End If
    End Sub
  16. Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 01 Feb Link to this post

    Hi Brandon,

    Thank you for the update. The themes indeed may define different fonts and it is possible that this will influence how the font sizes will be calculated. As I understand, you managed to find a suitable solution. 

    Let us know if you have other questions.

    Regards,
    Hristo
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top