Nested detail grid ClientTemplate conditional binding expression error

[Nikita]

I'm trying to write a declaration of a details grid as a ClientTemplate using an MVC wrapper with a ToClientTemplate() call. Within this grid I'm need to write another client template for a column with a conditional data binding expression.

I'm getting invalid template error:

Unhandled exception at line 3855, column 3 in http://localhost:1319/Scripts/jquery-3.1.1.js<br>0x800a139e - JavaScript runtime error: Invalid template:'<br><div class="k-widget k-grid" id="detail_#=BusinessEntityID#"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="EmailAddress1" data-index="0" data-title="Email Address1" scope="col"><span class="k-link">Email Address1</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script><br> kendo.syncReady(function(){jQuery("\#detail_#=BusinessEntityID#").kendoGrid({"columns":[{"title":"Email Address1","headerAttributes":{"data-field":"EmailAddress1","data-title":"Email Address1"},"template":"# if(FirstName == \u0027John\u0027) { # \u003cspan\u003eJohns are great!\u003c/span\u003e # } else { # \u003cspan\u003e\\#=EmailAddress1\\#\u003c/span\u003e # } #","field":"EmailAddress1","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"autoBind":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-server']){return 'aspnetmvc-server';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":"detail_#=BusinessEntityID#-"},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"BusinessEntityID":{"type":"number"},"EmailAddressID":{"type":"number"},"EmailAddress1":{"type":"string"},"rowguid":{"type":"string"},"ModifiedDate":{"type":"date"},"Person":{"type":"object"}}}}}});});<br><\/script><br><br><br>' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n<div class="k-widget k-grid" id="detail_'+(BusinessEntityID)+'"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="EmailAddress1" data-index="0" data-title="Email Address1" scope="col"><span class="k-link">Email Address1</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>\n\tkendo.syncReady(function(){jQuery("#detail_'+(BusinessEntityID)+'").kendoGrid({"columns":[{"title":"Email Address1","headerAttributes":{"data-field":"EmailAddress1","data-title":"Email Address1"},"template":"'; if(FirstName == \u0027John\u0027) { ;$kendoOutput+=' \u003cspan\u003eJohns are great!\u003c/span\u003e '; } else { ;$kendoOutput+=' \u003cspan\u003e\#=EmailAddress1\#\u003c/span\u003e '; } ;$kendoOutput+='","field":"EmailAddress1","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"autoBind":false,"dataSource":{"type":(function(){if(kendo.data.transports[\'aspnetmvc-server\']){return \'aspnetmvc-server\';} else{throw new Error(\'The kendo.aspnetmvc.min.js script is not included.\');}})(),"transport":{"read":{"url":""},"prefix":"detail_'+(BusinessEntityID)+'-"},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"BusinessEntityID":{"type":"number"},"EmailAddressID":{"type":"number"},"EmailAddress1":{"type":"string"},"rowguid":{"type":"string"},"ModifiedDate":{"type":"date"},"Person":{"type":"object"}}}}}});});\n<\/script>\n\n';}return $kendoOutput;'

 

looks like the problem is the conditional expression in the if statement:

    if(FirstName == \u0027John\u0027)

the single quote is encoded. What do I have to do to prevent that? Is there a way to escape single quote?

Here is sample code:

@(
    Html.Kendo().Grid<Person>().Name("parentGrid")
    .Columns(col =>
    {
       col.Bound(per => per.FirstName);
       col.Bound(per => per.LastName);
        col.Bound(per => per.ModifiedDate);
    })
   .DataSource(ds => ds.Ajax().Read("GetPeople", "DetailGrid"))
    .ClientDetailTemplateId("tmpl")
)

<script id="tmpl" type="text/x-kendo-template">
@(
    Html.Kendo().Grid<EmailAddress>().Name("detail_#=BusinessEntityID#")
    .Columns(col =>
     {
        col.Bound(e => e.EmailAddress1)
         .ClientTemplate("# if(FirstName == 'John') { # <span>Johns are great!</span> # } else { # <span>\\#=EmailAddress1\\#</span> # } #");
     })
     .ToClientTemplate()
)
</script>

[Nikita]

Forgot to mention that I want the conditional template binding expression to be evaluated in the context for parent data item. FirstName is a property of a person, not an email address.

Also there should be a data source declaration in the detail grid:

.DataSource(ds => ds.Ajax().Read("GetEmails", "DetailGrid", new { id = "#=BusinessEntityID#" }))

[Konstantin Dikov]

Hello Nikita,

For complex templates we highly recommend using a JavaScript function where you could pass the value that will be evaluated and return the html in the function directly:

.ClientTemplate("#=myCondtion(fieldName)#")
...

function myCondtion(value){
  if(...){
    return value;
  }
  else{
    return value + "test";
  }
}

Please give this a try and let me now if the issue is resolved.

As for the templates syntax, you could refer to the following help topic:

• http://docs.telerik.com/kendo-ui/framework/templates/overview

Regards,
Konstantin Dikov
Telerik by Progress

[Nikita]

Thank you, Konstantin, that works.