я хочу развернуть и свернуть строку при выборе в сетке кендо для MVC пользовательского интерфейса - PullRequest
Новая
       65

я хочу развернуть и свернуть строку при выборе в сетке кендо для MVC пользовательского интерфейса

0 голосов
/ 07 мая 2020

Я пытаюсь развернуть строку при выборе и свернуть ту же строку при нажатии, используя сетку Kendo для Mvc UI ,, Как проверить класс CSS значка стрелки в выбранной строке - статус k-plus, , другими словами, я хотел бы проверить, расширена ли выбранная строка.

1 Ответ

1 голос
/ 07 мая 2020

Используйте этот сценарий: 

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.

Demo : 

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...