This is a migrated thread and some comments may be shown as answers.

Autocomplete RadCombobox with multicolumn

19 Answers 714 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Raj asked on 12 Jan 2009, 04:45 AM

Hi
I use a web service to populate the values in the RadCombo box. This RadCombobox has 3 columns. Which is defined in the header template (Please see the code). My problem is that I don't know how to organize the web service response to the corresponding matching columns defined in the header template. ItemTemplate sounds like useless here. It does nothing. So all I want is 3 columns defined in the radCombobox and using the webservice to get data. Please help!!!

Please see below.

Web Service : CompanySelector.asmx

[WebMethod(CacheDuration = 60, EnableSession = true)]

public RadComboBoxItemData[] GetSystemCompanies()

{

string dataDomain= "<DataDomain><CountryCode>AU</CountryCode></DataDomain>";

int maxItemsToReturn = 25;

string prefixText = "";

DataTable dataTable = GetPrefixDataTableForTheDataDomain(dataDomain, prefixText, maxItemsToReturn);

List<RadComboBoxItemData> items = new List<RadComboBoxItemData>(dataTable.Rows.Count);

foreach (DataRow row in dataTable.Rows)

{

RadComboBoxItemData raditem = new RadComboBoxItemData();

raditem.Text = row["RegCode"].ToString() + "\t" + row["CompanyName"].ToString() + "\t" + row["CountryCode"].ToString();

raditem.Value = row["RegCode"].ToString() + "\t" + row["CompanyName"].ToString() + "\t" + row["CountryCode"].ToString();

items.Add(raditem);

}

return items.ToArray();

}

Defualt.ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

        function itemRequesting(sender, eventArgs) {
            var context = eventArgs.get_context();
            context["Filter"] = sender.get_text();
        }

</script>

19 Answers, 1 is accepted

answered on 21 Jan 2009, 12:24 AM

Hi
Can someone please help!!! We are excited about using your controls but we need help what we need to achieve.

If I'm using web services for the auto complete drop down, can you please tell me how can get the auto complete behavior? Ultimately what I want to achieve is multicolumn autocomplete Telerik drop down using web service.
Any of the Telerik drop down demos in your web site doesn’t explained that.

For example please see below
.<WebServiceSettings Method="GetCompanyNames" Path="Products.asmx" />
How can I pass a parameter to the GetCompanyNames web method so I can only get the result start with latter ‘A’ ?

Please see my code below (the reference files are in the library which Yana provided)

ASPX
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ComboBox.WebService.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Multi-Column Client Side Combobox</title>
    <script type="text/javascript">
        var cb;
        function cb_onDataBound(pComboboxItem, pDropDownLine) {
            var customAttributes = pComboboxItem.get_attributes();

            pDropDownLine.update(
                '<span class="column" style="width:180px;">' + pComboboxItem.get_text().truncate(30,'[...]') + '</span>'
            );
        }
        function pageLoad(sender, args) {
            initComboExtensions();
            cb = $find("RadCompanySelector");
            cb.onDataBound = cb_onDataBound;
        }
    </script>
    <style type="text/css">
        .column
        {
            float:left;
        }

        #CompanySelector
        {
            margin-left: 5px;
        }
        #CompanySelectorResultsHeaders
        {
            background-color: #F1F2F4;
            width: 392px;
            text-align: left;
            margin: 0px;
        }
        #CompanySelectorResultsHeaders td
        {
            border: none;
            padding: 3px 4px;
        }
        #CompanySelectorResultsHeaders .CompanyCodeColumn
        {
            width: 85px;
        }
        #CompanySelectorResultsHeaders .CompanyNameColumn
        {
            width: 239px;
        }
        #CompanySelectorResultsHeaders .CountryColumn
        {
            width: 43px;
        }
        table.CompanySelectorResults
        {
            width: 396px;
            margin: 0;
            cursor: pointer;
        }
        table.CompanySelectorResults td
        {
            border: none;
            margin: 0;
            padding: 6px;
            text-align: left;
            white-space: normal;
        }
        table.CompanySelectorResults .CompanyCodeColumn
        {
            width: 75px;
        }
        table.CompanySelectorResults .CompanyNameColumn
        {
            width: 225px;
        }
        table.CompanySelectorResults .CountryColumn
        {
            width: 43px;
        }
        table.CompanySelectorResults:hover td
        {
            color: #000;
            margin: 0;
            text-decoration: underline;
            background-color: #F1F2F4;
        }
        #CompanySelectorButtons
        {
            margin-top: 7px;
            float: right;
        }
        .RadComboBoxDropDown_CompanySelector
        {
            position: absolute;
            background: #fff;
            border: 1px solid #c6c7d2;
            border-top-color: #83868d;
            cursor: default;
            font-size: 11px;
        }
        .RadComboBoxDropDown_RadComboBox1 .rcbItem, .RadComboBoxDropDown_RadComboBox1 .rcbHovered
        {
            padding: 0 0 0 3px;
            background-color: #fff;
        }

    </style>
</head>
<body>
<form runat="server" id="mainForm" method="post" style="width: 100%">
  <asp:ScriptManager ID="ScriptManager" runat="server" >
         <Scripts>
                <asp:ScriptReference Path="~/js/prototype-1.6.0.2.js" />
                <asp:ScriptReference Path="~/js/comboClientSide.js" />
            </Scripts>
        </asp:ScriptManager>

  <telerik:RadComboBox runat="server"
      ID="RadCompanySelector"
      Skin="Vista"
      Width="420px"
      ShowToggleImage = "false"
      EnableVirtualScrolling="true"
      OnClientItemsRequesting ="OnClientItemsRequesting"
      OnClientItemsRequested="OnClientItemsRequested"
      OnClientDropDownOpening="OnClientDropDownOpening"
      EnableLoadOnDemand="true" AllowCustomText = "true" EnableEmbeddedSkins="true" NoWrap = "true">
      <HeaderTemplate>
       <table id="CompanySelectorResultsHeaders">
                    <tr><td class="CompanyNameColumn"><b>Name</b></td>
                    </tr>
                </table>
      </HeaderTemplate>
        <WebServiceSettings Method="GetCompanyNames" Path="Products.asmx" />
  </telerik:RadComboBox>
</form>

</body>
</html>

ASMX / web service file

using System;
using System.Collections;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.Services.Protocols;
using Telerik.Web.UI;
using System.Web.Script.Serialization;
using System.Linq;

[ScriptService]
public class Products : System.Web.Services.WebService
{
    [WebMethod]
    public RadComboBoxData GetCompanyNames(RadComboBoxContext context)
    {
        //RadComboBoxContext context1 = new JavaScriptSerializer().ConvertToType<RadComboBoxContext>(context);
        string appUserDataDomain = "<Domain><Country>AU</Country></Domain>";
        int maxItemsToReturn = 25;
        string prefixText = "";

DataTable data = GetPrefixDataTableForTheDataDomain(appUserDataDomain, prefixText, maxItemsToReturn);

List<RadComboBoxItemData> result = new List<RadComboBoxItemData>(data.Rows.Count);

        RadComboBoxData comboData = new RadComboBoxData();
        try
        {

            result = new List<RadComboBoxItemData>(data.Rows.Count);
            int i = 0;
            foreach (DataRow row in data.Rows)
            {

                RadComboBoxItemData itemData = new RadComboBoxItemData();

                //itemData.Text = data.Rows[i]["RegIssuerCode"].ToString();
                //itemData.Value = data.Rows[i]["RegIssuerCode"].ToString();
                //itemData.Attributes["IssuerName"] = data.Rows[i]["IssuerName"].ToString();
                //itemData.Attributes["CountryCode"] = data.Rows[i]["CountryCode"].ToString();
                //result.Add(itemData);

                itemData.Text = data.Rows[i]["IssuerName"].ToString();
                itemData.Value = data.Rows[i]["IssuerName"].ToString();
                result.Add(itemData);

i++;
}

            if (data.Rows.Count > 0)
            {
                comboData.Message = String.Format("Items <b>1</b>-<b>{0}</b> out of <b>{1}</b>", "", data.Rows.Count.ToString());
            }
            else
            {
                comboData.Message = "No matches";
            }
        }
        catch (Exception e)
        {
            comboData.Message = e.Message;
        }

        comboData.Items = result.ToArray();
        return comboData;
    }

private DataTable GetPrefixDataTableForTheDataDomain(string appUserDataDomain, string prefix, int maxItemsToReturng)
{

// Database connection and return the datatable for macthing prefix

return datatable;
}

}

answered on 22 Jan 2009, 01:56 PM

Hi Raj,

I am sorry I didn't reply earlier.

You get all the data for combobox in GetCompanyNames method with this line:

    
            DataTable data = GetPrefixDataTableForTheDataDomain(appUserDataDomain, prefixText,

             maxItemsToReturn);

you should use "context.Text" in your query to the database in order to select only those items which correspond to some conditions like in the example:

    
             string sql = "SELECT * from Customers WHERE CompanyName LIKE '"   
        
            + context.Text + "%'";

please modify your query and let us know how it goes.

All the best,
Yana
the Telerik team

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

answered on 28 Jan 2009, 02:38 AM

Thanks Yana.

All good. Thanks alot. One last question. Please see the code below. The order of the columns are Code, Company Name and Country, The prepopulating for the text is working for the code, but not for the name. So how to get the pre populating (autocompletion) for the name instead of the code without changing the columns order. So I want to see the order as Code, Company Name, country (as it is now), and prepopulating the company name instead of the code (currently the code prepopulate in the text box)

Thanks

Regards,

Raj

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ComboBox.WebService.DefaultCS" %>

            pDropDownLine.update(
                  '<span class="column" style="width:93px;">' + pComboboxItem.get_text().truncate(30, '[...]') + '</span>'
                + '<span class="column" style="width:280px;">' + customAttributes.getAttribute("CompanyName") + '</span>'
                + '<span class="column" style="width:20px;">' + customAttributes.getAttribute("CountryCode") + '</span>'
            );
        }
        function pageLoad(sender, args) {
            initComboExtensions();
            cb = $find("RadCompanySelector");
            cb.onDataBound = cb_onDataBound;
        }
    </script>
    <style type="text/css">
        .column
        {
            float:left;
        }
    </style>
</head>
<body>
<form runat="server" id="mainForm" method="post" style="width: 100%">
  <asp:ScriptManager ID="ScriptManager" runat="server" >
         <Scripts>
                <asp:ScriptReference Path="~/js/prototype-1.6.0.2.js" />
                <asp:ScriptReference Path="~/js/comboClientSide.js" />
            </Scripts>
        </asp:ScriptManager>

  <telerik:RadComboBox runat="server"
      ID="RadCompanySelector"
      Skin="Vista"
      Height="90px"
      Width="450px"
      DropDownWidth="450px"
      EnableVirtualScrolling="true"
      ChangeTextOnKeyBoardNavigation="false"
      OnClientItemsRequesting ="OnClientItemsRequesting"
      OnClientItemsRequested="OnClientItemsRequested"
      OnClientDropDownOpening="OnClientDropDownOpening"
      EnableLoadOnDemand="true"
      ShowMoreResultsBox="false"
      MarkFirstMatch= "true"
      NowRap="false"
      ShowToggleImage = "false"
      EnableEmbeddedSkins="true" >
      <HeaderTemplate>
        <table id="CompanySelectorResultsHeaders" style="width:420px;">
                    <tr>
                        <td class="column"><b>Code</b></td>
                        <td class="column" style="width:300px;" ><b>Company Name</b></td>
                        <td class="column"><b>Country</b></td>
                    </tr>
                </table>
      </HeaderTemplate>
        <WebServiceSettings Method="GetCompanyNames" Path="Products.asmx" />
  </telerik:RadComboBox>
</form>

</body>
</html>

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

[ScriptService]
public class Products : System.Web.Services.WebService
{
    /// <summary>
    ///
    /// </summary>
    /// <param name="context"></param>
    /// <returns></returns>
    [WebMethod]
    public RadComboBoxData GetCompanyNames(RadComboBoxContext context)
    {
        string dataDomain = "CountryCode>AU</CountryCode>";
        int maxItemsToReturn = 25;
        string prefixText = string.Empty;

        if (context.NumberOfItems > 0)
        {
            prefixText = "";
        }
        else
        {
            prefixText = context.Text;
        }

        bool doQuery = false;
        RadComboBoxData comboData = new RadComboBoxData();
        DataTable data = null;
        List<RadComboBoxItemData> result = new List<RadComboBoxItemData>();

        if (prefixText.Length >= 2)
        {
            doQuery = true;
        }

        if (doQuery)
        {
            data = GetPrefixDataTableForTheDataDomain(dataDomain, prefixText, maxItemsToReturn);
        }

        if (data != null && data.Rows.Count > 0)
        {
            result = new List<RadComboBoxItemData>(data.Rows.Count);
            int i = 0;
            foreach (DataRow row in data.Rows)
            {
                RadComboBoxItemData itemData = new RadComboBoxItemData();
                itemData.Text = data.Rows[i]["compCode"].ToString();
                itemData.Value = data.Rows[i]["CompanyName"].ToString();
                itemData.Attributes["IssuerName"] = data.Rows[i]["CompanyName"].ToString();
                itemData.Attributes["CountryCode"] = data.Rows[i]["CountryCode"].ToString();
                result.Add(itemData);

                i++;
            }
        }

        comboData.Items = result.ToArray();
        return comboData;
    }

answered on 09 Feb 2009, 03:53 AM

Hi Yana
Thanks so much for the assitance and we are happy with the performance and the functionality of the control. I have a one question though. I'm not sure whether this is a bug within the control itself or not. This problems happen in any RadComboBox control which has the auto complete bahaviour.

Step to reproduce"

1. Type a name in the text box. This would trigger a POST request to the web service.
2. Before the response received key in a space character. Try this few times until you don't get a reponse.
3. Now the control make infinit requests to the web server, and never stop until the control crash.(Firebug/Fiddler would show this)

So every time the loop occure it appends %20 to the request to the web server. For example context.Text = NAME%20%20%20%20%20%20

Do you aware of this issue?. Is their a fix for this? This occured in any Combo box auto completion control
POST Request copied from Fiddler :

{"context":{"NumberOfItems":0,"Text":"IBM%252525252520"}}

{"context":{"NumberOfItems":0,"Text":"IBM%25252525252525252525252525252525252525252520"}}
{"context":{"NumberOfItems":0,"Text":"IBM%252525252525252525252525252525252525252525252520"}}

Thanks again Yana!! I deas greatly appreciated.

Cheers,

Raj

answered on 10 Feb 2009, 04:31 AM

Hi Yana

We have reproduced this particular problem in the sample application you game me. It happens when there is a slow response from the sql (due to slow network connection to sql) and we send another POST request (before the previous one returned) with a space character. This is really hard to reproduce when the performance are very good. But when performance of the network connection is bad it is easy to reproduce. You need to type a name with ending space character (Eg. "IBM " ) and before the response comes remove the space character and repeatedly do this few times.

{"context":{"NumberOfItems":0,"Text":"wb%252525252525252525252525252520"}}
 {"context":{"NumberOfItems":0,"Text":"wb%252525252525252525252525252520"}}

{"context":{"NumberOfItems":0,"Text":"wb%252525252525252525252520"}}


 
 Can we please have a fix for this? We have some server which is in US and reponse time are not that great.

Accepted

answered on 10 Jan 2017, 07:41 PM

I got the same error for the rad combobox where text value returened is OLD%252525252525252520ADOPT%252525252525252520SVCS%252525252525252520RGN%252525252525252520III%252525252525252520(Orangeburg).KeyNotFoundException was unhandled by user code.

"The given key was not present in the dictonary"

string relatedValue = e.Context["RelatedValue"] != null ? e.Context["RelatedValue"].ToString() : ""; at this line.

I am working on the protected void RadComboBox1_ItemsRequested(object sender, RadComboBoxItemsRequestedEventArgs e)
{

RadComboBox comboBox = sender as RadComboBox;

//GridEditableItem dataItem = comboBox.r as GridEditableItem;

string columnName = e.Context["ColumnName"].ToString();

string relatedValue = e.Context["RelatedValue"] != null ? e.Context["RelatedValue"].ToString() : "";

}