I applied multi filter to kendo grid , my application developed in angular 5, here problem that, when deleting last character from input box that time event is not firing. how can fix this issue.

example if i type some thing in input box 'alen' , dataStateChange function will each time, same thing in removing 'alen' last three later removing that time function will but first character remove or delete it will not call(dataStateChangefunction).please help me any one.

html

<kendo-grid
          [data]="gridData"
          [sortable]="{ mode: 'multiple' }"
          [sort]="sort"
          [filterable]="true"
          (dataStateChange)="dataStateChange($event)"
          [height]="500" 
        >
        <kendo-grid-column field="ProductID" title="Product ID" width="120">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
        </kendo-grid-column>
      </kendo-grid>
</kendo-grid>
  `
})
export class AppComponent {
    private filter: string;
    private sort: SortDescriptor[] = [];
    private gridView: GridDataResult;
    private products: any[] = [
      {
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
    },
       {
        "ProductID": 3,
        "ProductName": "Chai",
        "UnitPrice": 122.0000,
        "Discontinued": true
    }
                               ,{
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }];

    constructor() {
        this.loadProducts();
    }

    protected sortChange(sort: SortDescriptor[]): void {
        this.sort = sort;
        this.loadProducts();
    }
    public state:State={
            logic: "and",
            filters: [
                { field: "ProductID", operator: "contains", value:''},
                { field: "ProductName", operator: "contains", value:''},
                { field: "UnitPrice", operator: "contains", value:''}

            ]
        }
    public dataStateChange(State:DataStateChangeEvent):void{
    this.state=State;
    data: process(products, this.state),
}
    private loadProducts(prods): void {
      const products = prods || this.products;
        this.gridData = {
            data: process(products, this.state),
            total: products.length
        };
    }

I applied multi filter to kendo grid , my application developed in angular 5, here problem that, when deleting last character from input box that time event is not firing. how can fix this issue.

example if i type some thing in input box 'alen' , dataStateChange function will each time, same thing in removing 'alen' last three later removing that time function will but first character remove or delete it will not call(dataStateChangefunction).please help me any one.

html

<kendo-grid
          [data]="gridData"
          [sortable]="{ mode: 'multiple' }"
          [sort]="sort"
          [filterable]="true"
          (dataStateChange)="dataStateChange($event)"
          [height]="500" 
        >
        <kendo-grid-column field="ProductID" title="Product ID" width="120">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
        </kendo-grid-column>
      </kendo-grid>
</kendo-grid>
  `
})
export class AppComponent {
    private filter: string;
    private sort: SortDescriptor[] = [];
    private gridView: GridDataResult;
    private products: any[] = [
      {
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
    },
       {
        "ProductID": 3,
        "ProductName": "Chai",
        "UnitPrice": 122.0000,
        "Discontinued": true
    }
                               ,{
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false
    }];

    constructor() {
        this.loadProducts();
    }

    protected sortChange(sort: SortDescriptor[]): void {
        this.sort = sort;
        this.loadProducts();
    }
    public state:State={
            logic: "and",
            filters: [
                { field: "ProductID", operator: "contains", value:''},
                { field: "ProductName", operator: "contains", value:''},
                { field: "UnitPrice", operator: "contains", value:''}

            ]
        }
    public dataStateChange(State:DataStateChangeEvent):void{
    this.state=State;
    data: process(products, this.state),
}
    private loadProducts(prods): void {
      const products = prods || this.products;
        this.gridData = {
            data: process(products, this.state),
            total: products.length
        };
    }

• javascript
• angular
• kendo-ui
• kendo-grid
• angular5

Share Improve this question Follow asked May 25, 2018 at 3:32 rani boyinirani boyini 8111 silver badge55 bronze badges 3

• Please help me any one – rani boyini Commented May 25, 2018 at 5:25
• Hello can you please help me – rani boyini Commented May 25, 2018 at 6:15
• did that answer help you? – Ed Norris Commented Jul 20, 2019 at 3:45

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Add [filter]="state.filter" to the kendo-grid selector. I was facing the same issue and it got resolved when I did the above.

I added [filter]="state.filter" it is working for me.