Question

我的组件中有一个Kendo UI Grid。我在该组件中也有一个Kendo开关。我希望在切换开关时刷新网格。交换机的值将对网格中使用的数据产生影响。我怎么做？我的网格数据来自DataBindingDirective。所以，它看起来像这样：

MY-component.html

<kendo-switch [(ngModel)]='showDeleted' (click)="onShowDeleted($event)"> 
</kendo-switch>
<kendo-grid
       myDataBinding
...
...
></kendo-grid>

MY-component.ts

 showDeleted = true;
 onShowDeleted(event): void {
    this.myService.showDeleted = this.showDeleted;
    // todo: force grid refresh
    }

MyDatabinding.ts（扩展DataBindingDirective）

constructor(private myService: MyService, grid: GridComponent) {
        super(grid);
    }

public ngOnInit(): void {
    this.subscription = this.myService.subscribe((result) => {
        this.grid.data = result;
    });
this.rebind();
}

public rebind(): void {
        this.myService.query(this.state);
    }

MyService.ts（extends BehaviorSubject）

public query(state: any): void {
    this.fetch(state).subscribe(x => super.next(x));
  }

private fetch(state: any): Observable<GridDataResult> {
//get data here
}

Answer 1

我不确定您的服务是如何编写的。我假设您正在关注教程here（您的服务扩展为extends DataBindingDirective）。

在这种情况下，这应该有效：

<kendo-switch [(ngModel)]='showDeleted' (valueChange)="onValueChange($event)"></kendo-switch>

onValueChange(event): void {
    this.rebind();
}

我不确定您的陈述是什么意思

交换机的值将对数据中使用的数据产生影响网格。

如果您想在客户端上操作数据，可以在subscribe方法中执行此操作。

澄清后编辑（@BradL。）

这是一个全新的故事。 Here是一名工作人员。打开开发人员工具，更改开关值并观察控制台窗口。

关键部分：

//remote-binding.directive:
@Input() myFilter = false;

public rebind(): void {
        console.log("Grid will be refreshed. Switch value is: ", this.myFilter);
        this.products.query(this.state);
    }

//app.component.ts:
        <kendo-switch [(ngModel)]="checked" (valueChange)="onValueChange()"></kendo-switch>

        <kendo-grid
            productsBinding
            [myFilter]="checked"         //<-----------

  @ViewChild(ProductsBindingDirective) dataBinding: DataBindingDirective;

  public onValueChange()
  {
    window.setTimeout(()=>this.dataBinding.rebind());

  }

将Kendo UI Grid更改绑定到其他kendo组件

1 个答案: