Telerik UI for Windows 8 HTML

Thanks to the intuitive filtering API of the underlying Telerik.Data.DataSource component, you can easily implement an external filtering scenario - you can declare controls of your choice to gather filter criteria from the user. Then, you can build filter objects and add them to the filter array of the DataSource.

The steps below will guide you through the implementation of a RadGrid that is filtered externally by a RadDropDownList and two RadNumericTextBox controls.

  1. Declare the host elements for the controls:

    HTML Copy imageCopy
    <div class="filterItem">
        <span id="categories"></span>
        <span id="priceFrom"></span>
        <span id="priceTo"></span>
        <button id="filterBtn">Filter</button>
    </div>
    <div id="grid1"></div>
  2. Define RadGrid and make sure that you specify a model for the data, so that filtering is done based on the specific data-type. In the code below, we "tell" the DataSource that the UnitPrice and CategoryID fields are numbers, so numeric filtering should be applied on them.

    JavaScript Copy imageCopy
    var grid = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
        dataSource: {
            transport: {
                read: {
                    url: "http://services.odata.org/Northwind/Northwind.svc/Products",
                    dataType: "json"
                }
            },
            schema: {
                data: "value",
                model: {
                    id: "ProductID",
                    fields: {
                        ProductName: { type: "string" },
                        UnitPrice: { type: "number" },
                        CategoryID: { type: "number" }
                    }
                }
            }
        },
        columns: [
            {
                field: "ProductName",
                title: "Product"
            },
            {
                field: "UnitPrice",
                title: "Price",
                format: "{0:C}"
            }
        ],
        height: 320
    });
    
  3. Define a RadDropDownList. If you are not going to apply initial filtering, you can specify an empty value through the optionLabel property. This will prompt the user about the purpose of the control and will prevent a mismatch between the RadDropDownList selection and the RadGrid data.

    JavaScript Copy imageCopy
    var categoriesDdl = new Telerik.UI.RadDropDownList(document.getElementById("categories"), {
        dataSource: {
            transport: {
                read: {
                    url: "http://services.odata.org/Northwind/Northwind.svc/Categories",
                    dataType: "json"
                }
            },
            schema: {
                data: "value"
            }
        },
        dataTextField: "CategoryName",
        dataValueField: "CategoryID",
        optionLabel: "Choose a category to filter by..."
    });
    
  4. Define two RadNumericTextBox controls. To sync their behavior, handle their change event and modify their min and max values accordingly. In the sample code below, we get the value of the "priceFrom" box and set it as a min value of the "priceTo" box. Then, the value of the "priceTo" box is set as a max value of the "priceFrom" box. This way the second value is always greater than or equal to the first value.

    JavaScript Copy imageCopy
    var fromNumericBox = new Telerik.UI.RadNumericBox(document.getElementById("priceFrom"), {
        min: 0,
        placeholder: "Enter min price",
        onchange: function (e) {
            document.getElementById("priceTo").winControl.min = e.target.value;
        }
    });
    
    var toNumericBox = new Telerik.UI.RadNumericBox(document.getElementById("priceTo"), {
        placeholder: "Enter max price",
        onchange: function (e) {
            document.getElementById("priceFrom").winControl.max = e.target.value;
        }
    });
    
  5. To trigger the filter action, add an event listener for the click event of the Filter button:

    JavaScript Copy imageCopy
    filterBtn.addEventListener("click", filterGrid);
    
  6. Create the logic that builds the filter objects for RadGrid's dataSource and apply filtering. Below you can see the step-by-step explanation of the following code snippet.

    1. Access all needed control instances.

    2. Create an empty array which will hold the RadGrid filter.

    3. Check if the RadDropDownList instance has a selected value. If so, push a filter object to the newly created array, using this value.

    4. Check if the two RadNumericBox controls have values and add a filter object for each that uses its value with a corresponding filter operator ("greater than or equal to" for the "priceFrom" box and "less than or equal to" for the "priceTo" box.

    5. Assign the resulting array to the grid.dataSource.filter property and refresh RadGrid, so the filter is applied.

    JavaScript Copy imageCopy
    function filterGrid() {
        var grid = document.getElementById("grid1").winControl;
        var categoriesDdl = document.getElementById("categories").winControl;
        var fromNumericBox = document.getElementById("priceFrom").winControl;
        var toNumericBox = document.getElementById("priceTo").winControl;
    
        var filter = [];
    
        if (categoriesDdl.value != "") {
            filter.push({ field: "CategoryID", operator: "eq", value: parseInt(categoriesDdl.value) });
        }
    
        if (fromNumericBox.value) {
            filter.push({ field: "UnitPrice", operator: "gte", value: fromNumericBox.value });
        }
    
        if (toNumericBox.value > 0) {
            filter.push({ field: "UnitPrice", operator: "lte", value: toNumericBox.value });
        }
    
        grid.dataSource.filter = filter;
        grid.refresh();
    }
    

The initial result of this definition looks like this:

grid-filtering-external 1

After the user specifies filter criteria and taps the Filter button, the result will be similar to the figure below.

grid-filtering-external 2

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

See Also