Web Components Grid Advanced Filtering

    The Ignite UI for Web Components Advanced Filtering in Web Components Grid allows you to manipulate data by providing you with a dialog where you can create different groups with filtering conditions across all columns in the IgcGridComponent.

    Web Components Grid Advanced Filtering Example

    Interaction

    In order to open the advanced filtering dialog, the Advanced Filtering button in the grid toolbar should be clicked. If no advanced filter is applied, you should start with creating a group of filtering conditions linked with AND or OR. After that, you can add filtering conditions or sub-groups.

    In order to add a filtering condition, you have to select any of the filterable columns, an operand based on the column dataType and a value if the operand is not unary. Once the condition is committed, a chip with the condition information appears. By hovering or clicking the chip, you have the options to modify it or add another condition or group right after it.

    If you select more than one filtering condition chip, a context menu appears with options to create a group or delete the filters. If you choose to create a group with the selected conditions, the newly created group will appear where the topmost selected condition was placed.

    In order to select a group, you can also click on its vertical line, which is colored based on the the linking condition AND or OR. If a single group is selected, you get a context menu with options to change its filtering logic, ungroup or delete it.

    In order to filter the data once you are ready with creating the filtering conditions and groups, you should click the Apply button. If you have modified the advanced filter, but you don't want to preserve the changes, you should click the Cancel button. You could also clear the advanced filter by clicking the Clear Filter button.

    Usage

    To enable the advanced filtering, the allowAdvancedFiltering input property should be set to true.

    <igc-grid id="grid" auto-generate="true" allow-advanced-filtering="true">
    <igc-grid-toolbar></igc-grid-toolbar>
<igc-grid>

    constructor() {
    let grid = document.getElementById("grid") as IgcGridComponent;
    grid.data = this.data
}

    The advanced filtering generates a filteringExpressionsTree which is stored in the advancedFilteringExpressionsTree input property. You could use the advancedFilteringExpressionsTree property to set an initial state of the advanced filtering.

    connectedCallback(): void {
    const tree = new IgcFilteringExpressionsTree(FilteringLogic.And);
    tree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('contains'),
        searchVal: 'cha',
        ignoreCase: true
    });
    const subTree = new IgcFilteringExpressionsTree(FilteringLogic.Or);
    subTree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('doesNotContain'),
        searchVal: 'b',
        ignoreCase: true
    });
    subTree.filteringOperands.push({
        fieldName: 'ProductName',
        condition: IgcStringFilteringOperand.instance().condition('startsWith'),
        searchVal: 'Chan',
        ignoreCase: true
    });
    tree.filteringOperands.push(subTree);
    grid.advancedFilteringExpressionsTree = tree;
}

    In case you don't want to show the IgcGridComponent toolbar, you could use the openAdvancedFilteringDialog and closeAdvancedFilteringDialog methods to open and close the advanced filtering dialog programmatically.

    [!Note] You can enable both the QuickFilter/ExcelStyleFilter and the advanced filtering user interfaces in the IgcGridComponent. Both filtering user interfaces will work independently of one another. The final filtered result in the IgcGridComponent is the intersection between the results of the two filters.

    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-grid class="grid"></igc-grid>

    Then set the related CSS properties to this class:

    .grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-background-or: #d83434;
}

    Demo

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.