Questions on UI for ASP.NET MVC Forum

3 answers

494 views

ClientDetailTemplateId at the 3rd hierarchy level

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!

Grid

answered on 24 Nov 2020

4 answers

957 views

Kendo Scheduler event dynamic Title with multiline text

Hello,

In my Scheduler Event the Title consists of start-end time followed by description, new line , Adress , New Line , phone number etc.

I am using \r\n for new line but Looks like the Title does not recognize new line characters. I cannot use a fixed template as the fields and where the new line Comes is dynamic.

How can i achieve this.

Thanks

Anamika

Scheduler

answered on 24 Nov 2020

1 answer

394 views

Kendo column chart not showing tooltip when data value is 0 or null

I have a combination of Kendo column and line chart. The data has non-zero as well as zero or null values. I want to show tooltip for each bar or point, even if it has zero value. The tooltip displays fine for non-zero values. But fails for zero. I tried using tooltip and seriesHover functions. But nothing works. Please provide a solution for this. I have attached basic Example of the same.

General Discussions

answered on 23 Nov 2020

1 answer

194 views

cascading drop in grid incell editing example

Hi,

I need cascading dropdown in grid in cell editing.

i tried in web and i found for for inline editing, but i want it for incell editing.

inline code is not working for incell editing.

Grid

answered on 23 Nov 2020

16 answers

512 views

Incorrect order for Year and Month Columns

Hi,

I have two columns Year and Month, these don't appear in order.

For example they display as Year: 2017, 2018, 2020, 2019. Then the Month: February, January, March, July eyc.

How can i sort these to appear in order?

Thanks,
Lee.

PivotGrid

answered on 23 Nov 2020

6 answers

124 views

Combobox auto active pageload on internet explorer

Hi,

All the comboboxes i use come open when i run the page. When i click anywhere or scroll the page, it closes. I only have this problem in Internet Explorer. No problems with chrome or firefox browsers

ComboBox

answered on 20 Nov 2020

2 answers

323 views

Marker Colors Based on Datasource

I'm trying to dynamically set the marker color based on a value from a datasource. I can't find any examples of this and can't find an event that fires that would allow me to do this dynamically. Can you point me in the right direction, please. Below is the simple map control that I'm using:

@(Html.Kendo().Map()

.Name("map")

.Center(new double[] { Model.Latitude, Model.Longitude })

.Zoom(17)

.Layers(layers =>

{

layers.Add()

.Type(MapLayerType.Tile)

.UrlTemplate("https://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")

.Subdomains("a", "b", "c");

layers.Add()

.Type(MapLayerType.Marker)