RadCombo Client Side Enter into Tab Keypress

[erato]

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

[Shinu]

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.

[erato]

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.

[Shinu]

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.

[Ivana]

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

[erato]

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!

[erato]

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