Question

我正在尝试为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数据源中的字段？

Answer 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

用于Vue的Kendo UI的网格中的复选框列

1 个答案: