Tabbing between Ok and Cancel buttons on RadConfirm window

6 posts, 0 answers
  1. Vanitha
    Vanitha avatar
    6 posts
    Member since:
    Jul 2008

    Posted 10 Sep 2008 Link to this post

    Hi,

    I have radconfirm window on blur of Date control. OK button gets the focus on confirm window, when i press tab, the focus goes to Cancel button. If i press tab again, the focus goes to parent page first control (here it is RadioButtonList) and allowing to navigate through radio buttons.

    Does anyone know how to tab between Ok and Cancel buttons on confirm window.

    I am using Confirm template to do this.
    Here is my code:

    <TelerikWeb:RadWindowManager ID="Singleton" runat="server" Skin="Vista">
          <ConfirmTemplate>
                <div class="windowpopup radconfirm">
                    <script type="text/javascript">
                        function RadWindowManager_SetFocus(obj, ev)
                        {                               
                            if (!ev) ev = window.event;               
                            if (ev.keyCode == 9)
                            {                                   
                                if (obj.nextSibling)
                                {
                                    obj.nextSibling.focus();
                                }
                                else if (obj.previousSibling)
                                {
                                     obj.previousSibling.focus();
                                }
                            }                               
                         }
                   </script>

                 <div class="dialogtext">
                    {1}
                    </div>
                    <div>
                       <a onclick="$find('{0}').callBack(true);" class="radwindowbutton" href="javascript:void(0);"
                                        onblur="RadWindowManager_SetFocus(this, event);">
        <span class="outerspan">
        <span class="innerspan">##LOC[OK]##</span> </span></a>
         <a onclick="$find('{0}').callBack(false);" originalAttribute="href" originalPath="javascript:void(0);"
                                        onblur="RadWindowManager_SetFocus(this, event);">
        <span class="outerspan">
        <span class="innerspan">##LOC[OK]##</span> </span></a>
         <a onclick="$find('{0}').callBack(false);" originalAttribute="href" originalPath="javascript:void(0);"
                                        onkeypress="RadWindowManager_SetFocus(this, event);">
        <span class="outerspan">
        <span class="innerspan">##LOC[OK]##</span> </span></a>
         <a onclick="$find('{0}').callBack(false);" originalAttribute="href" originalPath="javascript:void(0);"
                                        onkeypress="RadWindowManager_SetFocus(this, event);">
        <span class="outerspan">
        <span class="innerspan">##LOC[OK]##</span> </span></a>
         <a onclick="$find('{0}').callBack(false);" class="radwindowbutton"
                                                href="javascript:void(0);" originalAttribute="href" originalPath="javascript:void(0);" originalAttribute="href" originalPath="javascript:void(0);" originalAttribute="href" originalPath="javascript:void(0);" onblur="RadWindowManager_SetFocus(this, event);">
        <span class="outerspan">
        <span class="innerspan">##LOC[Cancel]##</span> </span></a>
                      </div>
                  </div>
           </ConfirmTemplate>
    </TelerikWeb:RadWindowManager>


    for some reason tab keypress event is not firing the function. But it get firing for any keypress.

    I would appreciate any help I can get with this.

    -Vishal

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 11 Sep 2008 Link to this post

    Hi Vanitha,

    The radconfirm content is part of the page on which it was created - that is why you cannot restrict tabbing away from the dialog. If you want to avoid that, you need to restrict the tabbing for the whole page.



    Best wishes,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vanitha
    Vanitha avatar
    6 posts
    Member since:
    Jul 2008

    Posted 11 Sep 2008 Link to this post

    Hi,

    My question is why Keypress event handler is not firing on Telerik control. It does fire on other controls.

    There was copy paste error in my previous code. Here is the correct code that i am trying to do.

    <

    TelerikWeb:RadWindowManager ID="Singleton" runat="server" Skin="Vista">

    <ConfirmTemplate>

    <div class="windowpopup radconfirm">

    <script type="text/javascript">

    function RadWindowManager_SetFocus(obj, ev)

    {

    if (!ev) ev = window.event;

    if (ev.keyCode == 9)

    {

    if (obj.nextSibling)

    {

    obj.nextSibling.focus();

    }

    else if (obj.previousSibling)

    {

    obj.previousSibling.focus();

    }

    }

    }

    </script>

    <div class="dialogtext">

    {1}

    </div>

    <div>

    <a onclick="$find('{0}').callBack(true);" class="radwindowbutton" href="javascript:void(0);"

    onkeypress="RadWindowManager_SetFocus(this, event);"><span class="outerspan"><span class="innerspan">

    ##LOC[OK]##

    </span> </span></a><a onclick="$find('{0}').callBack(false);" class="radwindowbutton"

    href="javascript:void(0);" onkeypress="RadWindowManager_SetFocus(this, event);"><span

    class="outerspan"><span class="innerspan">##LOC[Cancel]##</span> </span></a>

    </div>

    </div>

    </ConfirmTemplate>

    </TelerikWeb:RadWindowManager>


    Thanks
    Vishal

  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 12 Sep 2008 Link to this post

    Hi Vanitha,

    I added an alert statement to the code that you execute in the onkeypressed eventhandler and run your code - the alert is called as expected. Can you please check the attached movie and let me know if I am missing something?


    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Vanitha
    Vanitha avatar
    6 posts
    Member since:
    Jul 2008

    Posted 12 Sep 2008 Link to this post

    Hi Georgi,

    Thanks for your response.

    I figured out myself, how to tab between OK and Cancel buttons and not let focus go to parent page. Instead of 'onkeypress', using 'onblur' and also i am not checking for the 'tab' keycod (i.e.  keycode ==9).

    Here is the code:

    <TelerikWeb:RadWindowManager ID="Singleton" runat="server" Skin="Vista">
        <ConfirmTemplate>
            <div class="windowpopup radconfirm">

                <script type="text/javascript">
                function RadWindowManager_SetFocus(obj, ev)
                {                              
                    if (obj.nextSibling)
                    {
                        obj.nextSibling.focus();
                    }
                    else if (obj.previousSibling)
                    {
                        obj.previousSibling.focus();
                    }                                                            
                }
                </script>

                <div class="dialogtext">
                    {1}
                </div>
                <div>
                    <a onclick="$find('{0}').callBack(true);" class="radwindowbutton" href="javascript:void(0);"
                        onblur="RadWindowManager_SetFocus(this, event);">
                        <span class="outerspan"><span class="innerspan">##LOC[OK]##</span> </span></a>
                    <a onclick="$find('{0}').callBack(false);" originalAttribute="href" originalPath="javascript:void(0);"
                        onblur="RadWindowManager_SetFocus(this, event);">
                        <span class="outerspan"><span class="innerspan">##LOC[OK]##</span> </span></a>
                    <a onclick="$find('{0}').callBack(false);" class="radwindowbutton"
                                href="javascript:void(0);" originalAttribute="href" originalPath="javascript:void(0);" onblur="RadWindowManager_SetFocus(this, event);">
                  <span class="outerspan"><span class="innerspan">##LOC[Cancel]##</span> </span></a>
                </div>
            </div>
        </ConfirmTemplate>
    </TelerikWeb:RadWindowManager>

    I hope this will help someone in need.

    -vishal

  7. Randall
    Randall avatar
    54 posts
    Member since:
    Jun 2008

    Posted 27 May 2011 Link to this post

    Hello Vanitha,

    I am trying to implement your solution to prevent tabbing off the OK and Cancel buttons in a RadConfirm but it is not working.  I can tab from OK to Cancel, then pressing tab again, focus jumps to the browser address bar at the top (I am using IE-9).  The Javascript is firing just fine and calling the object.previousSibling.focus() but focus jumps to the address bar instead of the OK button.

    Here is my code:

    <ConfirmTemplate>
        <script type="text/javascript">
            function RadWindowManager_SetFocus(obj, event) {
                if (obj.nextSibling) {
                    //alert("Next");
                    obj.nextSibling.focus();
                    //window.setTimeout(function () { obj.nextSibling.focus(); }, 100);
                }
                else if (obj.previousSibling) {
                    //alert("Previous");
                    obj.previousSibling.focus();
                    //window.setTimeout(function () { obj.previousSibling.focus(); }, 100);
                }
            }
        </script>
        <div class="rwDialogPopup radconfirm">
            <div class="rwDialogText">
                {1}
            </div>
            <div>
                <a class="rwPopupButton" href="javascript:void(0);"
                    onblur="RadWindowManager_SetFocus(this, event);"
                    onclick="$find('{0}').close(true);"
                    >
                    <span class="rwOuterSpan">
                        <span class="rwInnerSpan">
                            ##LOC[OK]##
                        </span>
                    </span>
                </a>
                <a class="rwPopupButton" href="javascript:void(0);"
                    onblur="RadWindowManager_SetFocus(this, event);"
                    onclick="$find('{0}').close(false);" 
                    >
                    <span class="rwOuterSpan">
                        <span class="rwInnerSpan">
                            ##LOC[Cancel]##
                        </span>
                    </span>
                </a>
            </div>
        </div>
    </ConfirmTemplate>

    I added some alert()'s to verify the Javascript is firing and it is -- I have it commented out for now.  I even tried setting a timeout but that did not work either.

    Any thoughts on making this work?

    Thanks,
    Randall Price
    Senior Developer
    Virginia Tech
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017