How do I display Kendo Grid inside Kendo Grid cell? - kendo-ui

Question

I am using Kendo Grid in my MVC application to display data. It works perfectly fine. But I would like to show another grid inside grid cell. I have done my research and tried different things, but I didn't find any solution. Please suggest.
Here is my code.
#(Html.Kendo().Grid<TimeSheetManagement.Models.ClientView>()
.Name( "Clients" )
.Columns( columns =>
{
columns.Bound( e => e.Name );
columns.Bound( e => e.Address );
columns.Bound( e => e.City );
columns.Bound( e => e.State );
columns.Bound( e => e.ZipCode );
columns.Template( e => e.Contacts ).ClientTemplate( "#= buildContactsGrid(data) #" );
columns.Bound( e => e.CreatedDate );
columns.Bound( e => e.CreatedBy );
columns.Bound( e => e.UpdatedDate );
columns.Bound( e => e.UpdatedBy );
columns.Bound( "" ).ClientTemplate( #Html.ActionLink( "Edit" , "Create" , new { clientId = "#=Id#" } , new { title = "Edit Client" } ).ToHtmlString() );
} )
.Pageable().Sortable().Filterable()
.AutoBind( true )
.DataSource( source => source.Ajax()
.PageSize( 20 )
.Read( read => read.Action( "GetClients" , "Client" ) )
)
)
Here is my JavaScript function.
<script>
function buildContactsGrid(client)
{
var htmlContacts = '';
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '#Url.Action( "GetJsonContactsByClientId" )',
data: JSON.stringify({
'sClientId': client.Id
}),
dataType: "json",
async: false,
success: function (response) {
htmlContacts += "<table style='border:1px solid black;'><tr><th>First Name</th><th>Last Name</th><th>Role</th></tr><tr>";
$(response).each(function (index, item) {
htmlContacts +="<td>"+ item.FirstName +"</td><td>"+ item.LastName+"</td><td>"+item.Role +"</td></tr>";
});
htmlContacts += "</table>";
}
});
return htmlContacts;
}
</script>
I was able to build a table in JavaScript function and display in grid cell, but I would like to display Kendo Grid.

Answer 1

After spent some days on google by doing some research, I found this post link, they explained why client template not being bound on load.
Here is my grid inside grid cell:
columns.Template( e => "" ).Title("Contacts").ClientTemplate(
Html.Kendo().Grid<TimeSheetManagement.Models.ContactView>()
.Name( "Clients_#=Id#" )
.Columns( c =>
{
c.Bound( e1 => e1.FullName );
c.Bound( e1 => e1.Role );
c.Bound( e1 => e1.Email );
c.Bound( e1 => e1.PhoneNumber );
} )
.AutoBind( true )
.DataSource( source1 => source1.Ajax()
.PageSize( 5 )
.Read( read1 => read1.Action( "GetContactsByClientId" , "Client" , new { sClientId = "#=Id#" } ) )
)
.ToClientTemplate()
.ToHtmlString()
);
And I have this event on the grid.
.Events( e => e.DataBound( "onGridDataBound" ) )
And finally I added this code in the script.
function onGridDataBound(e)
{
$('#Clients script').appendTo(document.body);
}
Here is the output as I expected. Let me know if you have any questions.