How to disable kendo grid filter Icons in angular 2?

Question

I am using kendo grid for displaying data, [filterable]="true" in web page showing filters, but i want hide only filter icon button. i tried css but it is not working. can you please help me on that.I tried bellow code but not working.

<kendo-grid [data]="gridData" [filterable]="true",    [filterable.extra]="false"><kendo-grid> <kendo-grid [data]="gridData"    [filterable]="true", [filterable.cell.enabled]="false"><kendo-grid>

css:

span.k-widget.k-dropdown.k-header.k-dropdown-operator {
    display: none;
}

I am new to kendo-grid, angular2/5 and typescript, can you please help me.

Answer 1

As per the comments in this question, my understanding is that, OP wants the icon on the filter to be gone. If so, try this. I just tested it. Should work for filter (Not clear filter icon)

span.k-i-filter.k-icon {
  display: none;
}

Answer 2

<kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
      <kendo-grid-string-filter-cell
        [showOperators]="false"
        [column]="column"
        [filter]="filter">
      </kendo-grid-string-filter-cell>
    </ng-template>
</kendo-grid-column>

Use this code sample, You can hide the filter ICON. 100% working.

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/built-in-template/#toc-hiding-row-filter-operators

(search under - Hiding Row Filter Operators)

Answer 3

You can use [showOperators]="false". This will remove the kendo filter icon.