We have a legacy application in ASP .NET / C# using Infragistics35.Web.v10.3, Version=10.3.20103.1013.
The WebCombo control used in it works fine in IE8, but not in IE9 - 11 and Chrome.
So we thought of using WebDropDown which is IE 9 - 11 and Chrome compatible.
But we cannot find it in Infragistics35.Web.v10.3, Version=10.3.20103.1013 , whereas it is available in Infragistics35.Web.v9.2, Version=9.2.20092.1003. Refer : http://forums.asp.net/t/1589454.aspx?DropDown+Control+filled+by+Server+then+opened+in+client
Please help.
Hello Madhuchhanda Roy,
Thank you for posting on our forums.
Simply migrating to the WebDropDown control with Infragistics.Web.v10.3 may not give you complete support for IE 9-11 and Google Chrome. If you wish to have support for the latest browsers, I recommend downloading the latest version of our product (currently Infragistics for ASP.NET 2014 Volume 2).
If you would like to learn more about what versions of our products are compatible with the various browsers that are used, please refer to the Supported Environments page on your website.
Please let me know if you have any questions regarding this matter.
Hi,
As per your suggestion, I am tryng to evaluate the upgradation of WebCombo with WebDropDown using the latest trial version available in your website. (We will purchase the license if the upgradation works in IE 9 - 11 and Chrome as it used to woek in IE 8).
The required functionality is to type minimum of 3 letters in the textbox of the dropdown, fetching the corresponding data starting with those 3 or more letters asynchronously, display in a grid attached below the combo. Selecting one row in the combo gives the column values of the selected rows. If the typed value in the combo is deleted, the grid rows are removed.
Existing code for
1. Default.aspx :
<igcmbo:webcombo id="wc" runat="server" version="4.00" CssClass="comboStyle" Width="175px" Height="18px" ComboTypeAhead="Suggest" EnableProgressIndicator="false" Editable="true" OnInitializeLayout="wc_OnInitializeLayout" OnSelectedRowChanged="wc_OnSelectedRowChanged">
<DropDownLayout DropdownWidth="400px" RowHeightDefault="20px" BorderCollapse="Separate" Version="4.00" RowSelectors="No">
<HeaderStyle CssClass="gridHeader" BackColor="#2B64A7" Font-Bold="True" />
<FrameStyle CssClass="comboFrameStyle" Width="175px" Height="130px" Cursor="Hand"></FrameStyle>
<RowStyle CssClass="gridDefaultRow"/>
<RowAlternateStyle CssClass="gridAlternateRow"></RowAlternateStyle>
<SelectedRowStyle CssClass="comboSelectedRow"></SelectedRowStyle>
</DropDownLayout>
<ClientSideEvents EditKeyUp="wcVesselName_EditKeyUp" AfterSelectChange="wcVesselName_AfterSelectChange" />
<ExpandEffects ShadowColor="LightGray" />
</igcmbo:webcombo>
2. Default.aspx : In <script> section :
function wc_EditKeyUp(webComboId,newValue,keyCode)
{
GetAsyncData(webComboId,newValue,keyCode,"ID,NAME,ID_NAME,IMO,SIZE",5,"GetDataForWebCombo.aspx?columnName="+document.getElementById('<%=ddlName.ClientID%>').value+"&searchType="+document.getElementById('<%=ddlType.ClientID%>').value+"&package=Detail&searchValue=");
}
function wc_AfterSelectChange(webComboID)
var combo = igcmbo_getComboById(webComboID);
var index = combo.getSelectedIndex();
var grid = combo.getGrid();
var row = grid.Rows.getRow(index);
if(row != null)
if(row.getCellFromKey("ID").getValue() != null)
document.getElementById('<%=hfID.ClientID%>').value = row.getCellFromKey("ID").getValue();
3. In a javascript file FetchData.js :
function GetAsyncData(webComboId,newValue,keyCode,keyFields,columnCount,searchURL)
//Create object of the webcombo
oWebCombo1 = igcmbo_getComboById(webComboId);
if (!newValue)
//Clear out any rows in the grid, prepare for search results.
while(oWebCombo1.grid.Rows.length > 0)
oWebCombo1.grid.Rows.remove(0);
return;
//Process the request only if a minimum of 3 characters are entered and the last character is not a blank space
if (newValue.length >= 3 && newValue.charAt(0) != '%')
//Process the request for only acceptable ASCII codes. Keys like "Backspace", "Delete", "Home", "End", "Arrow Keys", etc do not make valid entries
if ((keyCode != 0) && (keyCode != 17) && (keyCode != 18) && (keyCode != 20) && (keyCode != 35) && (keyCode != 36) && (keyCode != 37) && (keyCode != 38) && (keyCode != 39) && (keyCode != 40))
//Unescape the entered value
newValue = unescape(newValue);
//Split the "keyFields" input, this input will have the column names that would be needed to create a row of data in the webcombo
var keyArray;
keyArray = keyFields.split(",");
//Check if the length of comma separated values match with the "columnCount" input. Validate the request only if there is a exact match.
if(keyArray.length == columnCount)
newValue=unescape(newValue);
//If we're waiting for a response, cancel it - we have a new query.
CancelCurrentRequest();
//Hook up the asynch handler.
xmlReq.onreadystatechange=
function()
//xmlReq.readyState of 4 depicts that the data has been completely transferred
//xmlReq.status of 200 depicts the HTTP status code for OK
if(xmlReq.readyState==4 && xmlReq.status == 200)
//Capture the trasferred data in XML doc
var xmlDoc=xmlReq.responseXML;
//Check the xml document for valid data
if(xmlDoc!=null&&xmlDoc.firstChild!=null )
xmlDoc=xmlDoc.firstChild;
//Create rows in the webcombo with the data recieved. One row will be created in the webcombo for each node in the xml document
for(var i=0; i < xmlDoc.childNodes.length; i++)
//Adding a new row
var row = oWebCombo1.getGrid().Rows.addNew();
var arrCount;
arrCount = 0;
//Popultate column values for each row.
while(arrCount < columnCount)
row.getCellFromKey(keyArray[arrCount]).setValue(unescape(xmlDoc.childNodes[i].getAttribute(keyArray[arrCount])));
arrCount = arrCount + 1;
//Set the webcombo to expand and display the data
oWebCombo1.setDropDown(true);
//By default none of the rows are to be selected
oWebCombo1.setSelectedIndex(-1);
oWebCombo1.focus();
else
//Append the current time to the url, so that it does not fetch from the previous cache.
var objDate = new Date();
searchURL = searchURL+newValue+'&searchTime='+objDate.getTime();
//Open a connection to our ASPX page with the specified query to get the results asynch.
xmlReq.open("GET",searchURL,true);
//Send the request.
xmlReq.send(null);
//If the user enters invalid character then clear the existing grid
while(oWebCombo1.grid.Rows.length > 1)
//If the user enters less than 3 characters then cleat the existing grid
4. GetDataForWebCombo.aspx.cs :
protected void Page_Load(object sender, EventArgs e)
string stringSearchKey;
StringBuilder stringXmlBuilder = new StringBuilder();
DataSet objDataSet = new DataSet();
try
if (Request.QueryString["package"] != null)
stringSearchKey = Request.QueryString["searchValue"];
switch (Request.QueryString["package"])
case "Detail":
TblDetail objTblDetail = new TblDetail();
objDataSet = objTblDetail.SearchDataSetLoad(Request.QueryString["columnName"], stringSearchKey, Request.QueryString["searchType"]);
break;
if (Request.QueryString["package"].Trim() != "Example")
if (objDataSet != null && objDataSet.Tables[0].Rows.Count > 0)
stringXmlBuilder.Append("<rows>");
foreach (DataRow objDataRow in objDataSet.Tables[0].Rows)
stringXmlBuilder.Append("<row ID='" + HttpUtility.HtmlEncode(objDataRow[0].ToString().Trim()) + "' NAME='" + HttpUtility.HtmlEncode(objDataRow[1].ToString().Trim()) + "' ID_NAME='" + HttpUtility.HtmlEncode(objDataRow[2].ToString().Trim()) + "' IMO='" + HttpUtility.HtmlEncode(objDataRow[3].ToString().Trim()) + "' SIZE='" + HttpUtility.HtmlEncode(objDataRow[4].ToString().Trim()) + "' />");
stringXmlBuilder.Append("</rows>");
Response.ContentType ="text/xml";
Response.Write(stringXmlBuilder.ToString());
Response.Flush();
Response.Close();
catch (Exception ex)
{ }
///////////////////////
Please help me write equivalent code for WebDropDown.
Thank you in advance.
In a nutshell, the desired functionality is :
Initially there is an empty dropdownbox. Whenever the user types 3 or more letters in the dropdownbox, corresponding data is fetched from database asynchronously and shown in a multicolumn grid attached below the dropdownbox. When the user deletes all the letters typed or if the number of letter present in the box is less than 3, all the rows are removed from the grid.
This should be basically an autocomplete box which expands in a multicolumn grid. It should work in IE 9 - 11 and Chrome.
After reviewing the details you've provided, it appears to me that you're trying to implement a custom approach for obtaining Lazy Loading on the WebDropDown. Lazy Loading is a built in feature of the WebDropDown, however you wish to encompass this within a "multi-column" grid; which is not built in. More specifically, the WebDropDown provides a multi-column grid in its container with the use of a Template ( as demonstrated in this sample). To learn more about the Templating feature, please review the Templating documentation. The WebDropDown doesn't manage the Lazy loading of the WebDataGrid automatically; for this, you would need to use the features of the WebDataGrid. I recommend using a combination of these features to obtain the behavior you've described with the WebDropDown.
Let me explain:1. Create a WebDropDown with a WebDataGrid in the DropDownContainer using its available Templating feature. 2. Use the available Lazy Loading feature to perform your custom AJAX call in the WebDropDown's DropDownOpening and/or ValueChanging client-side event, respectively. 3. Use the available client-side binding features of the WebDataGrid to bind the data object (JSON) to the WebDataGrid (here is an example).4. Use the available Remove() method for the WebDataGrid GridRowCollection to remove the rows on the client (use a for loop to iterate through the entire collection). This can be done if the value.length is less than 3.