CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-gridkendo-asp.net-mvc
user1414756
user1414756

Reputation: 17

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 status ,, in the other words i would like to check if selected row is expanded or not.

Upvotes: 0

Views: 2871

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

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>
    <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>

Upvotes: 1

Related Questions