How to modify the ClientTemplate to display 2nd tier grid

4 posts, 1 answers
  1. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 19 Feb Link to this post

    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.

     

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 19 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. york
    york avatar
    160 posts
    Member since:
    Jul 2012

    Posted 21 Feb in reply to Dimiter Madjarov Link to this post

    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

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready