ClientDetailTemplateId at the 3rd hierarchy level

[KR]

Hi,

Does telerik grid support 3rd ClientDetailTemplateId? I have the templates as below (questionTemplate (1st), questionAnswerTemplate (2nd) and surveyAnswerCommentsTemplate (3rd) ). I've the the questionTemplate and questionAnswerTemplate working. But the surveyAnswerCommentsTemplate template is not being called. I'm trying to display the Comments field in surveyAnswerCommentsTemplate , but Comments field belongs to questionAnswerTemplate.

 

<div class="aamva-center">
    @(Html.Kendo().Grid<AAMVA.Website.Survey.Models.SurveyResponseViewModel>()
        .Name("grid")
        .Scrollable(scrollable => scrollable.Height("auto"))
        .Columns(columns =>
        {
            columns.Bound(p => p.SurveyID);
            columns.Bound(p => p.FullName);
        })
        .ClientRowTemplate(
            "<tr data-uid='#: uid #' class='k-master-row' role='row'><td class='k-hierarchy-cell' aria-expanded='true'><aclass='k-icon k-i-collapse' href='\\#' aria-label='Collapse' tabindex='-1'></a></td>" +
                "<td colspan='2' style='font-size: 14px;'>" +
                      "<div ><span><b>Name :</b></span> #: FullName# </div>" +
                      "<div ><b>Contact Info/Comments :</b> #: Comments# </div>" +
                      "<div ><b>Jurisdiction :</b> #: Jurisdiction# </div>" +
                      //"<div ><b>SurveyResponseID :</b> #: SurveyResponseID# </div>" +
                "</td>" +
             "</tr>"
        )

        .ClientDetailTemplateId("questionTemplate")
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(1)
            .Model(model => model.Id(p => p.SurveyID))
            .Read(read => read.Action("GetSurveyResponses", "SurveyUser"))
        )
        .Scrollable()
        .Pageable(pageable => pageable
                    .Refresh(false)
                    .ButtonCount(5))
)
</div>

    <script id="questionTemplate" type="text/kendo-tmpl">
        <hr />
        @(Html.Kendo().Grid<AAMVA.Website.Survey.Models.SurveyQuestionViewModel>()
            .Name("grid_#=Jurisdiction#")
             .Scrollable(scrollable => scrollable.Height("auto"))
            .Columns(columns =>
            {
                columns.Bound(o => o.QuestionTextWithSortOrder).HtmlAttributes(new { style = "font-weight:bold;" });
            })
            .ClientDetailTemplateId("questionAnswerTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.SurveyQuestionID);
                    model.Id(p => p.SurveyQuestionTypeID);

                })
                .Read(read => read.Action("DetailTemplate_HierarchyBinding_GetQuestions", "SurveyUser", new { surveyID = "#=SurveyID#" }))
            )
            .ToClientTemplate()
    )
    </script>


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

        @(Html.Kendo().Grid<AAMVA.Website.Survey.Models.SurveyQuestionAnswerViewModel>()
            .Name("grid_#=SurveyQuestionID#")
            .Columns(columns =>
            {
                columns.Bound(o => o.Comments);//.ClientGroupHeaderTemplate("<div>Min: #= Comments #</div>");//.ClientFooterTemplate("<div>Min: #= Comments #</div>");
                columns.Bound(o => o.SelectedAnswer);
            })
            .ClientDetailTemplateId("surveyAnswerCommentsTemplate")
            //.ClientRowTemplate(Html.Partial("_DisplayAnswersForAllQuestionTypes").ToHtmlString())
            .ClientRowTemplate(
                "<tr data-uid='#: uid #' class='k-master-row' role='row' >" +
                    "\\#if( #:SurveyQuestionTypeID# == 1 ){\\#" + //yes/no
                                                                  //  "<td colspan='3'>" +
                        "<td></td><td colspan='2'>" +
                          "\\#if(  Checked == true){\\#" +
                                " <li style='list-style-type:disc; '>" +
                           "\\#}\\#" +
                           "\\#if(  Checked == false){\\#" +
                                " <li style='list-style-type:circle; '>" +
                           "\\#}\\#" +
                         "\\#: SurveyChoiceText\\# " +
                        "</td>" +
                    "\\#}\\#" +
                    "\\#if( #:SurveyQuestionTypeID# == 4 ){\\#" +  // Free text
                        "<td colspan='3'>" +
                            "<div >\\#: SelectedAnswer\\# </div>" +

                        "</td>" +
                    "\\#}\\#" +
                    "\\#if( #:SurveyQuestionTypeID# == 2 || #:SurveyQuestionTypeID# == 3){\\#" + //Multi Choice/Select
                        "<td></td><td colspan='2'>" +
                          //"<div > " +
                          "\\#if(  Checked == true){\\#" +
                                " <li style='list-style-type:disc; '>" +
                           "\\#}\\#" +
                           "\\#if(  Checked == false){\\#" +
                                " <li style='list-style-type:circle; '>" +
                           "\\#}\\#" +
                         "\\#: SurveyChoiceText\\# " +
                     //   "\\#: Comments\\# " +  // comments is displayed repeatedly. Wanted to display this only once so displaying in detail template surveyAnswerCommentsTemplate

                        //"</div>" +
                        "</td>" +
                    "\\#}\\#" +
                    "\\#if( #:SurveyQuestionTypeID# == 5){\\#" + //Ranking
                        "<td colspan='3'>" +
                         "<div >\\#: SelectedAnswer\\# </div>" +
                        "</td>" +
                    "\\#}\\#" +
                 "</tr>"
            )
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model =>
                {
                    model.Id(p => p.SurveyQuestionID);
                    model.Id(p => p.Comments);

                })
                .Read(read => read.Action("DetailTemplate_HierarchyBinding_GetQuestionAnswers", "SurveyUser", new { questionID = "#=SurveyQuestionID#", surveyQuestionTypeID = "#=SurveyQuestionTypeID#" }).Data("function() { return getSurveyResponseID('grid_#=SurveyQuestionID#');}"))
            )
            .ToClientTemplate()
    )

    </script>


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

        <hr />

        <div>KR</div>
        <div>#= Comments # </div> //The Comments field is in the questionAnswerTemplate and SurveyQuestionAnswerViewModel
        @* <div>\\#: Comments \\# </div>*@
    </script>

 

public ActionResult DetailTemplate_HierarchyBinding_GetQuestions( [DataSourceRequest] DataSourceRequest request, int surveyID)
{
    var repo = new SurveyRepository();

    List<SurveyQuestionViewModel> surveyQuestionsVM = GetQuestions(surveyID);
    DataSourceResult result = surveyQuestionsVM.ToDataSourceResult(request, sq => new SurveyQuestionViewModel
    {
        SortOrder = sq.SortOrder,
        SurveyQuestionID = sq.SurveyQuestionID,
        SurveyQuestionTypeID = sq.SurveyQuestionTypeID,
        SurveyID = sq.SurveyID,
        QuestionText = sq.QuestionText,
        QuestionTextWithSortOrder = sq.QuestionTextWithSortOrder
    });
    // PageSize is not set to 20 sometimes
    return Json(result);
   // return Json(surveyQuestionsVM.ToDataSourceResult(request));
}

public ActionResult DetailTemplate_HierarchyBinding_GetQuestionAnswers([DataSourceRequest] DataSourceRequest request, int questionID, int surveyQuestionTypeID, int surveyResponseID)
{
    var repo = new SurveyRepository();
    DataSourceResult result = null;
    // Multiple-Choice Multiple-Select and Ranking Questions
    if ((surveyQuestionTypeID == 2) || (surveyQuestionTypeID == 3))
    {
        List<SurveyQuestionAnswerViewModel> surveyQuestionAnswersVM = GetQuestionAnswers(questionID, surveyResponseID);

        result = surveyQuestionAnswersVM.ToDataSourceResult(request, sqa => new SurveyQuestionAnswerViewModel
        {
            SortOrder = sqa.SortOrder,
            SurveyQuestionID = sqa.SurveyQuestionID,
            SurveyChoiceText = sqa.SurveyChoiceText,
            SurveyChoiceID = sqa.SurveyChoiceID,
            Comments = sqa.Comments,
            Checked = sqa.Checked
        });
        return Json(result);
    }
    else if ( surveyQuestionTypeID == 4)  // Yes-No Questions
    {
        List<SurveyQuestionAnswerViewModel> surveyQuestionAnswerVM = GetSurveyAnswer(surveyResponseID, questionID);
        result = surveyQuestionAnswerVM.ToDataSourceResult(request, sqa => new SurveyQuestionAnswerViewModel
        {
            Comments = sqa.Comments,
            SelectedAnswer = sqa.SelectedAnswer,
            SelectedAnswerValue = sqa.SelectedAnswerValue,// has the yes/no answer choice of the response
            Checked = sqa.Checked
        });
        return Json(result);
    }else if(surveyQuestionTypeID == 1)
    {
        List<SurveyQuestionAnswerViewModel> surveyQuestionAnswerVM = GetSurveyAnswer(surveyResponseID, questionID);

        List<SurveyQuestionAnswerViewModel> surveyYesNoVM = new List<SurveyQuestionAnswerViewModel>();
        SurveyQuestionAnswerViewModel yesOption = new SurveyQuestionAnswerViewModel();
        yesOption.SurveyChoiceText = "Yes";
        yesOption.Checked = (surveyQuestionAnswerVM[0].SelectedAnswer.ToUpper().Equals("YES")? true: false) ;
        surveyYesNoVM.Add(yesOption);
        SurveyQuestionAnswerViewModel noOption = new SurveyQuestionAnswerViewModel();
        noOption.SurveyChoiceText = "No";
        noOption.Checked = (surveyQuestionAnswerVM[0].SelectedAnswer.ToUpper().Equals("NO") ? true : false);
        surveyYesNoVM.Add(noOption);

        result = surveyYesNoVM.ToDataSourceResult(request, syn => new SurveyQuestionAnswerViewModel
        {
            SurveyChoiceText = syn.SurveyChoiceText,
            Checked = syn.Checked,
            Comments = syn.Comments
        });
        return Json(result);

   }
    else // Free-text Questions or Ranking
    {
        List<SurveyQuestionAnswerViewModel> surveyQuestionAnswerVM = GetSurveyAnswer(surveyResponseID, questionID);
        result = surveyQuestionAnswerVM.ToDataSourceResult(request, sqa => new SurveyQuestionAnswerViewModel
        {
            Comments = sqa.Comments,
            SelectedAnswer = sqa.SelectedAnswer,
            Checked = sqa.Checked
        });
        return Json(result);
    }

}

 

 

 

Thanks!

 

 

[Nikolay]

Hello,

Thank you for sharing the implementation with me.

I confirm the Grid supports multi-level template nesting.

I have looked into the provided code and I noticed that the Name of the grid has a template that is not escaped. Namely, the following line of code:

.Name("grid_#=SurveyQuestionID#")

Since it is in the context of a nested grid, you should escape it with a "\\" or escape it twice if needed. 

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

[KR]

A "\\" escape results in an error as attached. I tried to escape twice as well. Both result in unrecognized expression error.

Also, the SurveyQuestionID fiels is in Action DetailTemplate_HierarchyBinding_GetQuestions() [in .Name("grid_#=Jurisdiction#") grid] and DetailTemplate_HierarchyBinding_GetQuestionAnswers() [in  .Name("grid_#=SurveyQuestionID#") grid].  So I'm not sure which one the  .Name("grid_#=SurveyQuestionID#") is referring to.

Another note, its the surveyAnswerCommentsTemplate template that is not being called. The questionAnswerTemplate is fine. 

 

[Tsvetomir]

Hi,

My name is Tsvetomir and I am covering for my colleague Nikolay.

I have investigated the provided code snippets as well and what I assume is that the row template might be causing the problem actually. Can you try commenting out and see if that makes a difference?

Also, can you confirm that the Comments values for the grid do not have any hash literals ("#") in them?

It would be very helpful if you could modify the example from the following GitHub repository in order to replicate the issue and send it back to me:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/ajax-3-level-hierarchy-editing

Thank you for your cooperation in advance.

 

Kind regards,
Tsvetomir
Progress Telerik