filter button disabled in grid filter menu popup

[Chahid]

Hello, I am currently facing an issue with the "Filter" button in the filter menu popup of my grid.

I implemented a grid with a customized filter menu where I have set the [extra] option to false so I have to fill only one input, as following:

<kendo-grid-column field="ProductName" title="Product Name">

   <ng-template kendoGridFilterMenuTemplate let-filter let-column="column" let-filterService="filterService">

     <kendo-grid-string-filter-menu [extra]="false" [column]="column" [filter]="filter" [filterService]="filterService">

     </kendo-grid-string-filter-menu>

   </ng-template>

</kendo-grid-column>

I used the same code to create other grids in my application and I am not facing this issue. Here when I open the filter menu popin, the "Filter" button is first disabled which is normal as I must type something in the filter input to enable it, but even if I do, the "Filter" button stays disabled, and I couldn't figure out what am I missing.

Is there any generic bad implementation that can cause this behavior and that I can fix? Or can I at least make the "Filter" button always clickable (I tried to remove the [disabled] option from the template in the kendo-grid-string-filter-menu file but I still have the same issue)?

Thank you in advance for you reply and tell me if you need some further informations.

 

Chahid

 

[Martin]

Hi Chahid,

Thank you for the provided details.

The markup looks valid and produces a working filter:

https://stackblitz.com/edit/angular-wsmorg

Please ensure that the filter descriptors are passed to the Grid filter input and  the data is correctly filtred on filterChange (dataStateChange) event:

   <kendo-grid
      [data]="gridData"
      [filter]="filter"
      filterable="menu"
      (filterChange)="filterChange($event)"
      [height]="400"

  public filter: CompositeFilterDescriptor;
  public gridData: any[] = filterBy(sampleProducts, this.filter);

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
    this.gridData = filterBy(sampleProducts, filter);
  }

Regards,
Martin
Progress Telerik

[David]

I had the same issue. I updated it all to the latest version of Telerik and it worked.

[Yamunadevi]

I am having the same issue, none of the solution works.
Here is the stackblitz:
https://stackblitz.com/edit/angular-2vd3ci?file=src%2Fapp%2Fapp.component.ts

import { Component } from '@angular/core';
import { sampleProducts } from './products';
import { Product } from './model';
import { paperclipIcon } from '@progress/kendo-svg-icons';
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: 'my-app',
  template: `
        <kendo-grid [kendoGridBinding]="gridData" filterable="menu" 
        [height]="250" [style.width.px]="400">
        (filterChange)="dataGridFilterChange($event)"
        [filter]="filter"
            <kendo-grid-column field="ProductID" title="Product ID" [width]="150" [filterable]="true"> 
            <ng-template kendoGridFilterMenuTemplate let-column="column"
        let-filter="filter" let-filterService="filterService">
              <kendo-textbox textField="text" placeholder="" class="custom-fill-mode"            
              (valueChange)="onTextFilterChange($event,column)">
              </kendo-textbox>
        </ng-template>
        </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Unit Price" filter="numeric"
            [filterable]="false">
        </kendo-grid-column>
        </kendo-grid>
    `,
})
export class AppComponent {
  public icons = { paperclip: paperclipIcon };
  public gridData: Product[] = sampleProducts;
  //Filter
  public filter: CompositeFilterDescriptor;
  ngOnInit(): void {
    try {
      this.filter = {
        logic: 'and',
        filters: [],
      };
    } catch (er) {}
  }
  dataGridFilterChange(filters: CompositeFilterDescriptor) {
    this.filter = filters;
    console.log(filters);
  }
  public onTextFilterChange(value, col) {
    let idx = this.filter.filters.findIndex(
      (filt) => filt['field'] == col.field
    );
    if (idx > -1) {
      this.filter.filters.splice(idx, 1);
    }
    this.filter.filters.push({
      field: col.field,
      operator: 'eq',
      value: '123',
    });
    this.dataGridFilterChange(this.filter);
  }
}

[Martin]

Hi Yamunadevi,

Thank you for the provided code snippet.

In order to enable the Filter button, and filter the Grid correctly, provide the filterService to the onTextFilterChange event handler:

 <ng-template kendoGridFilterMenuTemplate let-column="column"
        let-filter="filter" let-filterService="filterService">
              <kendo-textbox textField="text" placeholder="" class="custom-fill-mode"            
              (valueChange)="onTextFilterChange($event,column, filterService)">
              </kendo-textbox>
        </ng-template>

Inside the event handler use the filter service, to filter the Grid data like:

  public onTextFilterChange(value, filterService: FilterService) {
    filterService.filter({
      filters: [
        {
          field: 'ProductID',
          operator: 'eq',
          value: value,
        },
      ],
      logic: 'or',
    });
  }

For more details on how to set custom filter menu components, please check the following article:

 

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/#toc-custom-filters

Here is the updated demo:

https://stackblitz.com/edit/angular-2vd3ci-kg8cuk

I hope this helps.

[Priti]

Thanks :)