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
>