All Components


Represents the Kendo UI Grid detail template. It provides additional details about a particular data row by expanding or collapsing the content. The detail template does not work with locked columns and requires that the detailRowHeight option is set for virtual scrolling.

To define the detail template, nest a <template> tag with the kendoDetailTemplate directive inside <kendo-grid>. The template context is set to the current data item and the following additional fields are passed:

  • dataItem—Defines the current data item.
  • rowIndex—Defines the current row index.

  selector: 'my-app',
  template: `
        <kendo-grid-column field="ProductID"></kendo-grid-column>
        <kendo-grid-column field="ProductName"></kendo-grid-column>
        <kendo-grid-column field="UnitPrice"></kendo-grid-column>
        <template kendoDetailTemplate let-dataItem>
          <div *ngIf="dataItem.Category">

class AppComponent {
    public data = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": false,
        "Category": {
            "CategoryID": 1,
            "CategoryName": "Beverages",
            "Description": "Soft drinks, coffees, teas, beers, and ales"
      }, {
        "ProductID": 3,
        "ProductName": "Aniseed Syrup",
        "UnitPrice": 10.0000,
        "Discontinued": false,
        "Category": {
            "CategoryID": 2,
            "CategoryName": "Condiments",
            "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"




In this article