This is a migrated thread and some comments may be shown as answers.

Conditional statement in Client Template

2 Answers 244 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jokull
Top achievements
Rank 1
Jokull asked on 29 Aug 2018, 01:42 PM

Hi,

I have a detail template in a grid. In the last column I want to have a dropdown menu based on a condition. In another (regular) grid I did this:

columns.Template(@<text></text>).ClientTemplate(@"<div class='dropdown'>
                                                            <a data-toggle='dropdown' class='primarycolor' href=''><i class='fa fa-ellipsis-v fa-2x'></i></a>
                                                            <ul class='dropdown-menu dm-icon pull-right'>"
+ "# if (ShowEditLink) { # <li><a class='k-button-icontext editReg' href='#=EditLink#' data-rid='#=Id#'>" + translator.Translate("EDIT_REGISTRATION") + "</a></li> # } #"
+ "</ul></div>").HtmlAttributes(new { @class = "dropdown-gridcell" }).Width(20);

 

Now I know that in the child/detail context I have to escape template expression with "\\#=fieldName\\#. Found here: https://demos.telerik.com/aspnet-mvc/grid/detailtemplate

What I'm trying is this:

columns.Template(@<text></text>).ClientTemplate(@"<div class='dropdown'>" +
  "<a data-toggle='dropdown' class='primarycolor' href=''><i class='fa fa-ellipsis-v fa-2x'></i></a>" +
  "<ul class='dropdown-menu dm-icon pull-right'>" +
"# if (booleanProperty) { # <li><a class='k-button-icontext' href='' data-spid='#=Id#'>" + translator.Translate("CANCEL") + "</a></li> # } #" +
"</ul></div>").HtmlAttributes(new  {  @class = "dropdown-gridcell"  }).Width(20);

where "booleanProperty" is a property of the viewModel in the child grid. This doesn't work because it doesn't recognize "booleanProperty" since it thinks it is in the viewModel of the parent grid. I have looked at the following posts:

https://www.telerik.com/forums/nested-detail-grid-clienttemplate-conditional-binding-expression-error

https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

 

and tried this as well:

columns.Template(@<text></text>).ClientTemplate("\\#=showLink(booleanPropoerty, Id)\\#").Title("").HtmlAttributes(new  {  @class = "dropdown-gridcell"  }).Width(20);

function showLink(booleanProperty, id) {

var returnValue = "<div class='dropdown'><a data-toggle='dropdown' class='primarycolor' href=''><i class='fa fa-ellipsis-v fa-2x'></i></a><ul class='dropdown-menu dm-icon pull-right'>";

if (booleanProperty) {
return "<li><a class='k-button-icontext' href='' data-spid='" + id + "'>" + $('#stringValue').val() + "</a></li>";
}

returnValue += "</li></div>";

return returnValue;
}

This way I get returned a value but the required javascript for the dropdown list doesn't work.

 

Is there a solution for this?

 

Thank you,

Jokull

2 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 30 Aug 2018, 06:00 AM
Hello, Jokull,

Thank you for sharing the code and the already checked articles.

In cases like this, the JavaScript function should be used and it should return the same result as if the template was set directly inside the ClientTemplate.

Based on the code inside the showLink function, is the booleanProperty is true, it will only return one <li> element. Please advise if this is the expected result or if the booleanProperty is true, the <li> has to be appended to the returnValue variable.

If the issue still occurs, please provide more details on the result when the JS function is used. Also, sharing an example will be very helpful as it will allow us to pinpoint the issue and provide a suggestion bet suited for it.

Regards,
Stefan
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jokull
Top achievements
Rank 1
answered on 30 Aug 2018, 12:38 PM

Thank you, of course this worked. I guess I had been going to much back and forth to notice the silly mistakes in that js code.

Thanks a lot!

Tags
Grid
Asked by
Jokull
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Jokull
Top achievements
Rank 1
Share this question
or