This is a migrated thread and some comments may be shown as answers.

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

1 Answer 81 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Hazel
Top achievements
Rank 1
Hazel asked on 26 Apr 2021, 01:59 AM

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!

 

1 Answer, 1 is accepted

Sort by
0
Yanmario
Telerik team
answered on 26 Apr 2021, 02:57 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Hazel
Top achievements
Rank 1
Answers by
Yanmario
Telerik team
Share this question
or