New to Kendo UI for jQuery? Download free 30-day trial

Allow the Expansion of a Single Row in Master Data Grids

Environment

Product Progress® Kendo UI® Grid for jQuery
Preferred Language JavaScript

Description

How can I expand a single row in a master Kendo UI Grid at a specific time?

Solution

  1. Handle the detailExpand event.
  2. Find any previously expanded rows and collapse them by using the collapseRow() method.

The following example demonstrates how to collapse a Grid row that was previously expanded when the user expands a new one.

    <div id="grid"></div>
    <script>
      $(document).ready(function() {
        var grid = $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 6,
            serverPaging: true,
            serverSorting: true
          },
          scrollable: false,
          sortable: true,
          pageable: true,
          detailInit: detailInit,
          detailExpand: function(e){
            e.sender.tbody.find('.k-detail-row').each(function(idx, item){
              if(item !== e.detailRow[0]){
                e.sender.collapseRow($(item).prev());
              }
            })
          },
          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"
            }
          ]
        }).data('kendoGrid');
      });

      function detailInit(e) {
        $("<div/>").appendTo(e.detailCell).kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 3,
            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>

See Also

In this article