Using AccessKey to cause click event

7 posts, 0 answers
  1. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 25 Oct 2011 Link to this post

    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>
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 28 Oct 2011 Link to this post

    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
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 28 Oct 2011 Link to this post

    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!!
  5. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 01 Nov 2011 Link to this post

    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!
  6. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 02 Nov 2011 Link to this post

    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
    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
  7. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 02 Nov 2011 Link to this post

    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();
        });
      });
    }

  8. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 02 Nov 2011 Link to this post

    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>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017