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

DetailInit

events

Fired when a detail table row is initialized.

The event handler function context (available via the this keyword) will be set to the widget instance.

detailInit

Event Data

e.data `kendo.data.ObservableObject`

The data item to which the master table row is bound.

e.detailCell `jQuery`

The jQuery object which represents the detail table cell.

e.detailRow `jQuery`

The jQuery object which represents the detail table row.

e.masterRow `jQuery`

The jQuery object which represents the master table row.

e.sender `kendo.ui.Grid`

The widget instance which fired the event.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailTemplate: 'Products: <div class="grid"></div>',
  detailInit: function(e) {
    e.detailRow.find(".grid").kendoGrid({
      dataSource: e.data.products
    });
  }
});
</script>

<div id="grid"></div>
<script>
function grid_detailInit(e) {
  e.detailRow.find(".grid").kendoGrid({
    dataSource: e.data.products
  });
}
$("#grid").kendoGrid({
  columns: [
    { field: "name" }
  ],
  dataSource: [
    {
      name: "Beverages",
      products: [
        { name: "Tea" },
        { name: "Coffee" }
      ]
    },
    {
      name: "Food",
      products: [
        { name: "Ham" },
        { name: "Bread" }
      ]
    }
  ],
  detailTemplate: 'Products: <div class="grid"></div>'
});
var grid = $("#grid").data("kendoGrid");
grid.bind("detailInit", grid_detailInit);
</script>