Conditional statement in Client Template

[Jokull]

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

[Stefan]

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

[Jokull]

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!