Excel Style Filtering with Template

I have a need to add my own custom code to the menu that opens for the <igx-grid-excel-style-filtering> component. There is a template for it, but it behaves differently than most other igx template implementations in that you cannot use ng-template. Instead, the source code will automatically use any component code you place inside the tags, including predefined igx filtering components but also any custom components. This is fine, but I need access to the column property that the filtering component has and if it were a ng-template i could probably do a "let-column" but without it, I cannot. The below is essentially what I want so I can do something with what they type in with a button click. Without access to the column value, the controller doesn't know where this function is from. Is something like this possible?

        <igx-grid-excel-style-filtering>

            <input [(ngModel)]="columnFilterText" type="text" placeholder="Quick filter">

            <button (click)="applyQuickFilter(column)">apply</button>

        </igx-grid-excel-style-filtering>

Hello Matt,

Thank you for posting to Infragistics Community!

I have been looking into your question and I believe you will find this subtopic in our documentation about External Excel Style filtering quite helpful on the matter. There you can find a demo of the Excel Style filtering dialog as a standalone component, where its column property is set, based on the selected value within an IgxSelect component – please refer to the Usage section.

Nevertheless, in case External Excel Style filtering is not used in your application, another approach to retrieve the column, for which the dialog is opened, has to be adopted. The most straightforward way would be to access the grid’s excelStyleFilteringComponent’s column property:

@ViewChild('grid1', { read: IgxGridComponent, static: true })
public grid1: IgxGridComponent;

public logColumn() {
    console.log(this.grid1.excelStyleFilteringComponent.column);
}

Alternatively, if it is preferred to pass the column to the method from the template, yet another possible solution would be to reference any of the built-in Excel Style Dialog Components, such as the IgxExcelStyleHeaderComponent, and access the column via their reference to the filtering component, for instance:

    
      
        
        

        
        
          Log column
        
      
    

For your convenience, I created this small sample demonstrating these suggestions.

In case of any other questions on the matter, please let me know.

Sincerely,
Bozhidara Pachilova
Associate Software Developer

Thank you! The excelStyleFilteriingComponent property of the grid was the key. I was trying to directly put a ViewChild referencing the various excel directives themselves but didn't realize the grid already had that property, so that is perfect.

Hello Matt,

I am glad that you find my suggestion helpful. Thank you for using Infragistics components!

Best regards,
Bozhidara Pachilova