Tabbing between Ok and Cancel buttons on RadConfirm window

[Vanitha]

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

[Georgi Tunev]

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.

[Vanitha]

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

[Georgi Tunev]

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.

[Vanitha]

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

[Randall]

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