when last character deleting from input box, event is not firing in kendo grid and angular 5?

Question

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

Answer 1

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