在(Kendo Grid Angular 2) filter menu中，如何隐藏多余的filter，以及operator dropdown

Question

在 Kendo UI 中 Angular 2:

1-如何隐藏额外的过滤器选项（图片底部的过滤器）。

2- 对于第一个（剩余）过滤器：如何设置默认操作然后隐藏操作下拉列表？

Answer 1

css 解决方法可以是这样的：

kendo-grid-filter-menu-container {
    kendo-dropdownlist.k-filter-and {
        display: none !important;
    }

    kendo-grid-string-filter-menu-input,
    kendo-grid-date-filter-menu-input  {
        &:nth-child(1) {
            kendo-grid-filter-menu-input-wrapper {
                kendo-dropdownlist:nth-child(1) {
                    display: none !important;
                }
            }
        }
        &:nth-child(3) {
            display: none !important;
        }
    }
}

但我仍然需要更好的 Kendo 配置。

Answer 2

您可以通过在 kendo-grid-date-filter-menu 组件中设置 [extra]="false" 来隐藏额外的过滤器。 (API Reference)

可以使用 operator 输入设置默认运算符。

示例：

<kendo-grid-column field="myDate" title="Title">
    <ng-template kendoGridFilterMenuTemplate
        let-filter let-column="column" let-filterService="filterService"> 

        <kendo-grid-date-filter-menu
          [column]="column" [filter]="filter" [filterService]="filterService"
          [extra]="false"
          operator="eq"
        >
        </kendo-grid-date-filter-menu>

    </ng-template>
</kendo-grid-column>

说到隐藏 operators-dropdown，filter-menu 目前没有 configuration-option。对于 row-filter 方法，可以通过设置 [showOperators]="false".

您可以通过 css 隐藏它（但这仍然是一种解决方法）或实施符合您要求的自定义过滤器来绕过此限制。 (Documentation)

Answer 3

<kendo-grid-column field="OrderDate" title="Order Date">
    <ng-template kendoGridFilterCellTemplate let-filter let-column="column">
        <kendo-grid-date-filter-cell [showOperators]="false" [column]="column" [filter]="filter">
        </kendo-grid-date-filter-cell>
    </ng-template>
</kendo-grid-column>

[showOperators]="false" it work for me. Hide other operators

来源 Link : DateFilterCellComponent

Answer 4

可以参考the default filter operator。

以下示例演示如何配置字符串过滤器和 select 默认的 "contains" 运算符，您也可以使用此标记指定活动过滤器运算符及其顺序：<kendo-filter-(operatorName)-operator>.

<ng-template kendoGridFilterCellTemplate let-filter let-column="column">
    <kendo-grid-string-filter-cell [column]="column" [filter]="filter" operator="contains">
        <kendo-filter-contains-operator></kendo-filter-contains-operator>
        <kendo-filter-eq-operator></kendo-filter-eq-operator>
    </kendo-grid-string-filter-cell>
</ng-template>

Answer 5

对于按照@Hashem 解释使用此解决方法的每个人，请不要忘记添加 kendo-grid-numeric-filter-menu-input

kendo-grid-filter-menu-container {
  kendo-dropdownlist.k-filter-and {
      display: none !important;
  }

  kendo-grid-numeric-filter-menu-input,
  kendo-grid-string-filter-menu-input,
  kendo-grid-date-filter-menu-input  {
      &:nth-child(1) {
          kendo-grid-filter-menu-input-wrapper {
              kendo-dropdownlist:nth-child(1) {
                  display: none !important;
              }
          }
      }
      &:nth-child(3) {
          display: none !important;
      }
  }
}

在(Kendo Grid Angular 2) filter menu中，如何隐藏多余的filter，以及operator dropdown

In (Kendo Grid Angular 2) filter menu, how to hide the extra filter, and the operator dropdown

kendo-grid

kendo-ui-angular2