Using filters to display data that matches certain criteria in the Grid

Similar to sorting columns in a Grid, you can update the Grid content by applying a filter. By applying a filter on the column, users will be able to search relevant data in the Grid that matches some criteria.

How to do it…

To make the columns in the Grid filterable, set the configuration option, filterable, to true, as shown in the following line of code. Similar to the sortable option, all columns in the Grid will be available for filtering by default. If you want some of the columns to not be available for filtering, then set filterable as false under columns.

filterable: true

How it works…

When you mark the columns for filtering, you will see a filter icon for each of the columns in the Grid.

When you click on it, you will be presented with a set of options that will allow you to get filtered data.

By default, users will be presented with two conditions to enter in the search criteria. In this example, the user has selected contain from the dropdown and specified the Godfather text. On clicking on the Filter button, the Grid will be updated to show those movies that contain the name Godfather. In this example, two rows will be shown, as shown in the following screenshot:

After applying the filter, you will see that the Grid gets updated and lists only two rows. The column's filter icon now has a white background, which indicates that a filter has been applied on the column. To clear the filter, click on the same filter icon and select the Clear option. This will clear the filter and show the entire Grid. When applying a filter, apart from specifying the contains condition, a user will have options to specify it as Is equal to, Is not equal to, Starts with, Does not contain, and Ends with.

Now, when you try to apply a filter on the second column, that is, Year, you will see that the Grid will not get updated and will throw the Uncaught TypeError: Object 1994 has no method 'toLowerCase error in the console. The library assumes that all columns in the Grid are of the string type and hence the error.

To get around this, define a schema in the DataSource object, as shown in the following code snippet:

dataSource: {
  transport: {
    read: 'http://localhost/kendo/code/chapter2/remote.json'
  },

  schema: {
    model: {
      fields: {
        movieName: { type: "string" },
        year: { type: "number" },
        rating: { type: "number" }
      }
    }
  }
}

This will instruct the framework to use the correct data type when applying the filter on columns.

Here, the framework sees that the Year field is of number type and shows the filter criteria with different conditions in the dropdown. The list contains the Is equal to, Is not equal to, Is greater than, Is greater than or equal to, Is less than, and Is less than or equal to conditions.

There's more…

In the previous example, when you click on the filter icon on a column, you will see two criterias being shown. Along with this, you can specify the logical operation (AND or OR) to be performed. More often than not, you would like only one criterion to be specified. The filter criteria can be configured to show only one criterion by setting the extra configuration option to false:

filterable: {
  extra: false
}

Now, only one dropdown that lists the criteria will be shown, as displayed in the following screenshot:

Also, note that the search criteria has various operators, as mentioned earlier. The set of operators can be configured by specifying this in the filterable configuration, as shown in the following code snippet:

filterable: {
   extra: false,
   operators: {
      number: {
         eq : 'Is equal to',
         neq: 'Is not equal to'
      }
   }
}

Here, the operators object specifies the set of operators to be displayed for each datatype. In this case, for the number datatype, the set of operators include Is equal to and Is not equal to, as shown in the following screenshot: