我想在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的展开和折叠行

相关推荐