Флажок в сетке для Kendo UI для Vue

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 . я попробовал это на их примере здесь , где вы могли видеть там

то же самое <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 # } # />

но поскольку он не привязан к источнику данных, он действует как чтение. любые сделанные изменения не влияют на источник данных. Вам все еще нужно переключиться в режим редактирования для редактирования.

пожалуйста, проверьте это решение