Split Button and Context Menu alignment

[Adam]

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

[Vessy]

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

[Andy Green]

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

[Vessy]

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

[Andy Green]

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

[Vessy]

Hello,

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

Regards,
Vessy
Progress Telerik