我正在尝试在我的Kendo Angular 2网格中实现一列复选框 .
我正在按照文档中的示例(没有复选框):http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-remote-directives
我已更改示例以添加列:http://plnkr.co/edit/hNkj1ZFZJopDyFxn59B3?p=preview
这是我的组件:
@Component({
selector: 'my-app',
template: `
<kendo-grid
productsBinding
[pageSize]="10"
[pageable]="true"
[sortable]="true"
[height]="270">
<kendo-grid-column field="checked" title="" width="50" [headerStyle]="{'text-align': 'center'}" [style]="{'text-align': 'center'}">
<ng-template kendoGridHeaderTemplate let-dataItem>
<md-checkbox
class="check-column"
[checked]="allItemsChecked"
color="primary"
(change)="checkAllClicked($event)">
</md-checkbox>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
<md-checkbox
class="check-column"
[checked]="dataItem.checked"
color="primary">
</md-checkbox>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="ProductID" width="80"></kendo-grid-column>
<kendo-grid-column field="ProductName"></kendo-grid-column>
<kendo-grid-column field="UnitPrice" width="80" format="{0:c}"></kendo-grid-column>
<kendo-grid-column field="UnitsInStock" width="80"></kendo-grid-column>
</kendo-grid>
`
})
export class AppComponent {
public allItemsChecked: boolean = false;
checkAllClicked($event){
console.log("checkAllClicked",$event);
//TODO: implement...
}
}
(在Plunker中你可以看到 ProductsBindingDirective
和 ProductsService
实现)
但是现在我不确定在单击 Headers 中的复选框时更改所有项的checked属性的最佳方法是什么...
我应该从网格中获取数据,更改所有项目中的属性并将其设置回来吗?或者我还没有看到另一种选择?
2 回答
我想我发现了一个类似但可能更清晰的解决方案:
使用“kendo-grid-checkbox-column”组件:
使用kendo-grid中的属性
和
然后你可以在控制器中影响那些值:
使用网格数据的优势在于,如果您有过滤器,那么它将“仅”检查过滤的数据 . 在我的示例中,您可以在任何事件上处理已检查行的ID .
这就是我实现它的方式 . 我看不到你是如何数据绑定的,我使用了GridDataResult . 为了这个例子,我简化了网格 .
一些必需的组件,特别是我在本例中使用的GridDataResult,State和process:
一些局部变量:
组件HTML网格 . 请注意,我必须设置 Headers 列,其中包含复选框sortable = false以获取要注册的click事件 .
这是我绑定到数据对象数组的地方:
这是点击事件 . 您可以通过我之前设置的GridDataResult变量获取网格中的当前项 . 循环遍历数据并更新绑定到复选框的数据元素 . 我是一个名为“add”的布尔值