以编程方式从剑道网格中选择一行 [英] Selecting a row from a Kendo Grid programmatically
本文介绍了以编程方式从剑道网格中选择一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个网格,它的其中一列是带有复选框的模板:
I have got a grid and one of its columns is a template with a checkbox in it:
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Id).ClientTemplate("<input type=\"checkbox\" id=\"chk_#=Id#\" class=\"gridCK\" onclick=\"zzz(this)\"/>");
当我选中复选框时,我希望其行被选中(反之亦然).我尝试了以下方法:
When I check the checkbox, I want its row to become selected (and vice-versa). I have tried the following:
function zzz(e) {
var id = e.id;
var grid = $("#grid").data("kendoGrid");
var data = grid.dataSource.data();
var res = $.grep(data, function (d) {
if (('chk_' + d.Id) == id) {
return d.Id;
}
});
var row = grid.table.find('tr[data-id="' + res[0].Id + '"]');
if (e.checked) {
row.addClass("k-state-selected");
} else {
row.removeClass("k-state-selected");
}
}
但是什么也没发生,row
变量不是网格的实际行.
But nothing happens, the row
variable isn't the actual row of the grid.
我该如何实现?
推荐答案
将函数处理程序定义为:
Define the function handler as:
function zzz(e) {
var row = $(e).closest("tr");
row.addClass("k-state-selected");
}
查看实际效果:
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
pageSize: 5,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },
{ field: "UnitsInStock", title: "Units In Stock", width: 120 },
{ field: "Select", template: "<input type=\"checkbox\" id=\"chk_#=ProductID#\" class=\"gridCK\" onclick=\"zzz(this)\"/>" }
],
editable: false,
selectable: "multiple"
}).data("kendoGrid");
});
function zzz(i) {
var row = $(i).closest("tr");
row.addClass("k-state-selected");
}
html {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<div id="grid"></div>
这篇关于以编程方式从剑道网格中选择一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文