在（Kendo Grid Angular 2）过滤器菜单中，如何隐藏额外的过滤器，以及操作员下拉菜单答案

【问题标题】：In (Kendo Grid Angular 2) filter menu, how to hide the extra filter, and the operator dropdown在（Kendo Grid Angular 2）过滤器菜单中，如何隐藏额外的过滤器，以及操作员下拉菜单
【发布时间】：2018-03-02 15:34:23
【问题描述】：

在 Angular 2 的 Kendo UI 中：

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

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

【问题讨论】：

标签： kendo-grid kendo-ui-angular2

【解决方案1】：

您可以通过在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>

在隐藏操作员下拉菜单时，过滤器菜单现在没有配置选项。对于行过滤器方法，这可以通过设置[showOperators]="false" 来实现。

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

【讨论】：

谢谢，是否可以一次为网格中的所有列配置这些配置？除了为每列自定义模板？
我不知道。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用the default filter operator 作为参考。

以下示例演示如何配置字符串过滤器并默认选择“包含”运算符，您也可以使用此标签指定活动过滤器运算符及其顺序：<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>

【讨论】：

【解决方案4】：

对于使用此解决方法的每个人，正如@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;
      }
  }
}

【讨论】：

【解决方案5】：

<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

来源链接：DateFilterCellComponent

【讨论】：

欢迎来到 SO！不鼓励仅使用代码的答案，因为它们无法深入了解问题是如何解决的。请更新您的答案，说明您的代码如何解决 OP 的问题 :)
感谢@Xasanali，请注意您的答案仅适用于“过滤器行”，不适用于“菜单过滤器”