Changing default focus on a RadConfirm popup.

[MatFindlay]

I'm attempting to change the focus on a RadConfirm popup form to be on the cancel button as opposed to the OK button as is set by default. In order to do this, I've added a ConfirmTemplate to my WindowManager as follows:

<div class="rwDialogPopup radconfirm">   

                <div class="rwDialogText">

                    {1}    

                </div>   

                <script type="text/javascript">

                    function radwindowprompt_setfocus() {                        

                        var container = document.getElementById("buttonContainer");

                        var but = container.getElementsByTagName("A")[1];                                             

                        but.focus();                                               

                    }  

                </script>   

                <div id="buttonContainer">                    

                    <a onclick="$find('{0}').close(true);"  class="rwPopupButton" href="javascript:void(0);" ><span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span></a>                    

                    <a onclick="$find('{0}').close(false);" class="rwPopupButton"  href="javascript:void(0);"><span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Cancel]##</span></span></a>

                    

                </div>

            </div>

I've also set the OnClientShow event to run adwindowprompt_setfocus when the window is shown.

This only seems to work when I set a breakpoint in Firebug and step through. When I just run it, this doesn't seem to work at all.

Any suggestions?

[MatFindlay]

I still haven't found a solution for this problem. Any help on this would be greatly appreciated.

[Georgi Tunev]

Hi MatFindlay,

The only way to achieve this is to use CSS to position the buttons as you need them. This is needed because by design the RadWindowManager will always put the focus on the first button.
For your convenience I attached a small sample to this thread that shows how to achieve this. I hope this helps.


All the best,
Georgi Tunev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Niska]

Hi Georgi ,

I have this problem too...
your solution doesn't help, the buttons drawing outside the popup confirm window
and only the cancel button is shown,

how can I drow the 2 buttons in the center of the window?

Thanks!

[Marin Bratanov]

Hi,

Check out this thread which discusses a different way to set the focus on the cancel button: http://www.telerik.com/community/forums/aspnet-ajax/window/set-focus-on-cancel-button-when-radconfirm-is-called.aspx#1864026. In short - some additional JavaScript when you open the dialog:

var oConfirm = radconfirm("sure?", alertUserResponse);//gets a reference to the confirm popup
var elementList = $telerik.$(".rwPopupButton", oConfirm.get_popupElement());//gets reference to the buttons in the confirm
setTimeout(function ()
{
    elementList[1].focus();//focuses the second button, which is the cancel
}, 0);

As for centering -  the buttons are aligned as intended and centering them is not offered out of the box. You can, however, override some of the default styles and modify the <ConfirmTemplate> (how to do so is explained here in more detail) of the RadWIndowManager in order to achieve this look, for example:

<telerik:RadWindowManager runat="server" ID="rwm1">
 <ConfirmTemplate>
    <div class="rwDialogPopup radconfirm">
        <div class="rwDialogText">
            {1}
        </div>
        <div style="text-align:center;">
            <a onclick="$find('{0}').close(true);" class="rwPopupButton" href="javascript:void(0);">
                <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[OK]##</span></span></a>
            <a onclick="$find('{0}').close(false);" class="rwPopupButton" href="javascript:void(0);">
                <span class="rwOuterSpan"><span class="rwInnerSpan">##LOC[Cancel]##</span></span></a>
        </div>
    </div>
</ConfirmTemplate>
</telerik:RadWindowManager>

This also requires the following CSS to override some of the default styling:

.rwDialogPopup a.rwPopupButton,
.rwDialogPopup a.rwPopupButton span
{
    float: none;
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Please keep in mind that the above code is just an example - it has not been thoroughly tested and I cannot guarantee that it will work in all scenarios in all browsers and that it is the best way to achieve this. You can use this as base to further develop this functionality and I hope it will work out well for you. 

Regards,
Marin
the Telerik team