Web Components Hierarchical Grid Filtering

The Ignite UI for Web Components Filtering in Web Components Hierarchical Grid is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the IgcHierarchicalGrid Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:

• Quick filtering
• Excel Style Filtering
• Advanced Filtering

Web Components Hierarchical Grid Filtering Example

The sample below demonstrates IgcHierarchicalGrid‘s Quick Filter user experience.

Setup

In order to specify if filtering is enabled and which filtering mode should be used, the IgcHierarchicalGrid exposes the following properties - IgcHierarchicalGrid.allowFiltering, IgcHierarchicalGrid.allowAdvancedFiltering, IgcHierarchicalGrid.filterMode and Column.filterable.

Property IgcHierarchicalGrid.allowFiltering enables you to specify the following options:

• false - the filtering for the corresponding grid will be disabled. This is the default value.
• true - the filtering for the corresponding grid will be enabled.

Property IgcHierarchicalGrid.allowAdvancedFiltering enables you to specify the following options:

• false - the advanced filtering for the corresponding grid will be disabled. This is the default value.
• true - the advanced filtering for the corresponding grid will be enabled.

Property IgcHierarchicalGrid.filterMode enables you to specify the following options:

• QuickFilter - a simplistic filtering UI. This is the default value.
• ExcelStyleFilter - an Excel-like filtering UI.

Property Column.filterable enables you to specify the following options:

• true - the filtering for the corresponding column will be enabled. This is the default value.
• false - the filtering for the corresponding column will be disabled.

<igc-hierarchical-grid id="grid1" auto-generate="false" allow-filtering="true">
    <igc-column field="ProductName" data-type="string"></igc-column>
    <igc-column field="Price" data-type="number" filterable="false"></igc-column>
</igc-hierarchical-grid>

To enable the Advanced filtering however, you need to set the IgcHierarchicalGrid.allowAdvancedFiltering input property to true

<igc-hierarchical-grid  data="data" auto-generate="true" allow-advanced-filtering="true">
</igc-hierarchical-grid>

Interaction

In order to open the filter row for a particular column, the ‘Filter’ chip below its header should be clicked. To add conditions you should choose filter operand using the dropdown on the left of the input and enter value. For number and date columns ‘Equals’ is selected by default, for string - ‘Contains’ and for boolean - ‘All’. Pressing ‘Enter’ confirms the condition and you are now able to add another one. There is a dropdown, between ‘condition’ chips, which determines the logical operator between them, ‘AND’ is selected by default. To remove a condition you can click the ‘X’ button of the chip, and to edit it you should select the chip and the input will be populated with the chip’s data. While filter row is opened you can click on any filterable column’s header in order to select it and to be able to add filter conditions for it.

While some filtering conditions have been applied to a column, and the filter row is closed, you can either remove the conditions by clicking the chip’s close button, or you can open the filter row by selecting any of the chips. When there is not enough space to show all the conditions, a filter icon is shown with a badge that indicates how many more conditions there are. It can also be clicked in order to open the filter row.

Usage

There’s a default filtering strategy provided out of the box, as well as all the standard filtering conditions, which the developer can replace with their own implementation. In addition, we’ve provided a way to easily plug in your own custom filtering conditions. The IgcHierarchicalGrid currently provides not only a simplistic filtering UI, but also more complex filtering options. Depending on the set Column.dataType of the column, the correct set of filtering operations is loaded inside the filter UI dropdown. Additionally, you can set the IgnoreCase and the initial Condition properties.

The filtering feature is enabled for the IgcHierarchicalGrid component by setting the IgcHierarchicalGrid.allowFiltering input to true. The default IgcHierarchicalGrid.filterMode is QuickFilter and it cannot be changed run time. To disable this feature for a certain column – set the Column.filterable input to false.

<igc-hierarchical-grid auto-generate="false" allow-filtering="true">
    <igc-column field="Artist" filterable="true"></igc-column>
    <igc-column field="Photo" filterable="false"></igc-column>
</igc-hierarchical-grid>

You can filter any column or a combination of columns through the IgcHierarchicalGrid API. The IgcHierarchicalGrid exposes several methods for this task - Filter, FilterGlobal and ClearFilter.

• Filter - filter a single column or a combination of columns.

There are five filtering operand classes exposed:

• IgcFilteringOperand: this is a base filtering operand, which can be inherited when defining custom filtering conditions.
• IgcBooleanFilteringOperand defines all default filtering conditions for boolean type.
• IgcNumberFilteringOperand defines all default filtering conditions for numeric type.
• IgcStringFilteringOperand defines all default filtering conditions for string type.
• IgcDateFilteringOperand defines all default filtering conditions for date type.

// Single column filtering

// Filter the `ProductName` column for values which `contains` the `myproduct` substring, ignoring case
this.grid.filter('ProductName', 'myproduct', IgcStringFilteringOperand.instance().condition('contains'), true);

The only required parameters are the column field key and the filtering term. Both the condition and the case sensitivity will be inferred from the column properties if not provided. In the case of multiple filtering, the method accepts an array of filtering expressions.

// Multi column filtering

const gridFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And);
const productFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'ProductName');
const productExpression = {
    condition: IgcStringFilteringOperand.instance().condition('contains'),
    fieldName: 'ProductName',
    ignoreCase: true,
    searchVal: 'ch'
};
productFilteringExpressionsTree.filteringOperands.push(productExpression);
gridFilteringExpressionsTree.filteringOperands.push(productFilteringExpressionsTree);

const priceFilteringExpressionsTree = new IgcFilteringExpressionsTree(FilteringLogic.And, 'Price');
const priceExpression = {
    condition: IgcNumberFilteringOperand.instance().condition('greaterThan'),
    fieldName: 'UnitPrice',
    ignoreCase: true,
    searchVal: 20
};
priceFilteringExpressionsTree.filteringOperands.push(priceExpression);
gridFilteringExpressionsTree.filteringOperands.push(priceFilteringExpressionsTree);

this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;

• FilterGlobal - clears all existing filters and applies the new filtering condition to all Hierarchical Grid’s columns.

// Filter all cells for a value which contains `myproduct`
this.grid.filteringLogic = FilteringLogic.Or;
this.grid.filterGlobal('myproduct', IgcStringFilteringOperand.instance().condition('contains'), false);

• ClearFilter - removes any applied filtering from the target column. If called with no arguments it will clear the filtering of all columns.

// Remove the filtering state from the ProductName column
this.grid.clearFilter('ProductName');

// Clears the filtering state from all columns
this.grid.clearFilter();

Initial filtered state

To set the initial filtering state of the IgcHierarchicalGrid, set the IgcHierarchicalGrid IgcFilteringExpressionsTree property to an array of IgcFilteringExpressionsTree for each column to be filtered.

constructor() {
    const gridFilteringExpressionsTree: IgcFilteringExpressionsTree = { operator: FilteringLogic.And };
    const productFilteringExpressionsTree: IgcFilteringExpression = {
        fieldName: "ProductName",
        conditionName: "contains",
        ignoreCase: true,
        searchVal: "Chai"
    };

    const quantityFilteringExpressionsTree: IgcFilteringExpression = {
        fieldName: "QuantityPerUnit",
        conditionName: "contains",
        ignoreCase: true,
        searchVal: "1"
    };

    gridFilteringExpressionsTree.filteringOperands = [ productFilteringExpressionsTree, quantityFilteringExpressionsTree ];

    this.grid.filteringExpressionsTree = gridFilteringExpressionsTree;
}

Filtering logic

The FilteringLogic property of the IgcHierarchicalGrid controls how filtering multiple columns will resolve in the IgcHierarchicalGrid. You can change it at any time through the IgcHierarchicalGrid API, or through the IgcHierarchicalGrid input property.

import { FilteringLogic } from "igniteui-webcomponents-grids/grids";

this.grid.filteringLogic = FilteringLogic.OR;

The default value of AND returns only the rows that match all the currently applied filtering expressions. Following the example above, a row will be returned when both the ‘ProductName’ cell value contains ‘myproduct’ and the ‘Price’ cell value is greater than 55.

When set to OR, a row will be returned when either the ‘ProductName’ cell value contains ‘myproduct’ or the ‘Price’ cell value is greater than 55.

Custom Filtering Operands

You can customize the filtering menu by adding, removing or modifying the filtering operands. By default, the filtering menu contains certain operands based on the column’s data type (IgcBooleanFilteringOperand, IgcDateFilteringOperand, IgcNumberFilteringOperand and IgcStringFilteringOperand). You can extend these classes or their base class IgcFilteringOperand to change the filtering menu items’ behavior.

In the sample below, inspect the “Product Name” and “Discontinued” columns filters menus. For the “Discontinued” column filter, we have limited the number of operands to All, True and False. For the “Product Name” column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands.

To do that, extend the IgcStringFilteringOperand and IgcBooleanFilteringOperand, modify the operations and their logic, and set the column filters input to the new operands.

export class GridCustomFilteringComponent {
    public caseSensitiveFilteringOperand = CaseSensitiveFilteringOperand.instance();
    public booleanFilteringOperand = BooleanFilteringOperand.instance();
}

export class CaseSensitiveFilteringOperand extends IgcStringFilteringOperand {
    private constructor() {
        super();
        const customOperations = [
            {
                iconName: 'contains',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) !== -1;
                },
                name: 'Contains (case sensitive)'
            },
            {
                iconName: 'does_not_contain',
                isUnary: false,
                logic: (target: string, searchVal: string, ignoreCase?: boolean) => {
                    ignoreCase = false;
                    const search = IgcStringFilteringOperand.applyIgnoreCase(searchVal, ignoreCase);
                    target = IgcStringFilteringOperand.applyIgnoreCase(target, ignoreCase);
                    return target.indexOf(search) === -1;
                },
                name: 'Does Not Contain (case sensitive)'
            }
        ];

        const emptyOperators = [
            // 'Empty'
            this.operations[6],
            // 'Not Empty'
            this.operations[7]
        ];

        this.operations = customOperations.concat(emptyOperators);
    }
}

export class BooleanFilteringOperand extends IgcBooleanFilteringOperand {
    private constructor() {
        super();
        this.operations = [
            // 'All'
            this.operations[0],
            // 'TRUE'
            this.operations[1],
            // 'FALSE'
            this.operations[2]
        ];
    }
}

<!-- grid-custom-filtering.component.html -->

<igc-hierarchical-grid auto-generate="false" allow-filtering="true">
    <igc-column id="Artist" field="Artist" filterable='true' data-type="string"></igc-column>
    <igc-column id="HasGrammyAward" field="HasGrammyAward" filterable='true' data-type="boolean"></igc-column>
</igc-hierarchical-grid>

constructor() {
    var artist = document.getElementById('Artist') as IgcColumnComponent;
    var hasGrammyAward = document.getElementById('HasGrammyAward') as IgcColumnComponent;
    artist.filters = this.caseSensitiveFilteringOperand;
    hasGrammyAward.filters = this.booleanFilteringOperand;
}

Styling

In addition to the predefined themes, the grid could be further customized by setting some of the available CSS properties. In case you would like to change some of the colors, you need to set a class for the grid first:

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

Then set the related CSS properties for that class:

.grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

Demo

Known Limitations

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub