ClientTemplateId not working with Kendo Grid

Question

I have kendo Grid as follows:

 @(Html.Kendo().Grid<TEAMS_PP.Entity.Scoring>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(c => c.Code).Title("Code");
        columns.Bound(c => c.Correlated_To).Title("Correlated To");
    })
    .Pageable()
    .Sortable()
    .Scrollable(scr=>scr.Height(430)) 
    .Filterable()
    .ClientDetailTemplateId("grdScoringTemplate")
    .BindTo(ViewBag.ScoringList)
)

I have ClientTemplateId as follows:

<script type="text/x-kendo-tmpl" id="grdScoringTemplate">
    <div>
        <table>
            <tr>
                <td>
                    #: Code #
                </td>
                <td>
                    #: Correlated_To #
                </td>
             </tr>
        </table>
    <div>
</script>

But its not getting binded properly.

It should be as follows:

What can be the issue???

Its not binding grid according to client template.

Answer 1

This link should hopefully help you for starters: http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/client-detail-template

but quickly I would suggest changing the declaration of the template from:

<script type="text/x-kendo-tmpl" id="grdScoringTemplate">

to

<script type="text/x-kendo-template" id="grdScoringTemplate">

Answer 2

I think the problem is the way you are naming your detail table. The detail table doesn't know which parent record it should be using as a detail. First I would use a Kendo Grid as well for the detail not a regular table. This how my code looks.

@(Html.Kendo().Grid<OMSWeb.Models.OrderGridViewModel>()
    .Name("grid")
    .HtmlAttributes(new { style = "width:115%;font-size:10px;line-height:2em" })
    .Columns(columns =>
    {
      //columns
    })
        .Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))              
        .Pageable() // Enable paging
        .Sortable() // Enable sorting
        .ClientDetailTemplateId("OrderDetailsAll")
        .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(5)
        .Read(read => read.Action("Get", "Order"))

        ))

<script id="OrderDetailsAll" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<OMSWeb.Models.OrderDetailAllViewModel>()
        .Name("grid2_#=OpportunityId#") //opprtunityId == row to detail off of 
        .Editable(editable => editable.Mode(GridEditMode.InCell))  
        .Columns(columns =>
        {
            //columns

        })   
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetDetailsAll", "Order", new {  opportunityId = "#=OpportunityId#" })) //get selected rows details
                      .Model(model => 
               {
                   model.Id (z => z.OrderDetailId);                  
               })      
        )   
        .ToClientTemplate())

</script>

Check out the documentation here