Rad Combo box enter Key press issue

[siva]

Hi,

I am using a Rad combo box with properties

EnableLoadOnDemand ="true"  

OnItemsRequested="ddlCode_ItemsRequested" 

OnSelectedIndexChanged ="ddlCode_SelectedIndexChanged"

MarkFirstMatch="false"

But if I enter a text which is existing in the combo list and press on enter it will not go to selectedIndexChanged event. 

My requirement is if i enter the text and perss on enter key it should go to the selected indexchaned event. and the entered text item should get selected in the combo box.

In the below url i have seen a example when on client key press if "enter Key" is found they invoke serverside button postback event.

  http://www.telerik.com/community/forums/aspnet-ajax/combobox/keypress-event-of-radcombo-box.aspx

How we can achieve this for dropdown enter Key press event. to invoke selectedIndex changed event?

thanks

Siva Kumar KB

[Princy]

Hello Siva,

You can try out the following code to fire the SelectedIndexChanged event of the combobox on EnterKey press:
aspx:

<telerik:RadComboBox ID="RadComboBox1" AutoPostBack="true" runat="server"
         AllowCustomText="true"  EnableLoadOnDemand="true" MarkFirstMatch="true"
         OnItemsRequested="ddlCode_ItemsRequested"
         OnClientKeyPressing="HandleKeyPress"
         OnSelectedIndexChanged="ddlCode_SelectedIndexChanged">
 </telerik:RadComboBox>

js:

 function HandleKeyPress(sender, eventArgs)
    {
       if (eventArgs.get_domEvent().keyCode == 13)
       {
         sender.raise_selectedIndexChanged();
       }
    }

Also make sure that you have set the AutoPostBack property to true for the RadComboBox to true.

Thanks
Princy.

[Javed]

how can i call textChanged event?

[siva]

Hi Princy,

   thanks for your reponse.  I tried the following piece of code.  

But this is causing the whole page to refresh. i.e, there is a button "Save" and the validation in that button is firing..

It should call only the selected index changed.  But it is calling other button click functionality also.

How to restrict that?

Thanks & Regards

Siva Kumar KB

[Simon]

Hello siva,

RadComboBox postbacks when its SelectedIndexChanged event fires at the client, which triggers the validation as usual.

You could avoid this by setting the ValidationGroup property of the ComboBox to a value, which differs from that of the Button's ValidationGroup property.

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[siva]

Hi,

I tried by keeping the dropdown validation group to "G1" and Save button validation group to "G2" .  Eventhen the validation written in button click is called.

     And on more issue is pressing any key in the Rad combo it shows Javascript error on the page status bar  "Object does not support this property or method"

Please help me.

thanks

Siva Kumar KB

I am using the same code as provided by you.

function HandleKeyPress(sender, eventArgs)   

{    

  if (eventArgs.get_domEvent().keyCode == 13)   

  {         

sender.raise_SelectedIndexChanged(); 

  }   

} 

[siva]

Hi,

I tried by keeping the dropdown validation group to "G1" and Save button validation group to "G2" .  Eventhen the validation written in button click is called.

     And on more issue is pressing any key in the Rad combo it shows Javascript error on the page status bar  "Object does not support this property or method"

Please help me.

thanks

Siva Kumar KB

I am using the same code as provided by you.

function HandleKeyPress(sender, eventArgs)   

{    

  if (eventArgs.get_domEvent().keyCode == 13)   

  {         

sender.raise_SelectedIndexChanged(); 

  }   

} 

[Simon]

Hello siva,

The correct name of the event raising method is raise_selectedIndexChanged - please try with it.

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions on the newTelerik Support Portal.
Check out the tipsfor optimizing your support resource searches.

[siva]

Hi

I tried both cases raise_selectedIndexChanged and raise_SelectedIndexChanged .  But no luck.

Please can some body help on this?

thanks

Siva Kumar KB

[Atanas Korchev]

Hi siva,

Unfortunately we are not sure why this is not working at your side. I suggest you open a support ticket and send us a sample page which shows the code you are currently using. Once we reproduce the problem locally we will provide a solution.

Regards,
Albert
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[nspit]

I am having the same issue. Has a solution been discovered?

[Simon]

Hi nspit,

You can handle the KeyPressing event and if 'Enter' is pressed search for an Item with the typed text and select it manually, i.e.

function onKeyPressing(sender, eventArgs) {
    var keyCode = eventArgs.get_domEvent().keyCode;

    if (keyCode == 13) {
        var item = sender.findItemByText(sender.get_text());
        if (item) item.select();
    }
}

All the best,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Sam]

Is it possible to fire the ItemsRequested server event on keypress?!!

[Simon]

Hi Sam,

Yes, you call the requestItems method on the client  to trigger the server-side ItemsRequested event.

Greetings,
Simon
the Telerik team

[Richard]

using the onKeyPressing and matching the item, can you provide script that would allow for matching despite case ... e.g. match 'nikon' to 'Nikon' on the items list and auto select?

[Kalina]

Hi Richard,

Let me suggest you use the  toLowerCase() method of the JavaScript String object:

<script type="text/javascript">

    function onKeyPressing(sender, eventArgs) {
        var keyCode = eventArgs.get_domEvent().keyCode;

        if (keyCode == 13) {

          var item = sender.findItemByText(sender.get_text().toLowerCase());
          if (item) item.select();
        }
    }
</script>

Regards,
Kalina
the Telerik team

[Nsi]

I am having the same problem. I wonder why this script is not working for me. 

 <telerik:RadComboBox ID="rcbcomms" runat="server" EnableLoadOnDemand="true" EnableItemCaching = "false" AutoPostBack="true"
                    OnSelectedIndexChanged="rcbcomms_SelectedIndexChanged"
                     AllowCustomText="false" MarkFirstMatch="true" OnClientDropDownClosed="OnrcbcommsClosed"
                    OnClientItemsRequested="OnrcbcommsRequested" OnClientItemDataBound="onClientrcbcommsDataBound"
                    ShowMoreResultsBox="true" OnClientItemsRequesting="OnrcbcommsRequesting" OnClientKeyPressing="onKeyPressing">
                </telerik:RadComboBox>


ScriptManager.RegisterStartupScript(this, this.GetType(), "onKeyPressed", @"function onKeyPressing(sender, eventArgs) {
        var keyCode = eventArgs.get_domEvent().keyCode;
         if (keyCode == 13) {
           var item = sender.findItemByText(sender.get_text());
           if (item) item.select();
        }
    }", true);

[Kalina]

Hello Nsi,

As I inspected your code snippet - I noticed that you register the function in this way:

ScriptManager.RegisterStartupScript(this, this.GetType(), "onKeyPressed", @"function onKeyPressing(sender, eventArgs) { ...


I changed this registration:

ScriptManager.RegisterStartupScript(this, this.GetType(), "onKeyPressing", @"function onKeyPressing(sender, eventArgs) {
var keyCode = eventArgs.get_domEvent().keyCode;
    if (keyCode == 13) {
    var item = sender.findItemByText(sender.get_text());
    if (item) item.select();
}
}", true);

When I tested the changed code - it worked properly on my side.

Regards,
Kalina
the Telerik team

[Nsi]

Hello Kalina,
Thanks for your response.
I can get popup from alert as shown in the script below but the function has failed to fire my selectedIndexChanged event. This was the same behavior even when using the unique name, onKeyPressed.

Please note that selectedIndexChanged is being fired when a RadComboBox item is selected from the dropdown list but does not fire when enter is pressed. Kindly look at and see there is something I am not doing right.

  ScriptManager.RegisterStartupScript(this, this.GetType(), "onKeyPressing", @"function onKeyPressing(sender, eventArgs) {
        var keyCode = eventArgs.get_domEvent().keyCode;
        alert(""Test Entry 1: "" + keyCode);
         if (keyCode == 13) {
          alert(""Test Entry 2: "" + keyCode);
           var item = sender.findItemByText(sender.get_text());
           if (item) item.select();
           //sender.raise_selectedIndexChanged()
           alert(""Test Entry 3: selectedIndexChanged"")
        }
    }", true)

See my aspx page script below:

<telerik:RadComboBox ID="rcbcomms" runat="server" EnableLoadOnDemand="true" EnableItemCaching = "false" AutoPostBack="true"
                    OnSelectedIndexChanged="rcbcomms_SelectedIndexChanged"
                     AllowCustomText="false" MarkFirstMatch="true" OnClientDropDownClosed="OnrcbcommsClosed"
                    OnClientItemsRequested="OnrcbcommsRequested" OnClientItemDataBound="onClientrcbcommsDataBound"
                    ShowMoreResultsBox="true" OnClientItemsRequesting="OnrcbcommsRequesting" OnClientKeyPressing="onKeyPressing">
                </telerik:RadComboBox>

Regards,
Nsi.

[Kalina]

Hello Nsi,

Could you please explain why do you want to select explicitly an item after the user presses the “Enter” key with a custom client-side code?
The RadComboBox Keyboard Support has already provided this option - please take a look at this online demo.

Greetings,
Kalina
the Telerik team

[Jon]

Certain situations will cause or not cause the OnClientSelectedIndexChanged event to be raised when the user presses Enter while the RadComboBox has focus.  In my case, I found that there were enough situations where the OnClientSelectedIndexChanged event wasn't raised by pressing the Enter key that I decided to handle the event differently.

I use the OnClientKeyPressing to determine If the Enter key is pressed.  If so, I go ahead and do my logic, then cancel the eventArgs in the event that the Enter key would have raised the OnClientSelectedIndexChanged event. But wait!  You can't use eventArgs.set_cancel(true) in the OnClientKeyPressing event handler!  Here's how I worked around this and it is working well for my situation:

Declare your control and wire up the OnClientKeyPressing, OnClientSelectedIndexChanging, and OnClientSelectedIndexChanged events.

<telerik:RadComboBox ID="RadComboBox1" runat="server"
    OnClientKeyPressing="RadComboBox1_ClientKeyPressing"
    OnClientSelectedIndexChanging="RadComboBox1_ClientSelectedIndexChanging"
    OnClientSelectedIndexChanged="RadComboBox1_ClientSelectedIndexChanged" />

Declare a global variable ( I call it cancelSelectedIndexChangingEvent ) and your event handlers.  Just for example, here I do one thing if an item is highlighted, and a different thing if it is not.

var cancelSelectedIndexChangingEvent = false;

function RadComboBox1_ClientKeyPressing(sender, eventArgs)
{
    var c = eventArgs.get_domEvent().keyCode;
    // keyCode 13 = Enter
    if (c == 13)
    {
        if (sender._highlightedItem != undefined)
            // do logic
        else
            // do other logic
        cancelSelectedIndexChangingEvent = true;
    }
}

function RadComboBox1_ClientSelectedIndexChanged(sender, eventArgs)
{
    // do logic
}

function RadComboBox1_ClientSelectedIndexChanging(sender, eventArgs)
{
    eventArgs.set_cancel(cancelSelectedIndexChangingEvent);
    cancelSelectedIndexChangingEvent = false;
}

Now if the user presses Enter, the ClientSelectedIndexChanged event won't fire, which is my work around for not being able to use eventArgs.set_cancel(true).

Note that depending on your situation you may need to reset the cancelSelectedIndexChangingEvent to false in additional cases.  For instance, I have more than one RadComboBox using these same behaviors.  So on each RadComboBox, I add the OnClientFocus event handler as shown below:

function RadComboBox1_ClientFocus(sender, eventArgs)
{
    cancelSelectedIndexChangingEvent = false;
}

The ClientSelectedIndexChanging event is still required in case the user uses the mouse to make a selection.  If the user had pressed Enter and it was one of the situations that did NOT raise the ClientSelectedIndexChanging event, the cancelSelectedChangingEvent would not reset to false.

[Kalina]

Hello Jon,

Thank you for posting your solution for the community.

Best regards,
Kalina
the Telerik team