当最后一个字符从输入框中删除时,事件未在剑道网格和角度5中触发?

时间:2018-05-25 03:32:51

标签: javascript angular kendo-ui kendo-grid angular5

我将多重过滤器应用于kendo网格,我的应用程序以角度5开发,这里的问题是,当从输入框中删除最后一个字符时,事件未触发。如何解决这个问题。

例如,如果我在输入框中键入一些内容' alen' ,dataStateChange函数每次都会删除' alen'最后三个以后删除该时间函数但第一个字符删除或删除它不会调用(dataStateChangefunction)。请帮助我任何一个。

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

1 个答案:

答案 0 :(得分:3)

将[filter] =“ state.filter”添加到kendo-grid选择器。 我遇到了同样的问题,执行上述操作后问题就解决了。