バインド可能なチェックボックス列をグリッドに追加
現在MySQLブール値を表示しているKendoグリッドにこの列があるため、1または0があります。
これは、autosyncおよびinline：trueグリッド。
この列のタイプを「チェックボックス」にしたいのですが、奇妙な理由で、チェックを外したときに1から0に変わる「有効」チェックボックスを表示するWebでデモや例を見つけることができません。
以前の考慮事項がいくつかあります。
- 編集するセルをクリックすると、編集モードに切り替わり、エディター機能が実行されます。
- 使用されているHTMLに関係なく、エディションモードでnotである場合、変更はモデルに転送されません。
- Kendo UIは
booleanを編集用のチェックボックスとしてレンダリングしますが、編集モードではありません。
あなたがする必要があるのは：
- チェックボックスを表示するためのテンプレートを定義します。
- チェックボックスを2回クリックしたくない場合（1つ目は編集モードに入り、2つ目は値を変更します）、チェックボックスを定義する必要がありますが、クリックをインターセプトする変更イベントをバインドしてモデルを変更する必要があります。
テンプレート定義：
{
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
バッチ編集したグリッドでも同じ問題が発生しました。私が見つけた解決策は、1つの特定の列のみに関するものでした（上記の解決策として）。だから私は変わった
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>
$(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>
2018年の更新例!!
テーマ付き。剣道はテーマを使用しているため、標準の「ブラウザ-チェックボックス-ルック」（ブラウザごとに異なる）を使用するのはそれほど良いことではありません。
https://dojo.telerik.com/IluJosiG/14
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options){
var data = [
{
include: true,
Amount: 20
},
{
include: true,
Amount: 30
},
{
include: false,
Amount: 0
}
];
options.success(data);
}
},
schema:{
model: {
fields: {
include: { type: 'boolean' },
Amount: { type: "number", },
}
}
}
},
columns: [
{
field: "include",
editor: function(container, options){
var grid = $(container).closest('[data-role=grid]').data('kendoGrid');
var row = grid.dataItem(container.closest('tr'));
//console.log('grid', grid);
console.log('row', row);
if(row.include){
row.set('include', false);
row.set('Amount', 0);
} else {
row.set('include', true);
row.set('Amount', 1);
}
grid.closeCell();
},
template: function(items){
var guid = kendo.guid();
var checked = ''; // = ' disabled="disabled" ';
if(items.include){
checked = ' checked="checked" ';
}
return '<input class="k-checkbox" id="' + guid + '" type="checkbox" ' + checked + ' />' +
'<label class="k-checkbox-label" for="' + guid + '">​</label>';
},
attributes:{ align:"center" },
headerAttributes: { 'class': 'k-header-centeralign' }
},
{
field: "Amount",
format: "{0:n6}",
editor: function(container, options){
$('<input data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 6,
min: 0,
restrictDecimals: true // Specifies whether the decimals length should be restricted during typing. The length of the fraction is defined by the decimals value
}
);
}
}
],
editable: true,
save: function(e){
console.log('save', e);
var model = e.model;
console.log('save model', model);
var items = this.dataSource.data();
var item = $.grep(items, function(e){ return e.uid == model.uid; })[0];
//console.log('item uid', items);
var userAmount = e.values.Amount;
if(userAmount>0){
item.set('include', true);
console.log('set include true');
} else {
item.set('include', false);
console.log('set include false');
}
// redraw row for checkbox
// timeout because qty is not updated before
var grid = e.sender;
setTimeout(function(){
var row = grid.element.find('tr[data-uid=' + model.uid + ']');
console.log('redraw row for checkbox', row);
kendoFastReDrawRow(grid, row);
},0);
},
dataBound: function(e){
console.log('dataBound');
},
});
});
function kendoFastReDrawRow(grid, row) {
var dataItem = grid.dataItem(row);
var rowChildren = $(row).children('td[role="gridcell"]');
for (var i = 0; i < grid.columns.length; i++) {
var column = grid.columns[i];
var template = column.template;
var cell = rowChildren.eq(i);
if (template !== undefined) {
var kendoTemplate = kendo.template(template);
// Render using template
cell.html(kendoTemplate(dataItem));
} else {
var fieldValue = dataItem[column.field];
var format = column.format;
var values = column.values;
if (values !== undefined && values != null) {
// use the text value mappings (for enums)
for (var j = 0; j < values.length; j++) {
var value = values[j];
if (value.value == fieldValue) {
cell.html(value.text);
break;
}
}
} else if (format !== undefined) {
// use the format
cell.html(kendo.format(format, fieldValue));
} else {
// Just dump the plain old value
cell.html(fieldValue);
}
}
}
}td[role=gridcell] .k-checkbox + label.k-checkbox-label {
cursor: pointer !important;
}<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<div id="example">
<div id="grid"></div>
</div>