Nested detail grid ClientTemplate conditional binding expression error

4 posts, 1 answers
  1. Nikita
    Nikita avatar
    14 posts
    Member since:
    Apr 2013

    Posted 05 Apr Link to this post

    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>
  2. Nikita
    Nikita avatar
    14 posts
    Member since:
    Apr 2013

    Posted 05 Apr in reply to Nikita Link to this post

    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#" }))
  3. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2066 posts

    Posted 07 Apr Link to this post

    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:


    Regards,
    Konstantin Dikov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Nikita
    Nikita avatar
    14 posts
    Member since:
    Apr 2013

    Posted 07 Apr in reply to Konstantin Dikov Link to this post

    Thank you, Konstantin, that works.
Back to Top