How to create nested grid in kendo? - kendo-grid

Question

I am trying to create a nested grid that will fetch data and populate into 2 grid, parent and a child.
Child grid has only 1 parent
Child grid limited to adding 16 rows
Removing the parent row will re-fetch data from server
Child grid is always open
It similar to this http://dojo.telerik.com/UqURE
But finally should look like this https://photos.app.goo.gl/X6fcZ79779bgjrRZ8

Answer 1

You need to have two kendo grid in your view and two javaScript Method to gets your additional data az method parameters :
The parent grid and its child should be something like this :
<div class="row">
<div class="col-md-12">
#(Html.Kendo().Grid<ProjectName.Models.ViewModel.TasksStaticViewModel>()
.Name("grid")
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadActionName", "ControllerName").Data("additionalData"))
)
.Columns(columns =>
{
columns.Bound(c => c.Column1).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(130);
columns.Bound(c => c.Column2).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(135);
})
.ToolBar(tool => tool.Template(
#"<a id='lnkexportExcel' class='k-button k-button-icontext ' href='/Report/Tasks'><span></span>ExportToExcel</a>))
.Pageable()
.AutoBind(false)
.Sortable()
.Scrollable(s => s.Enabled(true))
.ClientDetailTemplateId("template")
)
</div>
<div class="col-md-12">
<script id="template" type="text/kendo-tmpl">
#(Html.Kendo().Grid<ProjectName.Models.ViewModel.MyViewModel>()
.Name("grid_#=Id#")
.Columns(columns =>
{
columns.Bound(c => c.SubColumn1).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(100);
columns.Bound(c => c.SubColumn2).HtmlAttributes(new { style = "text-align:center; overflow: hidden; white-space: nowrap;" }).HeaderHtmlAttributes(new { style = "text-align:center;" }).Width(100);
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadActionName", "ControllerName",
new { AgentSelectedId = "#=AgentId#", TaskHeaderSelectedId = "#=TaskHeaderId#"})
.Data("additionalData2"))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
</div>
And the two additional data which js javascript code :
function additionalData() {
return someModel;}
function additionalData2() {
return someModel;}
If it was useful, check it as an answer, please