Use Grid Detail Template with Row Template

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	2018.2.620

Description

I can't seem to get the k-row-template and k-detail-template to work together using the directive mechanism. The row renders fine, but when I click on the expand button, I get the following error:

    Uncaught TypeError: Cannot convert undefined or null to object
        at eval (eval at compile (kendo.all.js:197), <anonymous>:3:55)
        at HTMLAnchorElement.<anonymous> (kendo.all.js:60573)
        at HTMLTableElement.dispatch (jquery.js:5183)
        at HTMLTableElement.elemData.handle (jquery.js:4991)

Solution

1. Add the k-row-template directive to the tr element and add a k-master-row class as well
2. Add the data-uid of the row to avoid any issues with duplicated rows or another unexpected behaviour

3. Remember to include a hierarchy cell

       <kendo-grid options="mainGridOptions">
         <table>
           <tr data-uid="#= uid #" class="k-master-row" k-row-template >
             <td class="k-hierarchy-cell" aria-expanded="false"><a class="k-icon k-i-expand" aria-label="Expand" tabindex="-1"></a>
             </td>
             <td>
   
             </td>
             <td>  </td>
           </tr>
         </table>
         <div k-detail-template>
           Detail
         </div>
       </kendo-grid>
   

    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <kendo-grid options="mainGridOptions">
          <table>
            <tr data-uid="#= uid #" class="k-master-row" k-row-template >
              <td class="k-hierarchy-cell" aria-expanded="false"><a class="k-icon k-i-expand" aria-label="Expand" tabindex="-1"></a>
              </td>
              <td>

              </td>
              <td>  </td>
            </tr>
          </table>
          <div k-detail-template>
            <kendo-tabstrip>
              <ul>
                <li class="k-active">Orders</li>
                <li>Contact information</li>
              </ul>
              <div>
                <div kendo-grid k-options="detailGridOptions(dataItem)"></div>
              </div>
              <div>
                <ul class="contact-info-form">
                  <li><label>Country:</label> <input class="k-textbox" ng-model="dataItem.Country" /></li>
                  <li><label>City:</label> <input class="k-textbox" ng-model="dataItem.City" /></li>
                  <li><label>Address:</label> </li>
                  <li><label>Home phone:</label> </li>
                </ul>
              </div>
            </kendo-tabstrip>
          </div>
        </kendo-grid>
      </div>
    </div>

    <style>
      .contact-info-form {
        list-style-type: none;
        margin: 30px 0;
        padding: 0;
      }

      .contact-info-form li {
        margin: 10px 0;
      }

      .contact-info-form label {
        display: inline-block;
        width: 100px;
        text-align: right;
        font-weight: bold;
      }
    </style>

    <script>
      angular.module("KendoDemos", [ "kendo.directives" ])
        .controller("MyCtrl", function($scope){
        $scope.mainGridOptions = {
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          },
          sortable: true,
          pageable: true,
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px"
          },{
            field: "LastName",
            title: "Last Name",
            width: "120px"
          }]
        };

        $scope.detailGridOptions = function(dataItem) {
          return {
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              serverPaging: true,
              serverSorting: true,
              serverFiltering: true,
              pageSize: 5,
              filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
            },
            scrollable: false,
            sortable: true,
            pageable: true,
            columns: [
              { field: "OrderID", title:"ID", width: "56px" },
              { field: "ShipCountry", title:"Ship Country", width: "110px" },
              { field: "ShipAddress", title:"Ship Address" },
              { field: "ShipName", title: "Ship Name", width: "190px" }
            ]
          };
        };
      })
    </script>