Whenever I expand a detail row in a Kendo grid I would like to get remote data to populate the detail template. Here is my current process:
- Create the kendo grid and populate with data
- Register the detailInit event during grid initializtion
- When user clicks the row to expand, detailInit gets called
- In detailInit, create a kendo DataSource with my remote data
- How do i change the detailRow with my new data? Is this possible?
fyi...The detail row is NOT a kendoGrid. It is a layout of tags like this #= MyDataField#
function detailInit(e) {
var detailRow = e.detailRow;
//Go get the details for the selected row
var ds = new kendo.data.DataSource(
{
transport: {
read: {
data: "d.Data",
dataFilter: function (data) {
var msg = eval('(' + data + ')');
if (msg.hasOwnProperty('d'))
return msg.d;
else
return msg;
},
contentType: "application/json; charset=utf-8",
type: "POST",
dataType: "json",
url: "SearchComponents.aspx/GetComponent"
},
parameterMap: function (options) {
return kendo.stringify({ lpComponentId: e.data.componentid });
}
}
});
ds.fetch(function () {
var data = this.data();
});
//How do i update the detail row with my dataSource?
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
}