Telerik UI for Windows 8 HTML

RadGrid supports automatic filtering of the displayed records. You can choose between applying filter expressions manually or letting the user provide filter criteria. Below you will find both scenarios explained.

Enabling Filtering for RadGrid

To allow filtering in RadGrid, set its filterable property to true. This will show a filter button in the column header. When the user clicks/taps the button, a pop-up filter item will appear for each data column. This item consists of:

  • Filter options list: A pop up containing the relevant filter functions to the current data type. If you do not provide a model for your data, you will get the options for the string data type. If in the model you specify a different data type for a given field, the filter menu shown for its corresponding column will contain a different set of functions. For example, "Is greater than" for numbers and "Is before" for dates.

    The table below this list, describes the filter functions supported by the different data types:

  • Filter value control: This will be a normal text input for string fields, a RadNumericBox for numeric fields and RadDatePicker for date fields. These are used to provide a values to filter by.

  • Filter icon: Clicking/tapping this icon triggers filtering in RadGrid in case a filter value is provided. If a filter value is not provided, the filter item is closed and the grid remains unchanged.

  • Expand/collapse button: When this button is clicked/tapped, a set of controls for adding a second filter expression is displayed, plus a two-item list that allows the user to pick a group function (AND, OR). The function will be used when grouping the two filter expressions.

  • Clear button: Used to clear the filter criteria for the column to which the filter item belongs.




Is equal to

Is equal to

Is equal to

Is not equal to

Is not equal to

Is not equal to

Starts with

Is greater than or equal to

Is after or equal to


Is greater than

Is after

Does not contain

Is less than or equal to

Is before or equal to

Ends with

Is less than

Is before

This image shows the appearance of the filter item in RadGrid:


When a column is filtered, its appearance (background and header) is changed to notify the user that it is a filtered column. This is shown in the image below:

grid-filtering 1

To disallow filtering for a certain column, make sure you set filterable.enabled to false in its options object. For an example, see the Columns article.

The following code sample shows a grid with enabled filtering, where:

  • Filtering is enabled for the grid and disabled for its first column.

  • A model is defined to specify the types of fields.

RadGrid Filtering Example Copy imageCopy
var grid1Ctrl = new Telerik.UI.RadGrid(document.getElementById("grid1"), {
    filterable: true,
    dataSource: {
        data: [
            { Product: "Southwestern Twisted Chips", Price: 6.99, AvailableSince: new Date(2012, 7, 4) },
            { Product: "Top Shelf Combo Appetizer", Price: 9.49, AvailableSince: new Date(2012, 3, 14) },
            { Product: "Blue Cheese and Hazelnut Shortbread", Price: 10.69, AvailableSince: new Date(2012, 5, 21) },
            { Product: "Avocado Feta Salsa", Price: 6.99, AvailableSince: new Date(2012, 3, 14) },
            { Product: "Red Cherry Boost", Price: 6.99, AvailableSince: new Date(2012, 2, 28) },
        schema: {
            model: {
                fields: {
                    Product: { type: "string" },
                    Price: { type: "number" },
                    AvailableSince: { type: "date" }
    columns: [
        { field: "Product", filterable: false },
        { field: "Price", format: "{0:C}" },
        { field: "AvailableSince", title: "Available Since", format: "{0:MM/dd/yyyy}" }