[Solved] RadComboBox custom search

[Andrew Short]

I am using the RadComboBox to create a custom search tool.  The EnableLoadOnDemand works great, but for performance reasons I need it to not search after ever character.  Instead I have come up with a solution that only searches when the user presses the down arrow to open the drop down.

Now I would like the same functionality when the user presses the arrow or is typing then presses ENTER.  I am having issues having the OnClientTextChanged handler firing every time, so is there an easier way to do this?

Thanks.

 

 

<telerik:RadComboBox ID="rcbFleet" runat="server" Text="Enter Vehicle# To Search" Width="100%" HighlightTemplatedItems="true" EnableLoadOnDemand="true" Skin="Default"

 

 

 

 

 

OnClientSelectedIndexChanging="HandleEndChanging_rcbFleet"

 

 

 

 

 

OnClientDropDownOpening="OnClientDropDownOpening"

 

 

 

 

 

OnClientItemsRequesting="OnClientItemsRequesting"

 

 

OnClientKeyPressing="KeyPress_Search">

 

 

function OnClientDropDownOpening(sender, eventArgs)

 

{

 

if (sender.get_text().indexOf("Enter ") == 0) {

 

sender.set_text(

"")

 

}

 

if (sender.get_text().length < 1)

 

{ eventArgs.set_cancel(

true) }

 

 

else if(!eventArgs.get_domEvent())

 

{ eventArgs.set_cancel(

true) }

 

 

else {

 

requestItems =

true

 

 

 

 

sender.requestItems(sender.get_text(),

false)

 

}

 

}

 

 

function OnClientItemsRequesting(sender, eventArgs)

 

{

sender.hideDropDown()

eventArgs.set_cancel(!requestItems)

}

[Simon]

Hello Andrew Short,

You could achieve your goal by doing the following:

• Set EnableLoadOnDemand to false
• Handle the OnKeyPressing event and request Items if 'Enter' is the pressed key

  function onKeyPressing(sender, eventArgs)
  {
      var keyCode = eventArgs.get_domEvent().keyCode;
  
      if (keyCode == 13)
      {
          alert('enter');
      }
  }

I hope this gets you started.
Greetings,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Andrew Short]

Great I almost have a working solution.  Now, everything works except the drop down flickers when the user presses enter in the combo box instead of simply opening, despite the fact that I have CloseDropDownOnBlur="false".  I am using version 2008.3.1105.20 of the Telerik.Web.UI.dll.  Any ideas?

 

<telerik:RadComboBox ID="rcbFleet" runat="server" Text="Enter Vehicle# To Search" Width="100%"

 

 

HighlightTemplatedItems="true" EnableLoadOnDemand="false" Skin="Default" AllowCustomText="true"

 

 

OnClientSelectedIndexChanging="HandleEndChanging_rcbFleet"

 

 

OnClientDropDownOpening="OnClientDropDownOpening"

 

 

CloseDropDownOnBlur="false"

 

 

OnClientKeyPressing="KeyPress_Search">

 

 

function OnClientDropDownOpening(sender, eventArgs)

 

{

 

if (sender.get_text().indexOf("Enter ") == 0) {

 

sender.set_text(

"")

 

}

 

if (sender.get_text().length < 1)

 

{ eventArgs.set_cancel(

true) }

 

 

else {

 

sender.requestItems(sender.get_text(),

false)

 

}

 

}

 

 

function KeyPress_Search(sender, eventArgs) {

 

 

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

 

sender.set_closeDropDownOnBlur(

false)

 

 

//sender.requestItems(sender.get_text(), false)

 

sender.showDropDown()

}

}

[Simon]

Hi Andrew Short,

Since the drop down of the ComboBox closes itself as soon as an AJAX (Load on Demand) request is made to the server you may have to change your approach a bit.

Please consider the following code (handling of the OnClientItemsRequested event also covered):

function OnClientDropDownOpening(sender, eventArgs)
{
    if (sender.get_text().indexOf("Enter ") == 0) {
        sender.set_text("");
    }

    if (sender.get_text().length < 1) {
        eventArgs.set_cancel(true);
    }
    else if (sender.get_items().get_count() == 0) {
        sender.requestItems(sender.get_text(), false);
    }
}

function KeyPress_Search(sender, eventArgs) {
    if (eventArgs.get_domEvent().keyCode == 13) {
        sender.requestItems(sender.get_text(), false);
    }
}

function onItemsRequested(sender, eventArgs)
{
    sender.showDropDown();
}

Please try this and let me know if it is useful.

All the best,
Simon
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.