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.

Can you try do add `!important` to the `display:none!important;` — לבני מלכה, Apr 18 '18 at 08:30
i tried. that one also, even i tried bellow code :display:none !important; width:0px;height;0px;overflow:hidden; — rani boyini, Apr 18 '18 at 08:34
https://www.telerik.com/forums/need-to-change-filter-icon-in-grid-columns — לבני מלכה, Apr 18 '18 at 08:37

score 0 · Answer 1 · answered May 18 '18 at 17:06

0

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;
}

answered May 18 '18 at 17:06

int-i

661
1
12
28

will you please elaborate how this works? i need to achive the filter icon gone. – Raihan Ridoy Feb 16 '20 at 13:27
This is just css. Include it in the page the grid is on. The classes mentioned here is only applicable to filter, hence display:none will remove the filter – int-i Feb 19 '20 at 22:08
it is working whne i add the class on global style.css but when i put it on the components associate style.css it is not working. do you have any idea why? – Raihan Ridoy Feb 27 '20 at 10:07
You may have to ask a separate SO question on how to apply CSS styles properly with your specific issue. – int-i Feb 27 '20 at 20:01

score 0 · Answer 2 · answered Mar 03 '21 at 03:36

<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)

score 0 · Answer 3 · answered Feb 03 '22 at 07:07

0

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

answered Feb 03 '22 at 07:07

Chamila Maddumage

3,304
2
32
43

How to disable kendo grid filter Icons in angular 2?

3 Answers3