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

RadComboBox press "enter" key event

6 Answers 520 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Tom
Top achievements
Rank 1
Tom asked on 05 Nov 2008, 01:05 PM
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

6 Answers, 1 is accepted

Sort by
0
Rosi
Telerik team
answered on 05 Nov 2008, 01:47 PM
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.
0
Gabriel
Top achievements
Rank 2
answered on 09 May 2011, 04:16 PM
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 :)
0
Peter
Top achievements
Rank 1
answered on 10 Aug 2011, 09:13 PM
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





0
Gabriel
Top achievements
Rank 2
answered on 10 Aug 2011, 10:08 PM
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)


0
Peter
Top achievements
Rank 1
answered on 11 Aug 2011, 09:04 AM
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
0
Gabriel
Top achievements
Rank 2
answered on 11 Aug 2011, 02:49 PM
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.
Tags
ComboBox
Asked by
Tom
Top achievements
Rank 1
Answers by
Rosi
Telerik team
Gabriel
Top achievements
Rank 2
Peter
Top achievements
Rank 1
Share this question
or