grid cust filter error

[Renard]

HI

When I customize the condition of a certain column, an error is thrown when opening the condition.

[Aishwarya Rameshbabu]

Hi Renard,

After reviewing the shared code example, we could see that you are trying to render some text in the filter menu UI. The script issue you are facing is due to the fact that the filterTemplate property only accepts template strings or HTML element IDs. Please refer to the code example and sample below where we have rendered the text in a span element.

App.component.html

 

    <e-column field="EmployeeID" headerText="Employee ID" [filterTemplate]="editRowtemplate" width="150">

      </e-column>

  </e-columns>

  <ng-template #editRowtemplate let-data>

             <span>Custom text</span>

          </ng-template>

 

Sample: https://stackblitz.com/edit/github-n741pv-k2jcbu?file=src%2Fapp.component.ts,index.html

For more detailed information, please consult the documentation provided.

Documentation Link: Filter-template

API Link: filterTemplate

If you need any further assistance or have additional questions, please feel free to let us know.

Regards

Aishwarya R

[Renard]

HI

demo:https://stackblitz.com/edit/angular-jscezg-vdvagz?file=src%2Fapp.component.ts

There is no issue with opening the FilterTemplate bound through HTML. However, if you use changedatasource to change or add columns, there may be a problem with the bound FilterTemplate.

[Johnson Soundararajan S]

Hi Renard,

The script issue you are experiencing when attempting to open the filter menu on a dynamically rendered column is caused by an improper definition of filterTemplate property in the dynamic column. Please consult the provided code example and sample below, where we have defined the filterTemplate property using a template reference variable, and no script issue will be thrown upon opening the filter menu.

App.component.ts

 

@ViewChild('custTemp')

public templates: any;

 

onChangeCol() {

    let cols1: any[] = [

        { field: "Cust", headerText: 'Cust Col', type: 'string', filterTemplate: this.templates }

    ];

    let cols2: any = this.grid.columns.push(...cols1);

    this.grid.changeDataSource(null, cols2);

}

 

 

App.component.html

 

  <ng-template #custTemp let-data>

    <span>cust text</span>

  </ng-template>

 

Sample: https://stackblitz.com/edit/angular-jscezg-zsb5op?file=src%2Fapp.component.ts,src%2Fapp.component.html

Please get back to us if you need further assistance.