Re-re-templating/reuse igx-gid filters (igxFilterCellTemplate)

145

Re-re-templating/reuse igx-gid filters (igxFilterCellTemplate)

Yannick Löffler posted over 3 years ago

Hey guys,

according to

https://ko.infragistics.com/products/ignite-ui-angular/angular/components/grid/filtering#re-templating-filter-cell

   <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column">
        <div class="filter-cell">
            <igx-input-group #inputGr class="filter-input" type="box" [displayDensity]="'compact'">
                <igx-prefix>
                    <igx-icon>search</igx-icon>
                </igx-prefix>
                <input
                    #input
                    igxInput
                    tabindex="0"
                    placeholder="Filter..."
                    autocomplete="off"
                    [value]="getFilterValue(column)"
                    (input)="onInput(input, column)"
                    (click)="onClick(inputGr)"
                    (keydown)="onKeyDown($event)"/>
                <igx-suffix *ngIf="input.value || input.value === 0" (click)="clearInput(column)" tabindex="0">
                    <igx-icon>clear</igx-icon>
                </igx-suffix>
            </igx-input-group>
        </div>
    </ng-template>

we already re-templated some filters and it's working so far. But we have plenty of grids that should use the same kind of filters => Can it be reused without copy-paste? An own component or something like that?

Top Replies

1560

Offline Teodosia Hristodorova posted over 3 years ago in reply to Yannick Löffler +1 verified
Hello, I have been looking into your question and prepared a small sample in order to demonstrate how such behavior could be achieved. In case all...view reply »

1560

Offline Teodosia Hristodorova posted over 3 years ago in reply to Yannick Löffler

Hello,

I am glad that you find my suggestion helpful.

Thank you for using Infragistics components.

Regards,
Teodosia Hristodorova
Associate Software Developer
Cancel
Reply

Cancel
145

Offline Yannick Löffler posted over 3 years ago in reply to Teodosia Hristodorova

Thank you, that's all I need.
Cancel
Reply

Cancel
1560

Verified Answer
Offline Teodosia Hristodorova posted over 3 years ago in reply to Yannick Löffler
Hello,

I have been looking into your question and prepared a small sample in order to demonstrate how such behavior could be achieved.

In case all grids are in the same component there is no need to define this template more than once or copy/paste it. You could define it once and set it as filterCellTemplate to the required columns even if they are in different grids.

If the grids are in different components, in order to create the template only once and pass it to some component that contains a grid, my suggestion is to declare an input of the grid components and using it to pass the template you require.

Also, in case you require the template content to be in different component, you could pass using input only the column component. After that the grid could be accessed using column.gridAPI.grid.

<grid-sample [filterTemplate]="defaultFilterTemplate"></grid-sample> <ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column"> <app-filter-cell [gridColumn]="column"></app-filter-cell> </ng-template>

Additionally, please keep in mind that Angular template and component bindings are out of the scope of our support since they are not directly related to our product.

Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.

Sincerely,
Teodosia Hristodorova
Associate Software Developer
Cancel
Reply

Reject Answer

Cancel

145

Offline Yannick Löffler posted over 3 years ago

My current approach is another component, that is reused inside the ng-template part (with ng-template it didn't work:

Component IgxTextFilterTemplateComponent
> TS part:

@Component({
  selector: "my-igx-text-filter-template",
  templateUrl: "./igx-text-filter-template.component.html",
  styleUrls: ["./igx-text-filter-template.component.scss"]
})
export class IgxTextFilterTemplateComponent {

  myIgxGridHelper: MyIgxGridHelper = null;
  private _grid: IgxGridComponent = null;

  @Input()
  set grid(grid: IgxGridComponent) {
    this._grid = grid;
    this.myIgxGridHelper = new MyIgxGridHelper(this._grid);
  }

  private _column: IgxColumnComponent = null;

  get column(): IgxColumnComponent {
    return this._column;
  }

  @Input()
  set column(column: IgxColumnComponent) {
    this._column = column;
  }

}

> HTML part

<div class="filter-cell">
  <igx-input-group #inputGr [displayDensity]="'compact'" class="filter-input" type="box">
    <igx-prefix>
      <igx-icon>search</igx-icon>
    </igx-prefix>
    <input
      #input
      (click)="myIgxGridHelper.setFocusOnFilter(inputGr)"
      (input)="myIgxGridHelper.onFilterInput(input, column)"
      (keydown)="myIgxGridHelper.onFilterKeyDown($event)"
      [value]="myIgxGridHelper.getFilterValue(column)"
      autocomplete="off"
      igxInput
      placeholder="{{'FILTER'| translate}}"
      tabindex="0"/>
    <igx-suffix (click)="myIgxGridHelper.clearFilterInput(column)" *ngIf="input.value || input.value === 0"
                id="{{ 'filter_' + column.field + '_clear'}}" tabindex="0">
      <igx-icon>clear</igx-icon>
    </igx-suffix>
  </igx-input-group>
</div>

As a drawback, the grid itself and the matching column must be injected... Is there a better way without passing the column + grid?
Can the grid be accessed via column? Then there wouldn't be a need to pass the grid.

In the component, that reuses the filter, it looks like this:

> HTML part

<igx-grid #grid ...>
</igx-grid>

<ng-template #textFilterTemplate igxFilterCellTemplate let-column="column">
  <my-igx-text-filter-template [column]="column" [grid]="grid">
  </my-igx-text-filter-template>
</ng-template>