我想在Kendo网格中选择MVC UI的展开和折叠行 [英] i want expand and collapse row on select in kendo grid for MVC UI
本文介绍了我想在Kendo网格中选择MVC UI的展开和折叠行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试通过使用Kendo Grid for Mvc UI来扩展选择时的行并单击时折叠同一行，如何在选中的行中检查箭头图标的CSS类-k-plus状态，在另一行中我想检查所选行是否扩展的单词.
i am trying to expand row on select and collapse same row on click by using Kendo Grid for Mvc UI ,, How to Check the CSS class of the arrow icon in the selected row - k-plus status ,, in the other words i would like to check if selected row is expanded or not.
推荐答案
使用此脚本:
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
它通过使用aria-expanded照顾元素来检查是否扩展了行.
It checks if the row is expanded by looking after an element with aria-expanded.
演示:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/hierarchy">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var element = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
],
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
});
});
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "110px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "300px" }
]
});
}
</script>
</div>
</body>
</html>
这篇关于我想在Kendo网格中选择MVC UI的展开和折叠行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
