Web Components Hierarchical Grid Advanced Filtering

    The Ignite UI for Web Components Advanced Filtering in Web Components Hierarchical 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 IgcHierarchicalGridComponent.

    Web Components Hierarchical Grid Advanced Filtering Example

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

    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.

    Ignite UI for Web Components | CTA Banner

    Usage

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

    <igc-hierarchical-grid id="hierarchicalGrid" auto-generate="true" allow-advanced-filtering="true">
    <igc-grid-toolbar></igc-grid-toolbar>
</igc-hierarchical-grid>
html
    constructor() {
    let hierarchicalGrid = document.getElementById("hierarchicalGrid") as IgcHierarchicalGridComponent;
    hierarchicalGrid.data = this.data
}
ts

    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;
}
typescript

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

    You can enable both the QuickFilter/ExcelStyleFilter and the advanced filtering user interfaces in the IgcHierarchicalGridComponent. Both filtering user interfaces will work independently of one another. The final filtered result in the IgcHierarchicalGridComponent 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-hierarchical-grid class="grid"></igc-hierarchical-grid>
html

    Then set the related CSS properties to this class:

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

    Demo

    EXAMPLE
    TS
    HTML
    CSS
    Edit in:

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.