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.

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))

        {

//Clear out any rows in the grid, prepare for search results.

while(oWebCombo1.grid.Rows.length > 0)

            {

                oWebCombo1.grid.Rows.remove(0);

            }

//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;

//Clear out any rows in the grid, prepare for search results.

while(oWebCombo1.grid.Rows.length > 0)

                            {

                                oWebCombo1.grid.Rows.remove(0);

                            }

//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

                        {

                            oWebCombo1.setDropDown(true);

                            oWebCombo1.focus();

                        }

                    }

                }

               //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

       else

        {

       //Clear out any rows in the grid, prepare for search results.

       while(oWebCombo1.grid.Rows.length > 1)

            {

                oWebCombo1.grid.Rows.remove(0);

            }

       return;

        }

    }

//If the user enters less than 3 characters then cleat the existing grid

else

    {

//Clear out any rows in the grid, prepare for search results.

while(oWebCombo1.grid.Rows.length > 0)

        {

            oWebCombo1.grid.Rows.remove(0);

        }

return;

    }

}

    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>");

switch (Request.QueryString["package"])

                           {

case "Detail":

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()) + "' />");

                                    }

break;                               

                            }

                            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.