This is a migrated thread and some comments may be shown as answers.

RadCombo Client Side Enter into Tab Keypress

6 Answers 355 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
erato
Top achievements
Rank 1
erato asked on 07 Sep 2011, 02:39 PM
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

6 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 07 Sep 2011, 03:02 PM
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.
0
erato
Top achievements
Rank 1
answered on 07 Sep 2011, 03:36 PM
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.
0
Shinu
Top achievements
Rank 2
answered on 08 Sep 2011, 06:49 AM
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.
0
Ivana
Telerik team
answered on 08 Sep 2011, 01:19 PM
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 >>

0
erato
Top achievements
Rank 1
answered on 08 Sep 2011, 02:06 PM
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!

0
erato
Top achievements
Rank 1
answered on 08 Sep 2011, 08:11 PM
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;
                }
            }           
        }                
    }
}

Tags
ComboBox
Asked by
erato
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
erato
Top achievements
Rank 1
Ivana
Telerik team
Share this question
or