Hello Avis,

I have been looking into your question and to use one of the two quickFilter or excelStyleFilter mods, you must first enable filtering for the igx-tree-grid by setting allowFiltering to true. Then you can choose one of the two filter modes by passing it to the filterMode property. Finally, to add advanced filtering you need to set the allowAdvancedFiltering property to true and add the igx-grid-toolbar component to the igx-tree-grid. By default, when you filter a given column with both filter modes, the result will be a combination of them.

<igx-tree-grid #treegrid1 
    [data]="data" 
    [autoGenerate]="false" 
    height="460px"
    width="100%" 
    primaryKey="ID" 
    foreignKey="ParentID" 
    [filterMode]="'quickFilter'" 
    [allowFiltering]="true" 
    [allowAdvancedFiltering]="true">
    
        <igx-grid-toolbar></igx-grid-toolbar>
        
</igx-tree-grid>

Additionally, I have prepared small sample illustrating my suggestion which could be found here.

Please let me know if you need any further assistance.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

After further investigation, it appears that by design you can choose between the two filter modes - either quickFilter or excelStyleFilter. This is the reason why when you set a mod in the filterMode property of the grid for example excelStyleFilter it applies and overrides the templates of the default quickFilter mod. However, I can suggest another workaround approach that comes closer to the described scenarios.

What I could suggest is something in common between column template and external excel style filtering components. The igx-tree-grid will be in the default quickFilter mode and the columns with a given icon will be templated, which in turn will expand or hide an external excel filter dialog for the tree grid with the *ngif directive, depending on which column the icon is clicked on. After expanding the dialog, it will be able to filter the given column by applying all the filters from the excel filter mode. The only drawback to the workaround is that the cancel button will not close the filter dialog, this reason is due to the fact that when using a stand-alone igx-grid-excel-style-filtering component as a column template it is not fully relayed to the column due to not using the excelStyleFilter mode and not being deployed from the column header as per default, but it will still be able to be closed from the icon in the template. However, a fully functional excel style filtering dialog relayed and filtering a given column is implemented, which is combined with individual quickFilter templates.

<ng-template #excelStyleTemplateName igxFilterCellTemplate>
            <igx-icon (click)="showNameFunc()">filter_alt</igx-icon>
</ng-template>

<div class="filter-dialog" *ngIf="showName">
        <igx-grid-excel-style-filtering [column]="treegrid1.getColumnByName('Name')">
        </igx-grid-excel-style-filtering>
</div>

Additionally, what can be done is to use Advanced Filtering as a combination of the two previous filter mods and a refinement with more capabilities.

I have prepared small sample illustrating my suggestion which could be found here. Please test it on your side and let me know how it behaves.

If you require any further assistance on the matter, please let me know.

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics