RadAutoCompleteBox with ClientFiltering and Web Service how to rebind client-side?

[Chill]

I have a RadAutoCOmpleteBox that is bound by a Web Service but I have client filtering set to true.

Is it possible to rebind the web service client side? I only wish to do this so I can reset the where clause on the select statement based on a client selection in another field but I only want this to happen client side and not server side.

Is there a way to fetch the web service again?

[Attila Antal]

Hi Cindy,

When binding the AutoCompleteBox to WebService, you do not need to rebind it. All you need is to change the context you send to the server and use it conditionally before fetching data and returning that back to client. 

For instance, in the Binding to Web service documentation article you will see an example how to send custom context to server. So if you want to limit the data you fetch from the database based on a second option, feel free to add it to the context as custom data and when the AutoCompleteBox calls the method, you will access this information to query the database accordingly.

Here is an example (without a database, but you will get the idea)

Note: to make this work, you will need to use the Client-Side APIs. You can see below that the selected item's value of the DropDownList is accessed by JavaScript. There is no Post Back made as it will not be necessary.

<h2>Set AutoCompleteBox Filter</h2>
<telerik:RadDropDownList ID="RadDropDownList1" runat="server" AutoPostBack="false">
    <Items>
        <telerik:DropDownListItem Text="All Items" Value="all" />
        <telerik:DropDownListItem Text="Cities" Value="city" />
        <telerik:DropDownListItem Text="Countries"  Value="country"/>
    </Items>
</telerik:RadDropDownList>

<telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" Filter="Contains" OnClientRequesting="OnClientRequesting">
    <WebServiceSettings Path="WebService.asmx" Method="GetItems" />
</telerik:RadAutoCompleteBox>

<script>
    function OnClientRequesting(sender, args) {
        var rddl =  $find("<%= RadDropDownList1.ClientID %>");
        var selectedCategory = rddl.get_selectedItem().get_value();

        args.get_context().SelectedCategory = selectedCategory;
    }
</script>

 

C# - Web Service

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
    [WebMethod]
    public AutoCompleteBoxData GetItems(RadAutoCompleteContext context)
    {
        string text = context["Text"].ToString();
        int maxResultCount = (int)context["MaxResultCount"];
        bool isCaseSensitive = (bool)context["IsCaseSensitive"];
        string selectedCategory = context["SelectedCategory"].ToString();

        var items = GetAllItems();
        // Filter the items based on the selected category
        if (selectedCategory != "all")
        {
            items = items.Where(item => item.Text.ToLower().StartsWith(selectedCategory.ToLower())).ToList(); // This is in case a Category is selected in the DropDown
        }
        // Filter the results using the user's search keywords 
        if (isCaseSensitive)
        {
            items = items.Where(item => item.Text.Contains(text)).ToList();
        }
        else
        {
            items = items.Where(item => item.Text.ToLower().Contains(text.ToLower())).ToList();
        }

        return new AutoCompleteBoxData()
        {
            Items = items.ToArray()
        };
    }
    // Returns a total of 40 items (20 Cities, 20 Countries) and sorted by the text
    private List<AutoCompleteBoxItemData> GetAllItems()
    {
        List<AutoCompleteBoxItemData> items = new List<AutoCompleteBoxItemData>();
        for (int i = 1; i <= 20; i++)
        {
            items.Add(new AutoCompleteBoxItemData() { Text = "City " + i, Value = "City" + i });
            items.Add(new AutoCompleteBoxItemData() { Text = "Country  " + i, Value = "Country" + i });
        }
        items = items.OrderBy(item => item.Text).ToList();
        return items;
    }
}

IMPORTANT: Always make sure that the user input in the context (Text, or any custom context) is sanitized on the server before using it to query the database to avoid SQL injection.

Regards,
Attila Antal
Progress Telerik