How to modify the ClientTemplate to display 2nd tier grid

[york]

Hi,

I have 2 tiers of Kendo Grids. They are defined as:

1st tier grid:

            <% Html.Kendo().Grid<EvaluationsSummaryGridViewModel>()
                .Name("EvaluationGrid")
                .TableHtmlAttributes(new { style = "font-size:8pt;" })
                .HtmlAttributes(new { style = "height:415px;width:1100px" })
                .DataSource(dataSource => dataSource
                        .Ajax()
                        .Model(model => model.Id(a => a.EvaluationId))
                        .ServerOperation(true)
                        .Events(e => e.RequestEnd("onEvaluationSummaryRequestEnd"))
                        .Read(read => read.Action("GetEvaluationSummaryAjax", "Evaluations", new { yearId = ViewData["YearId"], evaluationVersionId = ViewData["EvaluationVersionId"] }))
                        .PageSize(15)
                    )
                .Editable(e => e.Mode(Kendo.Mvc.UI.GridEditMode.InLine).Enabled(true))
                .ClientDetailTemplateId("EvaluationOverallQuestionTemplate")
...

%>

2nd tier grid:

    <script id="EvaluationOverallQuestionTemplate" type="text/x-kendo-template">
        <%: Html.Kendo().Grid<EvaluationsSummaryOverallQuestionsGridViewModel>()
            .Name("EvaluationGrid_#=EvaluationId#")
            .TableHtmlAttributes(new { style = "font-size:8pt;" })
            .HtmlAttributes(new { style = "height:320px;width:950px" })
            .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.EvaluationQuestionId))
                    .ServerOperation(false)
                    .Events(a => a.RequestEnd("onEvaluationsSummaryOverallQuestionsGridRequestEnd"))
                    .Read(read => read.Action("EvaluationsSummaryOverallQuestionsAjax", "Evaluations", new { evaluationId ="#=EvaluationId#" }))
                )
            .Pageable(pager => pager.Input(true)
                                    .Refresh(true)
                                    .PageSizes(new[] { 10, 20, 30 })
                    )
            .Editable(e => e.Mode(Kendo.Mvc.UI.GridEditMode.InLine).Enabled(true))
            .Scrollable(scrolling => scrolling.Height(300))
            .Resizable(resize => resize.Columns(true))
            .Sortable()
            .Filterable()
            .Columns(columns =>
            {
                columns.Bound(b => b.EvalutionMasterPillarId)
                    .Width(100);
                columns.Bound(b => b.VersionQuestion)
                    .Width(300);
                columns.Bound(b => b.HPAAssessment)
                    .Width(300);
                columns.Bound(e => e.EvaluationStatusInitial)
                    .ClientTemplate("<div class='sprite sprite-StopLight_#=EvaluationStatusInitial#'></div>")
                    .Filterable(false)
                    .Sortable(false)
                    .HtmlAttributes(new { style = "text-align:center" })
                    .Width(100);
                columns.Bound(e => e.EvaluationStatusCurrent)
                    .ClientTemplate("<div class='sprite sprite-StopLight_#=EvaluationStatusCurrent#'></div>")
                    .Filterable(false)
                    .Sortable(false)
                    .HtmlAttributes(new { style = "text-align:center" })
                    .Width(100);
           })
           .ToClientTemplate()         
        %>
    </script>

The problem is that while 1st tier grid is working fine, 2nd tier grid can not be opened when clicking on the arrow on each row of 1st grid. The reason is ClientTemplate("<div class='sprite sprite-StopLight_#=EvaluationStatusInitial#'></div>"), which is supposed to display different icons based on the value of "EvaluationStatusInitial". I need help on how to make it work. Thanks.

 

[Dimiter Madjarov]

Hello york,

When a client template is used in the detail Grid, the # symbols should be escaped, or otherwise the master Grid will try to evaluate the template unsuccessfully.
E.g.

.ClientTemplate("<div class='sprite sprite-StopLight_\\#=EvaluationStatusInitial\\#'></div>")

Regards,
Dimiter Madjarov
Telerik

[york]

Hi Dimiter,

Can you take a look at http://www.telerik.com/forums/problem-to-open-kendo-window-in-kendo-tabstrip#flzZ63fzVkWvhyKzP74YJA?

I don't quite understand what duplicate widget IDs is and how to solve it.

Thanks,

York

[Maria Ilieva]

Hello,

Please verify that there is always only one element with a specific ID on the page. No widgets with duplicate id's should exists. See all the information provided in the last post of the mentioned thread and verify if it helps.

Regards,
Maria Ilieva
Telerik