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

DetailTemplate

configuration

The template which renders the detail rows. Check Detail Template for a live demo.

The detail template content cannot be wider than the total width of all master columns, unless the detail template is scrollable.

detailTemplate

String|Function

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "Jane Doe", age: 30 },
    { name: "John Doe", age: 33 }
  ],
  detailTemplate: ({ name, age }) => `<div>Name: ${kendo.htmlEncode(name)}</div><div>Age: ${kendo.htmlEncode(age)}</div>`
});
</script>