Telerik UI for Windows 8 HTML

Because of its built-in filtering capabilities, RadAutoCompleteBox is a very convenient control for external filtering of other controls. The main idea is to bind the "filtered" control to the set of data used by the RadAutoCompleteBox. What actually happens is that the ListView takes the RadAutoCompleteBox's underlying data. Technically the ListView is not filtered at any point but the visual result is comparable to filtering. This article describes a step-by-step approach for achieving this scenario.

Follow the steps below to create a WinJS.UI.ListView filtered by RadAutoCompleteBox:

  1. Define the control wrappers in HTML and any static properties of the ListView:

    Html Copy imageCopy
    <span id="autoComplete"></span>
    <div id="listView" data-win-control="WinJS.UI.ListView" data-win-options="{
        itemTemplate: FilteringListView.getTemplate
    }">
    </div>
  2. Instantiate the RadAutoCompleteBox and assign event handlers for its open and databound events:

    JavaScript Copy imageCopy
    var filterAutoComplete = new Telerik.UI.RadAutoCompleteBox(document.getElementById("autoComplete"), {
        dataSource: {
            transport: {
                read: {
                    url: "http://services.odata.org/Northwind/Northwind.svc/Customers",
                    dataType: "json"
                }
            },
            schema: {
                data: "value"
            }
        },
        dataTextField: "CompanyName",
        onopen: open,
        ondatabound: dataBound
    });
    
  3. By preventing the default action in the open event, you will stop the RadAutoCompleteBox from opening its dropdown. This way it will visually behave as a search textbox.

    JavaScript Copy imageCopy
    function open(args) {
        args.preventDefault();
    }
    
  4. Handle the databound event of RadAutoCompleteBox to refresh the ListView data source once the data in the autocomplete control is changed.

    JavaScript Copy imageCopy
    function dataBound(args) {
        var list = document.getElementById("listView").winControl;
        var listSource = new WinJS.Binding.List(args.target.dataSource.view);
        list.itemDataSource = listSource.dataSource;
    }
    
  5. You could use a function to dynamically generate the listview items template:

    JavaScript Copy imageCopy
    WinJS.Namespace.define("FilteringListView", {
        getTemplate: WinJS.Utilities.markSupportedForProcessing(function (itemPromise) {
            return itemPromise.then(function (item) {
                var el = document.createElement("div");
                el.classList.add("companyItem");
                el.innerHTML = [
                "<h3>" + item.data.CompanyName + "</h3>",
                "<p>Contact Name: " + item.data.ContactName + "</p>",
                "<p>Phone: " + item.data.Phone + "</p>"].join("");
                return el;
            })
        })
    });
    

The result will be a dynamically changed ListView, based on the value input in the RadAutoCompleteBox:

autocompletebox-howto-filter-listview

This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under AutoCompleteBox/FilteringExternalList.

See Also