Blogs

In the latest release of jQWidgets, we improved the jQuery Grid widget by adding a new Filtering feature to it. Let’s see how to enable and disable this feature.
To enable the Grid Filtering, you need to set the ‘filterable’ property to true.

$("#jqxgrid").jqxGrid(
{
    source: source,
    filterable: true,
    columns: [
        { text: 'First Name', datafield: 'firstname', width: 100 },
        { text: 'Last Name', datafield: 'lastname', width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

Each Grid column also has a filterable property. The column’s filterable property specifies whether end-users are allowed to filter the Grid by that column. If this property is set to false, the filtering panel is not displayed when the column’s menu is opened. In the code below, the grid filtering for the ‘firstname’ and ‘lastname’ columns is disabled.

$("#jqxgrid").jqxGrid(
{
    source: source,
    filterable: true,
    columns: [
        { text: 'First Name', datafield: 'firstname', filterable: false, width: 100 },
        { text: 'Last Name', datafield: 'lastname', filterable: false, width: 100 },
        { text: 'Product', datafield: 'productname', width: 180 },
        { text: 'Order Date', datafield: 'date', width: 100, cellsformat: 'd' },
        { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
    ]
});

By default, the Grid displays a filter icon only in the header of the filtered column. However, if you want to display a filter icon in each column to point out that the grid filtering is enabled, you can set the ‘autoshowfiltericon’ property to false. The ‘showfiltercolumnbackground’ property specifies whether an additional ‘jqx-grid-cell-filter’ css class is added to the filtered column(s) cells.

In the next post regarding the grid filtering feature, we will show you how to filter the data with the Grid APIs.