I have created a grid which is bound to a list of workgroups. Each workgroup has a list of Agents which I want to show as detail.

The only way I got this working was by doing a  client detail template and creating a new grid. This means doing another read of data which i did not really want to do. 

Can someone advise a better way to do this. Also suggest a good way to style my details as I don't want them shown as a standard grid but actually a list. 
  
Current code:

   <div id="clientsDb">
    <%: Html.Kendo().Grid<ASML_Scheduler.ScheduleService.WorkgroupViewData>()
        .Name("grid")
         .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("Workgroups_Read", "Home", new { name = ViewData["LoggedInUser"] }))
            )
        .Columns(columns =>
        {
            columns.Bound(c => c.WorkgroupName).Width(140);
            columns.Bound(c => c.TotalAgents).Width(75);
            columns.Bound(c => c.AgentsLoggedOn).Width(75);

        })       
        .HtmlAttributes(new { style = "height: 380px;" })
        .Scrollable()
        .Groupable()
        .Sortable()        
        .ClientDetailTemplateId("client-template")
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))     
     %>
 </div>

<script id=" Code:client-template" type="text/x-kendo-template">     
  <%: Html.Kendo().Grid<ASML_Scheduler.ScheduleService.AgentViewData>()
      .Name("grid_#=WorkgroupName#") 
        .DataSource(dataSource =>  
          dataSource.Ajax().Read(read => read.Action("Agents_Read", "Home", new {workgroupname= "#=WorkgroupName#", name = ViewData["LoggedInUser"] }))
      )      
      .Columns(columns =>
      {
          columns.Bound(product => product.AgentName);
          columns.Bound(product => product.IsLoggedOn);
      })       
      .ToClientTemplate()
    %>    
</script>