Hi, I am using WebDropDown (WDD) to perform a TypeAhead search. I have 10000 records in the database. On page load, I retireve only first 20 records (to avoid the performace hit on the page) and bind it to the WDD. When the user types any text into the WDD, my objective is to search for matching records in the database and re-bind the filtered matching results to the WDD so user can select from the filtered results.I used the following approach to populate the data into the WDD...<ig:WebDropDown ID="igSearchCombo" runat="server" Width="400px"DisplayMode="DropDown" EnableCustomValues="true" AutoSelectOnMatch="false" AutoFilterQueryType="Contains" EnableLoadOnDemand="true" EnableAutoCompleteFirstMatch="false" EnableAutoFiltering="Server" ValueField="accountid" TextField="name" DataKeyFields="id"><ClientEvents InputKeyUp="igSearchCombo_InputKeyUp" /></ig:WebDropDown>function igSearchCombo_InputKeyUp(sender, eventArgs){ //debugger; var webCombo = sender.get_id(); var newValue = sender.get_previousValue(); xmlReq = null; if (window.XMLHttpRequest) xmlReq = new XMLHttpRequest(); else if (window.ActiveXObject) xmlReq = new ActiveXObject("Microsoft.XMLHTTP"); var query = newValue && newValue.length && newValue.length > 0 ? newValue : ""; xmlReq.open("GET", "MySearchPage.aspx?query=" + search, true); xmlReq.send(null);}In the code-behind, I use the following to bind the resultset to WDD.protected void Page_Load(object sender, EventArgs e){string searchStr = Request.QueryString["query"];using (MyConnection){ if (searchQry != null) { query = "SELECT top 20 name, id FROM MyTable WHERE name like '" + searchStr + "%' ORDER BY name ASC"; } SqlCommand myCommand = new SqlCommand(query, myConnection); myCommand.CommandTimeout = 120; myCommand.CommandType = CommandType.Text; SqlDataAdapter myAdapter = new SqlDataAdapter(); myAdapter.SelectCommand = myCommand; myAdapter.Fill(MyDataTable); myAdapter.Dispose();}igSearchCombo.DataSource = dtRelationships;igSearchCombo.DataBind();}Issue: 1. When entering text into the WDD, I see my code-behind code is called and new resultset is retrived, but it does not rebind to the WDD. The WDD still shows old data i.e. first 20 records bound on initial load which gets filtered matching to the entered text. Can someone please suggest what am I doing wrong?2. In the clientside API, in keyUp event, when I check the sender.get_currentValue(), I do not get the currently entered text..it always returns undefined. Whereas, the sender.get_previousvalue() shows the just previous text typed into the WDD. Since the event is fired on each keyup, the previousText is always one character less than the current search query. Is this a bug with sender.get_currentValue()?
Hello a105019,
When you set EnableAutoFiltering="Server" when you change the value of the web drop down an ajax request will automatically be send to the server triggering the ItemsRequested event. In it you can get from the event Arguments the current value and filter manually based on it. So you don’t need to manually trigger a request to the server. You just need to handle the ItemsRequested and move in it the logic for the filtering.
Also when you have load on demand enabled ( EnableLoadOnDemand="true" ) only part of the data will be retrieve and only the visible records will be retrieved on the initial load so you won’t get a performance hit. You can provide the whole data without concerning for the performance. For more information on load on demand refer to:
http://help.infragistics.com/NetAdvantage/ASPNET/2011.1/CLR4.0/?page=WebDropDown_Load_on_demand.html
Regarding the current value. You can get it in the Value changed client side event. In it that value will be already set so you can get it with get_currentValue() . During InputKeyUp it is not set yet.
I’m attaching a sample with autofiltering for your reference. Let me know if you have any questions or concerns.
Best Regards,
Maya Kirova
Developer Support Engineer
Infragistics, Inc.
http://es.infragistics.com/support
Hi, I tried the code. It worked great. Thank you.
One follow-up question, I want to control the behavior of WDD so that on each typing, the WDD does not trigger the data filtering. Instead I want to provide a lag of one second after the last user mouse-up, so the filtered data is retrieved only after user has entered a possibly meaningful search criteria and not one single character per say.
Any suggestions on how I could achieve this?
You can disable the autofiletring(EnableAutoFiltering="Off") and manually call the loadItems method of the drop down to force the ItemsRequested server side event. So for example you can make a call with setTimeout from the event you want to trigger the filtering from. For example:
function MouseUpHandler(e) {
if (e.target.tagName == "INPUT") {
setTimeout("RequestItems();", 1000);
}
In that event you need to make a check whether the previous asynch request has returned (if there was a previous one) and call loadItems . The first paramether should be the current value. This will be the value passed to the ItemsRequested event Argument e.Value. So for example:
var passedReq = false;
function igSearchCombo_AJAXResponse(sender, eventArgs)
{
///<param name="sender" type="Infragistics.Web.UI.ControlMain"></param>
///<param name="eventArgs" type="Infragistics.Web.UI.AJAXResponseEventArgs"></param>
//checks if the request has returned.
passedReq = false;
function RequestItems() {
if (!passedReq) {
//this check is to prevent multiple requests getting send before the previous ones returning
passedReq = true;
var wdd = $find("igSearchCombo");
wdd.loadItems(wdd.get_currentValue(), true);
You can do a similar call to force filtering from other events as well depending on what behavior you’d like to get.
Refer to the attached sample and let me know if you have any further questions.