MVC wrapper and regular JavaScript Kendo grid together - asp.net-mvc

Question

So I was trying to bind a complex object , a list, to the detail grid of the the Kendo grid. I understand that you can not do that, so what I did was grab the data and turn it into a JSON and use that as a data source for this grid I created. The grid is created like this
#(Html.Kendo().Grid(Model).Name("Access")
.Columns(columns =>
{
columns.Bound("ProjId").Width(220).Title("Project #");
})
//I tried
.DetailTemplate("<div id=DetailTemplate'></div>")
// I also tried
.ClientDetailTemplateId("<div id=DetailTemplate'></div>")
.Selectable()
.Events(events => events.DetailInit("initDetailGrid"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
)
I then have this in my script
<script type="text/javascript">
function initDetailGrid(e) {
//Hide the grid header
$(".k-grid tbody .k-grid .k-grid-header").hide();
var grid = e.sender;
//Get the data from the selected record
var currentDataItem = grid.dataItem(grid.select());
var newJsonObject = [];
for (var i = 0; i < currentDataItem.taskId.length; i++) {
var taskId = currentDataItem.taskId[i];
newJsonObject.push({
Id: objId,
Interval: currentDataItem.InternalExternal[taskId],
....
});
}
$("#DetailTemplate").kendoGrid({
columns: [
{field:"taskId", template:..stuff..},
{field: "Interval", template: .. stuff..}
],
dataSource: newJsonObject
});
}
</script>
So basically I want to use the $("#DetailTemplate") as the detail grid for the row but it not working and I do not know how to approach it.
EDIT
What I am trying to do is create a Kendo UI grid, via javascript, to use as the detail template for the parent Grid, which is created using the ASP-MVC helper.

Answer 1

It is not getting clear what you are trying to achieve. Did you check the hierarchy demo here?
Basically all you need to replace inside of it is to fill the dataSource directly instead of using transport configuration.
function detailInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
//via the data option of the dataSource
data: e.data.NestedArrayFeild
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
});
}