Kendo Grid Hierarchy (child) grid on click event - kendo-ui

Question

I want to add Hierarchy (child) grid on button click event. By default on grid load, there is a child grid. I want it to bind on button click.
var people = new kendo.data.DataSource({
data: {!Output},
batch: true,
schema: {
model: {
fields: {
carId: { type: "string" },
vehicleId: { type: "string", editable:false },
Percentage: { type: "number", editable:false },
Price: { type: "string", editable:false},
CarType: { type: "string", editable:false},
CarSize: { type: "string", editable:false},
CarPerCase: { type: "number", editable:false },
Family: { type: "string", editable:false},
ModelType: { type: "string", editable:false},
EPId: { type: "string" },
Tax: { type: "string" }
}
}
},
pageSize: 20,
sort: { field: "vehicleId", dir: "asc" }
});
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
pageable: true,
toolbar: [
"save",
"cancel",
{
name: "Add",
text: "Show Car Price",
click: function(e) {
return false;
}
},
{
name: "Delete",
text: "Hide Car Price",
click: function(e) {
return false;
}
}
],
columns:[
{
field: "carId",
title: "Car ID",
width: 150,
hidden:true
},
{
field: "vehicleId",
title: "Vehicle ID",
width: 100
},
{
field: "Percentage",
title: "Percentage",
width: 70
},
{
field: "Price",
title: "Price",
width: 250
},
{
field: "CarType",
title: "Car Type"
},
{
field: "CarSize",
title: "Car Size"
},
{
field: "CarPerCase",
title: "Car Per Case"
},
{
field: "Family",
title: "Family"
},
{
field: "ModelType",
title: "Model Type",
width: 100
},
{
field: "EPId",
title: "EP Id",
hidden: false
},
{
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}
],
editable:true,
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailInit: detailInit
});
// hierarchy grid
function detailInit(e) {
var detailRow = e.detailRow;
codeDetailData = e.data;
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: e.data.ItemPrices.toJSON(),
editable:true,
navigatable: true,
scrollable: false,
sortable: true,
pageable: true,
columns: [
{
field: "Engine",
width: "200px",
editor: serviceItemAutoCompleteEditor
},
{
field: "TN",
title:"TN",
width: "110px"
},
{
field: "TaxApplied",
title:"Tax Applied"
},
{
field: "TaxChange",
title: "Tax Change",
width: "300px"
},
{
field: "StartDate",
title: "Start Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
},
{
field: "EndDate",
title: "End Date",
format:"{0:dd-MM-yyyy}",
editor: dateTimeEditor
}
]
});
}
Now the detailInit: detailInit configuration is set on load. I want that load without detailInit (responsible for child grid), and bind this setting on button click. Is it possible?

Answer 1

You will have to add a detail template to tell the grid there is going to be a detailinit grid
var element = $("#grid").kendoGrid({
dataSource: people,
navigatable: true,
toolbar: [
"save",
"cancel", {
name: "Add",
text: "Show Car Price",
click: function (e) {
return false;
}
}, {
name: "Delete",
text: "Hide Car Price",
click: function (e) {
return false;
}
}],
columns: [{
field: "carId",
title: "Car ID",
width: 150,
hidden: true
}, {
field: "vehicleId",
title: "Vehicle ID",
width: 100
}, {
field: "Percentage",
title: "Percentage",
width: 70
}, {
field: "Price",
title: "Price",
width: 100
}, {
field: "CarType",
title: "Car Type"
}, {
field: "CarSize",
title: "Car Size"
}, {
field: "CarPerCase",
title: "Car Per Case"
}, {
field: "Family",
title: "Family"
}, {
field: "ModelType",
title: "Model Type",
width: 100
}, {
field: "EPId",
title: "EP Id",
hidden: false
}, {
field: "Tax",
title: "Tax",
format: "{0:c}",
width: 100
}],
groupable: true,
filterable: true,
sortable: true,
reorderable: true,
resizable: true,
columnMenu: true,
pageable: {
refresh: true,
pageSizes: [10, 20, 50],
buttonCount: 5
},
editable: "incell",
detailTemplate: 'Item Prices: <div class="grid"></div>',
dataBound:function(e){
$(".k-hierarchy-cell").hide();
$(".k-hierarchy-col").hide();
}
});
then bind the detail event to the grid using a click button
$("#testbtn").click(function (e) {
$(".k-hierarchy-cell").show();
$(".k-hierarchy-col").show();
var grid = $("#grid").data("kendoGrid");
grid.unbind("detailInit");
grid.bind("detailInit", grid_detailInit);
grid.refresh();
});
Here is a Jsfiddle Example http://jsfiddle.net/ecotz69h/7/