ComboBox OnClientTextChange

[Chen Jun Ying]

In this demo http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridincombobox/defaultcs.aspx?product=combobox,

it uses OnClientDropDownOpening to fire the ajax call and populate grid on demand. I would like to use OnClientTextChange instead so grid data can keep updated as user types. The issue I have is OnClientTextChange doesn't fire until the user hits Enter or clicks outside the combobox.

In the past, I use Ajax autocompleteextender to achieve that. How can i do it using radcombobox here?

 

[Kalina]

Hello Chen Jun Ying,

You can handle OnClientKeyPressing event in order to update the RadGrid content when user types in RadComboBox input:

function HandleKeyPressing(sender, args)
{
 var comboText = sender.get_text();

 if(comboText.length > 2)
 {
    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData," + comboText);
 }
 else
 {
    args.set_cancel(true);
 }
}

<telerik:RadComboBox ID="RadComboBox1" Width="320px" runat="server"
    MarkFirstMatch="True"
    AllowCustomText="True" OnClientKeyPressing="HandleKeyPressing"
    OnClientDropDownOpening="HandleOpen" ExpandAnimation-Type="None"
    CollapseAnimation-Type="None">

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

[Chen Jun Ying]

thanks for the reply Kalina.

There is an issue if I use OnClientKeyPressing here. If you type 4 letters, it will only search for the first 3 letters. If you delete a letter, it will still include deleted letter in the search string. I think OnClientKeyPressing event does not include the key pressed here. Any ideas?

[Kalina]

Hi Chen Jun Ying,

Indeed handling the OnClientKeyPressing event is not the best approach in this specific case - please excuse my omission.

I will suggest you handle pageLoad event and attach onkeyup event handler to the RadComboBox input:

function pageLoad() {
    var combo = $find("<%=RadComboBox1.ClientID %>");
    var input = combo.get_inputDomElement();
    input.onkeyup = onKeyUpHandler;
}


function onKeyUpHandler(e) {

 var combo = $find("<%=RadComboBox1.ClientID %>");
 var comboText = combo.get_text();

    if (comboText.length > 2) {
 $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadFilteredData," + comboText);
    }

}

I used the online demo that you mentioned at your previous post to make a sample page for you.
Please let me know if this was helpful.

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

[Chen Jun Ying]

thanks Kalina