多选在KendoUI Grid中似乎相当不错,但它似乎不支持行标题或排除范围。
e.g。我想不能够选择下面显示的突出显示的单元格(例如,我想将它们转换为行标题):
在JQuery / Javascript或服务器端C#Razor语法中首选答案。
根据下面的lgorrious'建议,我将其添加到KendoGrid选项中:
dataBound: function() {
$('#grid tr td:first-child').addClass('k-group-cell');
},
通过欺骗网格忽略第一列(认为它是分层网格中的分组级单元格)来实现这一目的。
我无法按原样使用答案,因为我们正在为列使用dataSource,因为它们会动态变化,但它会让我直接找到一个简单的解决方案
答案 0 :(得分:8)
这是一个奇怪的工作,但我在网格的源代码中找到了这一行:
SELECTION_CELL_SELECTOR = "tbody>tr:not(.k-grouping-row):not(.k-detail-row):not(.k-group-footer) > td:not(.k-group-cell):not(.k-hierarchy-cell)"
不会选择带有k-group-cell类的td。
使用它,只需将属性class =“k-group-cell”添加到您不想选择的列中。
@(Html.Kendo().Grid<Employee>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Department).HtmlAttributes(new { @class = "k-group-cell" }); //Add class to HtmlAttributes, on the column you don't want to be selected.
columns.Bound(p => p.EmployeeId);
columns.Bound(p => p.Name);
})
.Pageable()
.Sortable()
.Filterable()
.Selectable(x => x.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(5)
.Read(read => read.Action("GetEmployees", "Home"))
)
)
另一个java脚本示例:
<div id="grid" style="width: 400px;"></div>
<script type="text/javascript">
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
columns: [
{
field: "Department",
title: "Department",
attributes: {
"class": "k-group-cell" //Same idea with the class attribute
}
}, {
field: "Name",
title: "Full Name"
}, {
field: "EmployeeId",
title: "Employee ID"
}
],
dataSource: {
data: [
{
EmployeeId: 0,
Name: "Joe Mintot",
Department: "Finance"
}, {
EmployeeId: 1,
Name: "Jane Smith",
Department: "IT"
}
],
schema: {
model: {
id: "EmployeeId",
fields: {
EmployeeId: { type: "number" },
Name: { type: "string" },
Department: { type: "string" }
}
}
},
pageSize: 10
},
selectable: "multiple cell",
scrollable: {
virtual: true
},
pageable: true
}).data("kendoGrid");
});
</script>