CODEWITHSUNDEEP
kendo-gridkendo-ui-angular2
Hashem
Hashem

Reputation: 475

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

In Kendo UI for Angular 2:

1- How can I hide the extra filter options (the filter at the bottom in the picture).

2- For the first (remaining) filter: how to set a default operation and then hide the operations dropdown?

enter image description here

Upvotes: 3

Views: 5662

Answers (5)

Martin Vecchione
Martin Vecchione

Reputation: 66

For everyone who use this workaround as @Hashem explained dont forget to add 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;
      }
  }
}

Upvotes: 0

Xasanali
Xasanali

Reputation: 1

<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

source Link : DateFilterCellComponent

Upvotes: -1

Kevin Hern&#225;ndez
Kevin Hern&#225;ndez

Reputation: 844

You can use the default filter operator as reference.

The following example demonstrates how to configure a string filter and select the "contains" operator as default, also you can specify the active filter operators with their order using this tag: <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>

Upvotes: 0

Philipp
Philipp

Reputation: 1884

You can hide the extra filter by setting [extra]="false" at the kendo-grid-date-filter-menu component. (API Reference)

The default operator can be set by utilizing the operator input.

Example:

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

When it comes to hiding the operators-dropdown, there is no configuration-option right now for the filter-menu. For the row-filter approach this is possible by setting [showOperators]="false".

You can get around this limitation by either hiding it via css (but this still would be a workaround), or by implementing a custom filter that fits your requirements. (Documentation)

Upvotes: 5

Hashem
Hashem

Reputation: 475

A css workaround can be like this: 

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

But I'm still in need for better Kendo configurations.

Upvotes: 0

Related Questions