Assembling N-Nested Kendo UI Grid asp.NET MVC 4 - kendo-ui

Question

I am looking for N level nested child behavior in Kendo UI grid.
so far i have been implementing upto 3-4 level but those grids have to be hard coded in the Code.
Please Guide if somebody has done it dynamic way or generating grid dynamically as child grid
if Possible any alternatives to achieve same.
I hope you guys can help out.

Answer 1

I have edited the Detail Template demo found here: http://demos.telerik.com/kendo-ui/grid/detailtemplate
The fiddle:
http://jsfiddle.net/j5b64/1/
detailRow.find(".orders").kendoGrid({
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
dataSource: {...
Detail rows are not initialized until they are expanded (They don't exist in the DOM). So the call to make the new grid can't happen until we expand the row that will contain it.
Luckily Kendo had provided a 'detailInit' Event that you can plug into and initialize your child grid.
Update for .net binding:
First on your page you will need to define a template. It is important to use a class and not an ID in your template. Your template will be used multiple times and you want to maintain the uniqueness of IDs.
<script type="text/x-kendo-template" id="template">
<div class="orders"></div>
</script>
You will then need to reference that template to be the detail row template for your grid. Here we just need to reference the id of our template above. (you can use .DetailTemplate() to define the template in line, but then it would be harder to use it for later child grids as you would have to parse it out of the server made JS)
#(Html.Kendo().Grid<mySite.ViewModels.GridViewModel>()
.Name("Grid")
.ClientDetailTemplateId("template")
.Columns(columns => .....
Now comes the JS. There is two things we need to do. One is create a reusable initiation function and the other is register this function to be ran on initiation.
In our function we should define a new grid. Again this is done in JS at this point. Theoretically you could define an example grid and look for the server built JQuery that would be its sibling and reuse that for your child grids, but at that point you might as well define your grid using JQuery.
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".orders").kendoGrid({
detailTemplate: kendo.template($("#template").html()),
detailInit: detailInit,
....
Now we need to link up our first grid to use our Initiation function
$(document).ready({
$("#Grid").data("kendoGrid").bind("detailInit", detailInit);
});
I hope this helps.