How do use <ng-template> to remove a filter off a column in the Kendo Grid?

[Hazel]

I see that under the "Column Menu" > "Filter Item" section that there is a way to remove the filter button off a specific column, ie. by adding [filterable]="false" to your <kendo-grid-column-field> selector (https://www.telerik.com/kendo-angular-ui/components/grid/columns/menu/#toc-filter-item).

 

However, the way that I have my code arranged, I use <ng-template> to customize my columns, and use an *ngFor to populate my <kendo-grid-column> columns.

Example in the attached screenshot below:

Is there some way to remove the filter button using <ng-template>? I tried adding the [filterable="false" to my <ng-template> for the kendoGridFilterMenuTemplate, but it didn't seem to work.
Thank you!

 

[Yanmario]

Hi Hazel,

Thank you for the provided screenshot.

The best way to remove the filter button UI is using the ColumnComponent filterable input. Your implementation seems similar to persist the state article from our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/persist-state/

Thus a similar approach can be achieved by adding a filterable boolean property to your gridSettings.columns. Thus providing it in the filterable input would hide the filter UI from the ID(ProductID) column.

<kendo-grid-column
        *ngFor="let col of gridSettings.columnsConfig"
        [field]="col.field"
        [title]="col.title"
        [width]="col._width"
        [filter]="col.filter"
        [hidden]="col.hidden"
        [filterable]="col.filterable"
      >
      </kendo-grid-column>

 

 
columnsConfig: [
      {
        field: "ProductID",
        title: "ID",
        filterable: false,
        _width: 60
      },

Here is a code example with the described approach:

https://stackblitz.com/edit/angular-kcpzo9-74fhv8

Please let me know in case I didn't understand the requirement properly or if any further information is required for this case. Thank you.

Regards,
Yanmario Menev
Progress Telerik