Vue 的 Kendo UI 网格中的复选框列答案

【问题标题】：Checkbox column in grid for Kendo UI for VueVue 的 Kendo UI 网格中的复选框列
【发布时间】：2018-04-27 08:41:03
【问题描述】：

我正在尝试将复选框列添加到 Kendo UI Vue 的网格中。该列需要反映网格数据源中的布尔字段。我知道我可以在这里添加一个复选框列供选择：https://www.telerik.com/kendo-vue-ui/components/grid/selection/，但这并不适合，因为我需要一个绑定到数据源字段的列。

我的网格如下所示：

<kendo-grid v-once :data-source="myViewModel.gridDataSource">   
    <kendo-grid-column- :template="checkboxTemplate" :width="100" :sortable="false"></kendo-grid-column->
    <kendo-grid-column field="Field 1" title="Field 1"></kendo-grid-column>
    <kendo-grid-column field="Field 2" title="Field 2"></kendo-grid-column>
</kendo-grid>

模板的 html 如下所示：

<template id="checkboxTemplate">
    <input type="checkbox" id="exampleCheck1" />
</template>

一个复选框模板在Vue组件中定义为：

    new Vue({
        ...
        data: {
           checkboxTemplate: this.checkBoxTemplate
        }
        ...

而它调用的方法是：

public get checkBoxTemplate() {
    debugger;
    // debugger gets hit, but I have no idea what to return here.
    return new Object();
}

到目前为止，当页面呈现网格列完全为空时，没有复选框只是一个空的 td 元素：

<td role="gridcell"></td>

有谁知道我必须在这里做什么才能创建一个复选框列并将其绑定到 Vue 数据源中的一个字段？

【问题讨论】：

标签： javascript vue.js kendo-ui

【解决方案1】：

我只是想分享（这可能不是答案），

但由于某种原因，data-bind="checked:Discontinued" 不能用作列模板，但它可以用作 editTemplate。我在他们的示例here 上尝试过，你可以在那里看到

使用相同的<input type="checkbox" data-bind="checked:Discontinued"/>

但在编辑模式下的行为不同。

也是一样

<input type="text" class="k-textbox" data-bind="value:ProductName" name="ProductName" required="required" validationMessage="required" />

因此我得出结论数据绑定在不处于编辑模式时不起作用（或者我还不知道如何）

如果您只想显示/只读，解决方法是使用条件来选中/取消选中复选框，例如

<input type="checkbox" disabled="true" name="Discontinued" # if(Discontinued){ # checked # } # />

但是由于它没有绑定到数据源，所以它就像只读一样。所做的任何更改都不会影响数据源。您仍然需要切换到编辑模式才能进行编辑。

请查看solution

【讨论】：