RadCombo Client Side Enter into Tab Keypress

7 posts, 0 answers
  1. erato
    erato avatar
    16 posts
    Member since:
    Feb 2007

    Posted 07 Sep 2011 Link to this post

    I'm dynamically creating several RadComboBoxes.  MarkFirstMatch is true, AllowCustomText is false, and the TabIndex is set for each of the controls.

    I need the Enter key to function as such:  1) select the item selected in the combo box (the way that it functions by default) and then 2) tab into the next tabindex.

    I've been trying to achieve this using the OnClientKeyPressing event without sucess since I'm not sure how to "turn" the Enter key press into a Tab key press.

    Thank You,
    sash
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Sep 2011 Link to this post

    Hello Erato,

    Try the following Javascript to turn Enter key to Tabkey.Hope this helps.
    Javascript:
    function OnClientKeyPressing(sender, args)
    {
        if (event.keyCode == 13)
        {
           eventArgs.set_cancel(true);
           event.keyCode=9;
        }
    }

    Thanks,
    Shinu.
  5. erato
    erato avatar
    16 posts
    Member since:
    Feb 2007

    Posted 07 Sep 2011 Link to this post

    i turned that into 
    function OnClientKeyPressing(sender, eventArgs)
    {
        if (event.keyCode == 13)
        {
           eventArgs.set_cancel(true);
           event.keyCode=9;
        }
    }

    but am getting an error on eventArgs.set_cancel(true) that says object doesn't support this property or method.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 08 Sep 2011 Link to this post

    Hello Erato,

    Sorry for the wrong code.Try the following Javascript and let me know if any concern.
    JS:
    <script type="text/javascript">
    function OnClientKeyPressing(comboBox, eventArgs)
    {
      if (eventArgs.get_domEvent().keyCode == 13)
      {
        var nextCombo = $find("<%= RadComboBox2.ClientID %>");//RadComboBox2 means your next combo
        var input = nextCombo.get_inputDomElement();
        input.focus();
      }
    }
    </script>

    Thanks,
    Shinu.
  8.
  9. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 08 Sep 2011 Link to this post

    Hi Erato,

    Try the bellow suggested code showing how to focus the next combo when enter key is pressed on the previous one.

    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <script type="text/javascript">
            function OnClientKeyPressing(sender, args) {
                var e = args.get_domEvent();
                if (e.keyCode == 13) {
                    sender._raiseClientBlur(e);
                    $get("<%=RadComboBox2.ClientID%>_Input").focus();
                    $telerik.cancelRawEvent(e.rawEvent);
                }
            }
        </script>
        <div>
            <telerik:RadComboBox ID="RadComboBox1" HighlightTemplatedItems="true" OnClientKeyPressing="OnClientKeyPressing"
                runat="server">
                <Items>
                    <telerik:RadComboBoxItem Text="item_1" />
                    <telerik:RadComboBoxItem Text="item_2" />
                </Items>
            </telerik:RadComboBox>
            <telerik:RadComboBox ID="RadComboBox2" HighlightTemplatedItems="true" runat="server">
                <Items>
                    <telerik:RadComboBoxItem Text="item_1" />
                    <telerik:RadComboBoxItem Text="item_2" />
                    <telerik:RadComboBoxItem Text="item_3" />
                    <telerik:RadComboBoxItem Text="item_4" />
                </Items>
            </telerik:RadComboBox>
        </div>
        </form>

    Hope this helps.

    All the best,
    Ivana
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  11. erato
    erato avatar
    16 posts
    Member since:
    Feb 2007

    Posted 08 Sep 2011 Link to this post

    I'm creating the RadComboBox controls dynamically so I can't reference the Control IDs like that in the javascript.  I was hoping to be able to force a tab event but doesn't seem to be possible...

    I will probably end up using this method and create a javascript array containing the controlIDs, in order of TabIndex.

    Thanks again!

  13. erato
    erato avatar
    16 posts
    Member since:
    Feb 2007

    Posted 08 Sep 2011 Link to this post

    Success!  I figured I'd post what worked if anyone else runs into this problem.  I still have to work with auto-tabbing to the next tabstrip on enter, but that should be a piece of cake after this!

    //this is for the radcombo controls, enter to tab functionality
    function OnClientKeyPressing(sender, args) {   
        var e = args.get_domEvent();      
        var id = "";
         
        if (e.keyCode == 13) {       
            sender._raiseClientBlur(e);                                       
            var curtabIndex = sender.get_inputDomElement().tabIndex;
                             
            for (i = 0; i < document.forms[0].elements.length; i++)
            {                  
                if (document.forms[0].elements[i].type == "text")
                {               
                    id = document.forms[0].elements[i].id;               
                     
                    if ($get(id).tabIndex == curtabIndex+1)
                    {            
                        setTimeout('document.getElementById("' + id + '").focus();', 10);                                                                                                      
                        break;
                    }
                }           
            }                
        }
    }

  14.
Back to Top