Добавление связующего столбца флажка в сетку

Введите этот столбец в сетку Kendo, в котором в настоящее время отображается логическое значение MySQL, поэтому у нас есть либо 1, либо 0.

Сделал эту демонстрацию для воспроизведения...

Это в сетке autosync и inline: true.

Мне хотелось бы, чтобы этот столбец имел тип "Checkbox", но по каким-то странным причинам я просто не могу найти демонстрацию или пример в Интернете, который отображает флажок "включен", который меняет от 1 до 0, когда он снят, и вице- Versa.

Ответ 1

Есть несколько предыдущих соображений:

Когда вы щелкаете в ячейке для редактирования, вы переключаете ее в режим редактирования, а затем выполняете функцию редактора.
Если вы не находитесь в режиме редактирования, несмотря на используемый HTML, изменения не переносятся в модели.
Пользовательский интерфейс Kendo отображает boolean как флажки для редактирования, но не в режиме редактирования.

Что вам нужно сделать:

Определите шаблон для отображения флажка.
Если вы не хотите дважды щелкнуть флажок (первый для входа в режим редактирования, а второй для изменения его значения), вам нужно установить флажок, но привязать событие изменения, которое перехватывает клики на нем и изменяет модель.

Определение шаблона:

{
    title   : "Fully Paid",
    field   : "fullyPaid",
    template: "<input name='fullyPaid' class='ob-paid' type='checkbox' data-bind='checked: fullyPaid' #= fullyPaid ? checked='checked' : '' #/>"
}

Как вы можете видеть, я не определяю функцию редактора, так как мы изменим значение флажка без входа в режим редактирования.

Определите обработчик, который обнаруживает изменения в флажке, который я определил в шаблоне, и обновляю модель.

grid.tbody.on("change", ".ob-paid", function (e) {
    var row = $(e.target).closest("tr");
    var item = grid.dataItem(row);
    item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);
});

Ваш JSBin изменен здесь: http://jsbin.com/ebadaj/12/edit

Ответ 2

У меня была такая же проблема с моей отредактированной сеткой. Решения, которые я нашел, были предназначены только для одной конкретной колонки (как упомянутое выше решение). Поэтому я изменил

item.set("fullyPaid", $(e.target).is(":checked") ? 1 : 0);

var col = $(this).closest('td');
dataItem.set(grid.columns[col.index()].field, checked);

Поэтому вы можете использовать его для любых столбцов флажков.

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

Итак, я тестировал различные вещи, чтобы заставить его работать и в конечном итоге:

В определении столбца:

.ClientTemplate("<input type='checkbox' #= CheckboxColumn? checked='checked': checked='' # class='chkbx' />");

И script ниже:

<script>
    $(function () {
        $('#GridName').on('click', '.chkbx', function () {
            var checked = $(this).is(':checked');
            var grid = $('#GridName').data().kendoGrid;
            grid.closeCell();
            var dataItem = grid.dataItem($(this).closest('tr'));
            var col = $(this).closest('td');
            grid.editCell(col);
            dataItem.set(grid.columns[col.index()].field, checked);
            grid.closeCell(col);
        });
    });
</script>