Use Grid Detail Template with Row Template
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Product Version | 2018.2.620 |
Starting with R2 2022, the Kendo UI team officially drops the support for AngularJS 1.x through Kendo UI for jQuery. The AngularJS related files and functionality are removed from the bundles and distribution in R3 SP1 2023. The last version that contains the files is R3 2023.
Description
I can't 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
- Add the
k-row-template
directive to thetr
element and add ak-master-row
class as well - Add the
data-uid
of the row to avoid any issues with duplicated rows or another unexpected behaviour -
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>
The example loads Kendo UI 2023.3.1010 version.
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1010/js/kendo.all.min.js"></script>
<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>