Using AccessKey to cause click event

[Michael]

Hello,
I need to make the AccessKey cause a click event on the tab associated with the key.  It does put a focus line around the tab, but it doesn't appear that any of the events fire for that.  I currently have to then hit the Enter key to cause a click event to occur.  How can I accomplish this using the RadTabStrip client API without resorting to some global keyboard code to catch the AccessKeys?  My current code is below (sorry, but the Format Code Block button put in some extra stuff).  I am using Q2 2011 sp1.  Thanks!
Michael

<P><script language="javascript" type="text/javascript"><BR>
function mainTabSelected(sender, args) {<BR>    var tab =
eventArgs.get_tab();<BR>    tab.click();<BR>
}<BR></script></P>
<P><telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0"
AutoPostBack="true" CausesValidation="false" ClickSelectedTab="true"
OnClientTabSelected="mainTabSelected"><BR>
<Tabs><BR>    <telerik:RadTab ID="TabCampaignSetup"
Value="CampaignEdit" Text="<u>C</u>ampaign Setup" runat="server"
AccessKey="C" SelectedIndex="0"  /><BR>
<telerik:RadTab ID="TabMassSubscription" Value="CampaignMassSubscriptions"
Text="<u>A</u>dd Subscriptions" runat="server" AccessKey="A"
SelectedIndex="1" /><BR>    <telerik:RadTab
ID="TabRemoveSubscriptions" Value="CampaignRemoveSubscriptions"
Text="<u>S</u>ubscriptions" runat="server" AccessKey="S"
SelectedIndex="2" /><BR>    <telerik:RadTab
ID="TabContactHistory" Value="CampaignContactHistory"
Text="C<u>o</u>ntacts" runat="server" AccessKey="O"
SelectedIndex="4" /><BR>    <telerik:RadTab
ID="TabCampaignHistory" Value="CampaignHistory"
Text="<u>H</u>istory" runat="server" AccessKey="H" SelectedIndex="3"
/><BR>  </Tabs><BR></telerik:RadTabStrip><BR></P>

[Dimitar Terziev]

Hello Michael,

I've prepared a sample page demonstrating how to achieve the desired behavior.

I hope this would help.

Regards,
Dimitar Terziev
the Telerik team

[Michael]

I have not had a chance to try this yet, but it looks like exactly what I needed.  Please add it as a suggestion for a future feature enhancement to the tabstrip.  Thank you!!

[Michael]

Can you think of a way so I can automatically give this capability to any RadTabStrips I have on the page, without having to explicitly do this for each one by finding it with $find?  I have not found a $find equivalent to be able to find all objects by a certain type.  For RadComboBox, I found a post saying you can use Telerik.Web.UI.RadComboBox.ComboBoxes to find all on a page, but when I look at Telerik.Web.UI.RadTabStrip during debugging, I don't see anything like that.
http://www.telerik.com/community/forums/aspnet/combobox/find-all-radcombo-clientside.aspx

Thanks!

[Dimitar Terziev]

Hello Michael,

Yes you are right that there is not such method for the RadTabStrip as there is for the RadComboBox.

In order to assign the same functionality for all RadTabStrip controls on the page please try the following script:

function pageLoad() {

                $telerik.$("div .RadTabStrip").each(function () {

                    var tabstrip =  $find($telerik.$(this).attr("id"));

                    $telerik.$(".rtsLI", tabstrip.get_element()).bind("focus", function () {

                        var index = $telerik.$(".rtsLI", tabstrip.get_element()).index(this);
                        tabstrip.get_tabs().getTab(index).set_selected(true);

                    });

                });
            }

Regards,
Dimitar Terziev
the Telerik team

[Michael]

If anyone else is interested, I had to make one small change.  The bind on focus was not working against the <li> element with the rtsLI class, but did when I changed the selector to the child anchor.  I ended up going with the version below for my needs.  Thanks, Dimitar!

function pageLoad() {
  $telerik.$("div .RadTabStrip").each(function() {
    var tabstrip = $find($telerik.$(this).attr("id"));

    $telerik.$(".rtsLI a", tabstrip.get_element()).bind("focus", function() {
      var index = $(this.parentNode).index();
      tabstrip.get_tabs().getTab(index).click();
    });
  });
}

[Michael]

For anyone that wants it, below is the version I went with for now.  During a partial postback, it will not hook up to a RadTabStrip that has already been hooked up.  This allows you to ajaxify RadTabStrips on the page, and their focus event gets bound again after the partial update.  I also reference the latest jquery version in the app, so I just removed the "$telerik." pieces.  More importantly, it will check to make sure the Alt key was held down, which makes it so normal tabbing around in the page will not kick off a click event when focus goes to a tab.  I still think the controls should either have a new option for how the AccessKey functions, or have a new event for when the AccessKey is activated, so a developer can make it do whatever they want more easily.  Be sure to put this script after the ScriptManager control.

Current version:

<script language="javascript" type="text/javascript">

  Sys.Application.add_load(function(sender, args) {

    $('div .RadTabStrip').not('[hasAccessKeyEvents="1"]').each(function() {

      var tabstrip = $find($(this).attr("id"));

      var $this = $(this);

      $this.attr('hasAccessKeyEvents', '1');

 

      $('.rtsLI a', $this).bind('focus', function() {

          if (event.altKey) {

         var index = $(this).parent().index();

         tabstrip.get_tabs().getTab(index).click();
          }

      });

    });

  });

</script>