RadComboBox press "enter" key event

7 posts, 0 answers
  1. Tom
    Tom avatar
    3 posts
    Member since:
    Jun 2008

    Posted 05 Nov 2008 Link to this post

    Hello,

    I use RadComboBox like search enter box and would like to execute server side event when user click "enter" key inside RadComboBox. Could anyone post code how to do that?

    Thank you very much.
    Regards,
    Tomas
  2. Rosi
    Admin
    Rosi avatar
    2527 posts

    Posted 05 Nov 2008 Link to this post

    Hello Tom,

    Please review our online example Server Events.

    Kind regards,
    Rosi
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gabriel
    Gabriel avatar
    33 posts
    Member since:
    Apr 2011

    Posted 09 May 2011 Link to this post

    Hello,

    I know how to filter keys on the TextChanged Event in order to get if it was the entery key.

    now my particular issue:
    I am creating a User Control which contains a RadComboBox Loadable on Demand which fills data from a webService. Everything is ok here.

    I need to trigger a server event when the user presses the enter button. The problem here is that I need to invoke an event to the aspx page, not the ascx. Everything is ok here too :) (thanks to this)

    Now the problem is that this event generates too many Post-backs, I would like to somehow control the TextChanged event from the Client side and if the key pressed was the "enter" key, then trigger the server-side event. Is this possible?

    in Advance, many thanks :)
  5. Peter
    Peter avatar
    7 posts
    Member since:
    May 2008

    Posted 10 Aug 2011 Link to this post

    Hi
    I would like to support the ideas of Gabriel. Here my thoughts:
    - RadTextBox has ClientEvents, I use it as follows

     

     

    <telerik:RadTextBox Visible="false" ID="RadTextBox1" Width="270px" runat="server"

     

    CssClass="NormalTextBox" AutoPostBack="True" BorderStyle="Solid" BorderColor="Gainsboro"

     

    Font-Names="Verdana">

     

    <ClientEvents OnKeyPress="HandleEnterKeyPress" />

    </telerik:RadTextBox>

    and

    <
    script type="text/javascript">

    function HandleEnterKeyPress(sender, eventArgs) {

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

    sender.raise_Page_Load();

    }

    }

    </

    script>

    This works, I can raise a page load here.

    Lets have a look at the ComboBox.
    in an example I found the following to get a Combobox behave like autosuggestion:

    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="270px"

    EnableLoadOnDemand="true" ShowToggleImage="false" LoadingMessage="..."

    OnClientKeyPressing="onKeyPressing"

    OnClientDropDownOpening="onDropDownOpening"

    OnClientItemsRequesting="onItemsRequesting"

    OnClientBlur="onBlur">

    </telerik:RadComboBox>

    and

     

    <script type="text/javascript">

    function onKeyPressing(sender, eventArgs) {

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

    sender.raise_Page_Load(); /* fails */

    }

     

    else {

    sender.allowOpenDropDown = true;

    }

    }

     

    function onDropDownOpening(sender, eventArgs) {

    if (!sender.allowOpenDropDown || sender.get_text().length == 0)

    eventArgs.set_cancel(true);

    }

     

    function onItemsRequesting(sender, eventArgs) {

    if (sender.get_text().length == 0) {

    if (sender.get_dropDownVisible())

    sender.hideDropDown();

    eventArgs.set_cancel(true);

    }

    }

     

    function onBlur(sender) {

    sender.allowOpenDropDown = false;

    }

    </script>

     
    The problem:
    sender.raise_Page_Load() fails when enter key is pressed.

    Why is the behaviour not the same as with RadTextBox?

    In my opinion there is only a client side sender.raise_Page_Load() for
    the combobox missing, and we can implement a nice google-like autosuggestion
    function!
     
    Or, asked in another way:
    How can I raise the page load event in the onkeypressing clientside method
    of RadComboBox?

    Thanks in advance
    Peter





  6. Gabriel
    Gabriel avatar
    33 posts
    Member since:
    Apr 2011

    Posted 10 Aug 2011 Link to this post

    Hello Peter,
    I didn't remember I had posted this here. I finally solved the problem with a little trick which is not very elegant but it worked for me.

    First add a Script Manager to the page, then add a ClientTextChange event to the Rad Combo Box.
    Codes:
    JS:
    function my_rcb_TextChange(sender, args) {
        var thekey;
        if (event.keyCode) { // tweak for cross-browsing
            thekey = event.keyCode;
        }
        else // tweak for cross-browsing
            thekey = event.which;
        }
        if (thekey == 13) {
            __doPostBack('<%= my_rcb.UniqueID %>', 'enter_was_pressed');
        }
    }

    And in the Page_Load event, in code-behind add some lines like this:
    bool EnableEventoOnEnter = Request.Params["__EVENTARGUMENT"] == "enter_was_pressed" ? true : false;
            if (!this.Page.IsPostBack)
            {
                if (handler != null)
                {
                    this.rcb_empleados.OnClientTextChange = "my_rcb_TextChange";
                    // Add OnClientTextChange event. Use this declaration if you want to control the event only if the handler is set.
                }
            }
            // if enter was pressed and the handler is not null, then execute the handler with the expected parameters
            if (EnableEventoOnEnter && (handler != null))
            {
                handler(this.rcb_empleados, this.rcb_empleados.Text);
            }

    Any help you may need, just tell me :)
    (note that I use this as a web-user-control, so that's why it may look weird the way I call everything)


  7. Peter
    Peter avatar
    7 posts
    Member since:
    May 2008

    Posted 11 Aug 2011 Link to this post

    Hello Gabriel
    I'm working also with RadComboBox in a Web-User-Control and with Scriptmanager
    I will try your suggestions. Thank you very much.

    Nevertheless, Telerik should provide the standard basic functionality for all their controls.

    @Telerik:
    do you have a nice example for a google like autosuggestion AND pageload on
    enter key pressed on client side? This means a combination of
    - the sender.raise_Page_Load() of RadTextBox
    - and the dropdown on text enter of RadComboBox
    - without tricks and with elegant code?

    Regards
    Peter
  8. Gabriel
    Gabriel avatar
    33 posts
    Member since:
    Apr 2011

    Posted 11 Aug 2011 Link to this post

    Glad I could help

    Let me see if I can explain my code:

    The first code only filter pressed keys in order to catch a "return" key (code 13). I use .keyCode or .which because of browsers, for some browsers works one and for others work the another one. Finally, if return was pressed, I call a __doPostBack function, which forces a postback. In the server will execute the Page_Load event and in the EVENT_ARGUMENT and EVENT_TARGET you will receive the parameters you send in __doPostBack .Take a look at this: http://tipsdegabo.wordpress.com/2011/05/12/uso-de-__dopostback/ It explains the use of __doPostBack in spanish (you can use a google translator if you don't understand spanish (it's my personal blog ;) )

    You can filter Request.Params["EVENT_TARGET"] and Request.Params["EVENT_ARGUMENT"] to seek for the parameters you send from javascript. That's what I do.

    I use the "handler" because I created the event "OnEnter" in the user control. To see how to delegate events in web-user-controls, please refer to http://chiragrdarji.wordpress.com/2007/08/23/raise-event-from-user-control-to-main-page-event-delegation-from-user-control-to-aspx-page-in-aspnetc/

    I hope I answer some of the questions you may be wondering.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017