This is a migrated thread and some comments may be shown as answers.
Split Button and Context Menu alignment
5 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 01 Nov 2019, 01:57 PM

Greetings!

I'm using the demo of the basic Split Button's functionality as found in  https://demos.telerik.com/aspnet-ajax/button/examples/splitbutton/defaultvb.aspx as the basis of my solutin / question.

I have a need for the right edge of the ContextMenu to be in line with the right edge of the SplitButton. My ContextMenu items are being loaded dynamically depending on certain conditions of the state of the form.

I have tried the following adaptation of the display function:

function btnWFlowSplitClicked(sender, args) {
    if (args.IsSplitButtonClick() || !sender.get_commandName()) {
        var currentLocation = $telerik.getBounds(sender.get_element());
        var contextMenu = $find("<%= ctxWFlowSplit.ClientID %>");
        var ctxSize = $telerik.getBounds(contextMenu.get_element());
        //alert('split x:' + currentLocation.x + ' w:' + currentLocation.width);
        //alert('ctx w:' + ctxSize.width);
        var ctx_x = ctxSize.width - (currentLocation.x + currentLocation.width);
        //alert('ctx_x:' + ctx_x);
 
        contextMenu.showAt(ctx_x, currentLocation.y + currentLocation.height);
    }
}

 

... but the value "ctxSize.width" keeps being set to 0 , which makes the context menu x position equal to a negative number, and unusable!

Does anyone have any ideas?

Thanks in advance

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 06 Nov 2019, 12:53 PM

Hi Adam,

The faced problem is related to the fact that the items of the context menu are hold into a popup element with ID="<%=TheContextMenuID.ClientID%>"+"_detached". This element is sized after the show/showAt methods of the Contextmenu are called, so the earlier moment in which you can access its size is the OnClientShown event-handler of the context menu. As calling the showAt() method in this handler will trigger the same event again, you can avoid the possible possible positioning recursion by having a flag stating where to position the context menu or not.

For example, you can have a similar logic:

            var currentLocation;
            var toMove = true;

            function btnWFlowSplitClicked(sender, args) {
                if (args.IsSplitButtonClick() || !sender.get_commandName()) {
                    currentLocation = $telerik.getBounds(sender.get_element());
                    toMove = true;
                    var contextMenu = $find("<%= RadContextMenu1.ClientID %>");
                    var currentLocation = $telerik.getBounds(sender.get_element());
                    contextMenu.showAt(currentLocation.x, currentLocation.y + currentLocation.height);
                }
            }

            function contextmenu_onClientShown(contextMenu, args) {
                if (toMove) {
                    console.log(1);
                    toMove = false;
                    var popupEl = document.getElementById(contextMenu.get_id() + "_detached");
                    var ctxSize = $telerik.getBounds(popupEl);
                    var ctx_x = ctxSize.width - (currentLocation.x + currentLocation.width);
                    contextMenu.showAt(ctx_x, currentLocation.y + currentLocation.height);
                }
            }

 

Regards,
Vessy
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.
0
Andy Green
Top achievements
Rank 2
answered on 30 Mar 2021, 03:59 PM

Hi Adam, thanks for this, but the provided example doesnt work as peer the demos.

Thwere is no dropdown selector visible so users wont know there are more options available, and when you select an option the text doent change to reflect the new button functionality.

 

Andy

0
Vessy
Telerik team
answered on 31 Mar 2021, 05:54 PM

Hi Andy,

I saw that my colleague Doncho has already answered your support ticket on the same matter. Please, try the suggestions given by him and continue the discussion there if needed.

We would like to kindly ask you to post your questions only once, otherwise our replies are slowed down. Thank you in advance for your understanding on this matter.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Andy Green
Top achievements
Rank 2
answered on 31 Mar 2021, 07:01 PM

Yes sorry I replied to the wrong post, I was reading this one at the same time, hence this was addressed to Adam completly out of context.

Andy

0
Vessy
Telerik team
answered on 05 Apr 2021, 12:48 PM

Hello,

Nothing to worry about, Andy - thanks a lot for the explanation.

Regards,
Vessy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Asked by
Adam
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Andy Green
Top achievements
Rank 2
Share this question
or