detailInit

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.

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.

Example - subscribe to the "detailInit" event during initialization

<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>

Example - subscribe to the "detailInit" event after initialization

<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>