我试图在asp.net MVC中包含剑道网格的剑道开关,如以下屏幕截图
在此处尝试遵循this kendo forum article
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
...
...
{ field: "Discontinued", width: "70px", template: "<input class='customClass' #if (Discontinued) { # checked='checked' # } # type='checkbox' />",editor: customEditor },
{command: "edit", width: "100px"}],
editable: "inline",
cancel: function(e) {
var grid = this;
var rowUid = e.container.data("uid");
setTimeout(function() {
createSwitch(grid.element.find("tr[data-uid='"+rowUid+"'] .customClass"));
});
},
dataBound: function() {
createSwitch(this.tbody.find(".customClass"));
}
});
function createSwitch(element) {
element.kendoMobileSwitch({
onLabel: "YES",
offLabel: "NO",
change: onChange
});
}
function onChange(e) {
var row = e.sender.element.closest("tr");
var grid = $("#grid").getKendoGrid();
var dataItem = grid.dataItem(row);
var checked = e.checked;
dataItem.set("Discontinued", checked);
// sync data with remote service
grid.dataSource.sync();
}
function customEditor(container, options) {
$('<input type="checkbox" name="' + options.field + '"/>')
.appendTo(container)
.kendoMobileSwitch({
onLabel: "YES",
offLabel: "NO"
});
}
});
</script>
我只是尝试按照以下方式将this example (jquery)解决方案转换为ASP.NET MVC
剃刀区
columns.Bound(c => c.Discontinued).ClientTemplate("<input class='customClass' #if (Discontinued) { # checked='checked' # } # type='checkbox' />");
脚本
<script type="text/javascript">
$(document).ready(function () {
$('.spinner').css('display', 'block');
setTimeout(function () {
$('.spinner').css('display', 'none');
var grid = this;
var rowUid = e.container.data("uid");
createSwitch(grid.element.find("tr[data-uid='" + rowUid + "'] .customClass"));
}, 1000);
function createSwitch(element)
{
element.kendoMobileSwitch({
onLabel: "YES",
offLabel: "NO",
change: onChangeSwitch
});
}
function onChangeSwitch(e)
{
var row = e.sender.element.closest("tr");
var grid = $("#grid").getKendoGrid();
var dataItem = grid.dataItem(row);
var checked = e.checked;
dataItem.set("Discontinued", checked);
// sync data with remote service
grid.dataSource.sync();
}
function customEditor(container, options) {
$('<input type="checkbox" name="' + options.field + '"/>')
.appendTo(container)
.kendoMobileSwitch({
onLabel: "YES",
offLabel: "NO"
});
}
</script>
但是此 与asp.net MVC的jQuery 对话无法正常工作,感谢您提出任何使之可行的建议。