Regarding your requirements, of course a custom filtering template could be created and pass to the dynamic column generation as the template is pass to the filterCellTemplate property of the igx-column. What will happen however is that all columns will use the same template as the template will be passed to the filterCellTemplate property but it will be the same for each column. A custom filter could be created in the given template to satisfy all columns or to perform different filtering according to the datatype of the column, it depends on you how you will design it and your custom logic.

<igx-column
      *ngFor="let c of columns"
      [field]="c.field"
      [dataType]="c.datatype"
      [header]="c.header"
      [filterCellTemplate]="defaultFilterTemplate"
    ></igx-column>

Another option is for each column according to its datatype or according to your custom logic to have a different custom filtering template created and to know the references to it when they are submitted by the API. During the dynamic generation of columns, as for the other properties, you will also pass to the filterCellTemplate property for each column the different filtering template that corresponds to it, for example:

[filterCellTemplate]=”item.filtertemplatereference”

However, I modified my previous sample by creating an igx-grid component with dynamically generated columns as well as an ng-template tag with the igxFilterCellTemplate directive. In this template for the filtering, I kept the igx-input-group component and in it I left the input tag with igxInput which handles the input event and performs different filtering according to the datatype of the column. I then passed this simplified custom template to the filterCellTemplate property of the dynamically created columns and each column only used this one filter template.

The described scenario could be observed here:

The sample illustrating this suggestion could be found here. Please test it on your side and let me know how it behaves.

Thank you for your cooperation. 

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics

Hello Mohanram,

I have been looking into your question and you could add a template marked with igxFilterCellTemplate in order to re-template the filter cell. You could template each filter cell according to your custom logic and according to its data type.

For this purpose, you will create an ng-template element by assigning it a given reference #template for example and placing the igxFilterCellTemplate directive, in it you will place the given editors according to your preference. After that, to set the filter template of a given column, you will use the filterCellTemplate property of the igx-column, to which you will pass the reference to the ng-template.

<ng-template #defaultFilterTemplate igxFilterCellTemplate let-column="column"></ng-template>

<igx-column
      field="ProductName"
      [dataType]="'string'"
      [filterCellTemplate]="defaultFilterTemplate"
    ></igx-column>

However, I created a sample in which we have a igx-grid component with given records and columns. I also created an ng-template with reference and the igxFilterCellTemplate directive. In it I placed an igx-input-group which wrapped an input element with the igxInput directive. This is the editor with which I will filter the string, number and boolean datatype columns. In the given input I set the value for the given cells of the column and I handle the click event when the input gets focus.

<igx-input-group type="box">
<input #input igxInput
               placeholder="Filter..."
               [value]="getFilterValue(column)"
               (input)="onInput(input, column)"
               (click)="onClick(inputGr)"
               (keydown)="onKeyDown($event)"/>
</igx-input-group>

The most important of which is to handle the input event when writing values in the input, in which event a function is fired that checks if there is a written value, if not, the grid clears the filters, if there is a written value, it is checked which type is the column that we are filtering and according to the type an operand is created for string and boolean of type contains and for number of type equal. Then with the filter method of the grid it is filtered by passing the column field, the entered value and the operand.

public onInput(input: any, column: ColumnType) {
        if (input.value === '') {
            this.grid1.clearFilter(column.field);
            return;
        }
        let operand = null;
        switch (column.dataType) {
            case GridColumnDataType.Number:
                operand = IgxNumberFilteringOperand.instance().condition('equals');
                break;
            default:
                operand = IgxStringFilteringOperand.instance().condition('contains');
        }
        this.grid1.filter(column.field, this.transformValue(input.value, column), operand, column.filteringIgnoreCase);
    }

I also created a custom filter for the date datatype columns as they are not entered but the date can be selected. Again, an ng-template is created with the necessary properties, and in it I added an igx-date-picker component that handles the valueChange custom event. When selecting a date and firing the event, we check if there is a selected date again, if the filter is not cleared, if there is, the grid is filtered again with the filter method by re-submitting the column field, the entered date and the operand which is already for date type.

<ng-template #dateFilterTemplate igxFilterCellTemplate let-column="column">
      <igx-date-picker
        #picker
        [value]="getFilterValue(column)"
        (valueChange)="onDateSelected($event, column)"
        placeholder="Filter..."
        type="box"
      ></igx-date-picker>
  </ng-template>

The described scenario could be observed here:

In addition, I have prepared small sample illustrating this behavior which could be found here. Please test it on your side and let me know how it behaves.

More information about filtering and custom filtering can be found in this topic in our Angular documentation.

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

Regards,

Georgi Anastasov

Entry Level Software Developer

Infragistics