Changing default focus on a RadConfirm popup.

5 posts, 0 answers
  1. MatFindlay
    MatFindlay avatar
    18 posts
    Member since:
    Apr 2007

    Posted 26 Apr 2010 Link to this post

    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?
  2.
  3. MatFindlay
    MatFindlay avatar
    18 posts
    Member since:
    Apr 2007

    Posted 28 Apr 2010 Link to this post

    I still haven't found a solution for this problem. Any help on this would be greatly appreciated.
  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 29 Apr 2010 Link to this post

    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.
  7. Niska
    Niska avatar
    7 posts
    Member since:
    Feb 2012

    Posted 01 Feb 2012 Link to this post

    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!
  8.
  9. Marin Bratanov
    Admin
    Marin Bratanov avatar
    5929 posts

    Posted 02 Feb 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top