Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Matt Jew
30
Excel Style Filtering with Template
posted

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>
Parents
  • 2560
    Verified Answer
    Offline posted

    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:

        <igx-grid-excel-style-filtering [minHeight]="'380px'" [maxHeight]="'500px'">
      <igx-excel-style-column-operations>
        <igx-excel-style-header
          [showPinning]="true"
          [showHiding]="true"
          #header     >
        </igx-excel-style-header>

        <igx-excel-style-sorting></igx-excel-style-sorting>
        <button
          igxButton
          (click)="logColumn(header.esf.column)"
          style="margin:10px;"     >
          Log column
        </button>
      </igx-excel-style-column-operations>
    </igx-grid-excel-style-filtering>

    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

Reply Children
No Data