Rad Combo box enter Key press issue

21 posts, 0 answers
  1. siva
    siva avatar
    12 posts
    Member since:
    Feb 2009

    Posted 23 Jul 2009 Link to this post

    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

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Jul 2009 Link to this post

    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.

  3. siva
    siva avatar
    12 posts
    Member since:
    Feb 2009

    Posted 25 Jul 2009 Link to this post

    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


  4. Simon
    Admin
    Simon avatar
    2281 posts
    Member since:
    Sep 2012

    Posted 27 Jul 2009 Link to this post

    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.

  5. siva
    siva avatar
    12 posts
    Member since:
    Feb 2009

    Posted 27 Jul 2009 Link to this post

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

  6. siva
    siva avatar
    12 posts
    Member since:
    Feb 2009

    Posted 27 Jul 2009 Link to this post

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

  7. Simon
    Admin
    Simon avatar
    2281 posts
    Member since:
    Sep 2012

    Posted 27 Jul 2009 Link to this post

    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.

  8. siva
    siva avatar
    12 posts
    Member since:
    Feb 2009

    Posted 03 Aug 2009 Link to this post

    Hi


    I tried both cases raise_selectedIndexChanged and raise_SelectedIndexChanged .  But no luck.
    Please can some body help on this?

    thanks
    Siva Kumar KB

  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8240 posts
    Member since:
    Sep 2012

    Posted 03 Aug 2009 Link to this post

    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.

  10. nspit
    nspit avatar
    6 posts
    Member since:
    Sep 2007

    Posted 24 Mar 2010 Link to this post

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

  11. Simon
    Admin
    Simon avatar
    2281 posts
    Member since:
    Sep 2012

    Posted 27 Mar 2010 Link to this post

    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.

  12. Sam
    Sam avatar
    2 posts
    Member since:
    Jul 2010

    Posted 09 Sep 2010 Link to this post

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

  13. Simon
    Admin
    Simon avatar
    2281 posts
    Member since:
    Sep 2012

    Posted 13 Sep 2010 Link to this post

    Hi Sam,

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

    Greetings,
    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

  14. Richard
    Richard avatar
    1 posts
    Member since:
    Nov 2011

    Posted 16 Dec 2011 Link to this post

    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?

  15. Kalina
    Admin
    Kalina avatar
    918 posts
    Member since:
    Dec 2013

    Posted 21 Dec 2011 Link to this post

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

  16. Nsi
    Nsi avatar
    6 posts
    Member since:
    Oct 2011

    Posted 03 Aug 2012 Link to this post

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

  17. Kalina
    Admin
    Kalina avatar
    918 posts
    Member since:
    Dec 2013

    Posted 07 Aug 2012 Link to this post

    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
    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.

  18. Nsi
    Nsi avatar
    6 posts
    Member since:
    Oct 2011

    Posted 07 Aug 2012 Link to this post

    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.

  19. Kalina
    Admin
    Kalina avatar
    918 posts
    Member since:
    Dec 2013

    Posted 10 Aug 2012 Link to this post

    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

    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.

  20. Jon
    Jon avatar
    5 posts
    Member since:
    Nov 2011

    Posted 09 Nov 2012 Link to this post

    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.

  21. Kalina
    Admin
    Kalina avatar
    918 posts
    Member since:
    Dec 2013

    Posted 12 Nov 2012 Link to this post

    Hello Jon,

    Thank you for posting your solution for the community.

    Best regards,
    Kalina
    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.

Back to Top