Multi layer Kendo control Grid+Tabstrip+Grid+TabStrip issue

[Aaron]

Hi,

I can't get this working when I've checked each control for a ToClientTemplate for it to render properly
1st grid = fine
1st tabstrip = fine
2nd grid = not working
2nd tabstrip within grid = fine

<h2>Awards Listed By Programs</h2>
@(Html.Kendo().Grid<Scholarship2013.Models.Category>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.CategoryID);
        columns.Bound(p => p.CategoryDescription);
    })
    .ClientDetailTemplateId("employeesTemplate")
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("Program_Read", "Student"))
        .PageSize(10)
    )
    .Sortable()
    //.Events(events => events.DataBound("dataBound"))
)

<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
<script id="employeesTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("TabStrip_#=CategoryID#")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Awards").Content(@<text>
                    @(Html.Kendo().Grid<Scholarship2013.Models.Award>()
                        .Name("Awards_#=CategoryID#")
                        .ClientDetailTemplateId("awarddetailTemplate")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.AwardID).Width(101);
                            columns.Bound(o => o.AwardName).Width(140);

                            columns.Bound(e => e.AwardName)
                                .ClientTemplate("# if(AwardDetails[0].IsApplicationOpen >= 0 && AwardDetails[0].IsApplicationClosed < 0) {# <span class='redfont'>*</span> #=AwardName# #} else {# #=AwardName# #} #")
                                .Width(500);

                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .Read(read => read.Action("Award_Read", "Student", new { categoryID = "#=CategoryID#" }))
                        )
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate()
                        )
                </text>
                );

            })
            .ToClientTemplate()

   )
</script>

<script id="awarddetailTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
            .Name("AwardDetailTabStrip")
            .SelectedIndex(0)
            .Items(items =>
            {
                items.Add().Text("Award Details").Content(@<text>

                   <div id="details-container2">
                    @*    <h2>#= AwardName #</h2>*@
                    <dl>

                            @*<dt>Award Name: #= AwardName #</dt>    *@
                            <dt> Award Detail ID: #= AwardDetails[0].AwardDetailID #</dt>
                            <dt> Award Amount: #= AwardDetails[0].AwardAmount #</dt>
                            <dt> Number of Awards: #= AwardDetails[0].NumberOfAwards #</dt>
                            <dt> Criteria: #= AwardDetails[0].ConditionsText #</dt>
                            <dt> Deadline: #= AwardDetails[0].ApplicationDeadlineDate #</dt>
                            <dt> Special Instructions: #= AwardDetails[0].SpecialInstructions #</dt>
                    </dl>
                  </div></text>
                );
            })
            .ToClientTemplate()
            )
</script>

. I'm having an issue particularly in the 2nd grid and on this part (perhaps its the AwardDetails[0] field/object

columns.Bound(e => e.AwardName)
                                .ClientTemplate("# if(AwardDetails[0].IsApplicationOpen >= 0 && AwardDetails[0].IsApplicationClosed < 0) {# <span class='redfont'>*</span> #=AwardName# #} else {# #=AwardName# #} #")
                                .Width(500);

Thanks for your help.

Aaron

[Daniel]

Hello Aaron,

The "#" character needs be escaped when used in a nested template e.g.

.ClientTemplate(@"\# if(AwardDetails[0].IsApplicationOpen >= 0 && AwardDetails[0].IsApplicationClosed < 0) {\# <span class='redfont'>*</span> \#=AwardName\# \#} else {\# \#=AwardName\# \#} \#")
                                .Width(500);

Otherwise, it will be evaluated in the wrong context. Regards,
Daniel
the Telerik team