I Want Expand And Collapse Row On Select In Kendo Grid For Mvc Ui
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 stat
Solution 1:
Use this script:
selectable: true,
change: function() {
let $row = this.select();
if ($row.length && $row.find('[aria-expanded="true"]').length) {
this.collapseRow($row);
}
else {
this.expandRow($row);
}
}
It checks if the row is expanded by looking after an element with aria-expanded.
Demo:
<!DOCTYPE html><html><head><basehref="https://demos.telerik.com/kendo-ui/grid/hierarchy"><style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style><title></title><linkhref="https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css" /><scriptsrc="https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"></script></head><body><divid="example"><divid="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);
}
}
});
});
functiondetailInit(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>
Post a Comment for "I Want Expand And Collapse Row On Select In Kendo Grid For Mvc Ui"