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.