Error rendering Template

7 posts, 0 answers
  1. Guillermo
    Guillermo avatar
    6 posts
    Member since:
    Sep 2012

    Posted 20 Jul 2018 Link to this post

    I have a master grid as follows:

    @(Html.Kendo().Grid<Personnel3.Models.CheckDate>()
                        .Name("grdCheckTimes")
                        .Columns(cols =>
                        {
                            cols.Template(t => { }).ClientTemplate("#=dayOfWeek[Date.getDay()]#");
                            cols.Bound(c => c.Date).Title("Date").ClientTemplate("#=pad('00', Date.getDate().toString(), true)#-#=monthName[Date.getMonth()]#-#=Date.getFullYear()#");
     
                            //cols.Template(t => { }).ClientTemplate("[<a href='javascript:edit()'>Edit</a>] [<a href='javascript:delete()'>Delete</a>]");
                        })
                        .ClientDetailTemplateId("checkTimesDetail")
                        .DataSource(ds => ds.Ajax()
                                        .Read(read => read.Action("GeneratePayPeriodWeek", "CheckTime").Data("sendPayPeriodAndLeaveYear"))
                                        //.Update(update => update.Action("UpdateCheckTime", "CheckTime").Data("sendPayPeriodAndLeaveYear"))
                                        //.Destroy(destroy => destroy.Action("DeleteCheckTime", "CheckTime").Data("sendPayPeriodAndLeaveYear"))
                                        .Model(model => model.Id("Date"))
     
     
                            )
                    )

     

    here's the Template:

    <script id="checkTimesDetail" type="text/x-kendo-template">
        @(Html.Kendo().Grid<Personnel3.Data.in_out>()
            .Name("grdInOut_#=CheckDateId#")
            .Columns(cols =>
            {
                cols.Bound(c => c.in_date_time).Title("In Time")
                    .ClientTemplate("#if(in_out_explanation != ''){#<a href='javascript:void(0)'>#=in_date_time#</a>#}else{##=in_date_time##}#");
            })
            .DataSource(ds =>
            {
                ds.Ajax().Read(read => read.Action("GetCheckTimesFortheDay", "CheckTimes", new { checkDate = "#=Date.toLocaleDateString()#" }));
            }).ToClientTemplate()
        )
    </script>

     it throws the following error:

    Unhandled exception at line 3827, column 3 in http://localhost:1806/Personnel/Scripts/jquery-3.3.1.js
    0x800a139e - JavaScript runtime error: Invalid template:'
        <div class="k-widget k-grid" id="grdInOut_#=CheckDateId#"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="in_date_time" data-index="0" data-title="In Time" id="1f073454-eafa-4f2b-b276-9dced2c5b10d" scope="col"><span class="k-link">In Time</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>
     kendo.syncReady(function(){jQuery("\#grdInOut_#=CheckDateId#").kendoGrid({"columns":[{"title":"In Time","headerAttributes":{"data-field":"in_date_time","data-title":"In Time","id":"1f073454-eafa-4f2b-b276-9dced2c5b10d"},"template":"#if(in_out_explanation != \u0027\u0027){#\u003ca href=\u0027javascript:void(0)\u0027\u003e#=in_date_time#\u003c/a\u003e#}else{##=in_date_time##}#","field":"in_date_time","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate=#=Date.toLocaleDateString%28%29#"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"pay_period_id":{"type":"number"},"leave_year_id":{"type":"number"},"employee_id":{"type":"number"},"in_date_time":{"type":"date"},"out_date_time":{"type":"date","defaultValue":null},"in_system_date_time":{"type":"date","defaultValue":null},"out_system_date_time":{"type":"date","defaultValue":null},"changed":{"type":"boolean","defaultValue":null},"last_in_update":{"type":"date","defaultValue":null},"last_out_update":{"type":"date","defaultValue":null},"in_out_explanation":{"type":"string"},"in_out_explanation2":{"type":"string"},"pay_period":{"type":"object"}}}}}});});
    <\/script>
    ' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div class="k-widget k-grid" id="grdInOut_'+(CheckDateId)+'"><table><colgroup><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="in_date_time" data-index="0" data-title="In Time" id="1f073454-eafa-4f2b-b276-9dced2c5b10d" scope="col"><span class="k-link">In Time</span></th></tr></thead><tbody><tr class="k-no-data"><td colspan="1"></td></tr></tbody></table></div><script>\n\tkendo.syncReady(function(){jQuery("#grdInOut_'+(CheckDateId)+'").kendoGrid({"columns":[{"title":"In Time","headerAttributes":{"data-field":"in_date_time","data-title":"In Time","id":"1f073454-eafa-4f2b-b276-9dced2c5b10d"},"template":"';if(in_out_explanation != \u0027\u0027){;$kendoOutput+='\u003ca href=\u0027javascript:void(0)\u0027\u003e'+(in_date_time)+'\u003c/a\u003e';}else{;$kendoOutput+=''+(in_date_time)+'';};$kendoOutput+='","field":"in_date_time","encoded":true}],"scrollable":false,"messages":{"noRecords":"No records available."},"dataSource":{"type":(function(){if(kendo.data.transports[\'aspnetmvc-ajax\']){return \'aspnetmvc-ajax\';} else{throw new Error(\'The kendo.aspnetmvc.min.js script is not included.\');}})(),"transport":{"read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate='+(Date.toLocaleDateString%28%29)+'"},"prefix":""},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"pay_period_id":{"type":"number"},"leave_year_id":{"type":"number"},"employee_id":{"type":"number"},"in_date_time":{"type":"date"},"out_date_time":{"type":"date","defaultValue":null},"in_system_date_time":{"type":"date","defaultValue":null},"out_system_date_time":{"type":"date","defaultValue":null},"changed":{"type":"boolean","defaultValue":null},"last_in_update":{"type":"date","defaultValue":null},"last_out_update":{"type":"date","defaultValue":null},"in_out_explanation":{"type":"string"},"in_out_explanation2":{"type":"string"},"pay_period":{"type":"object"}}}}}});});\n<\/script>\n';}return $kendoOutput;' occurred

     

    I can't figure out what I am doing wrong.

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 23 Jul 2018 Link to this post

    Hello Guillermo,

    The problem that you are facing is due to the ClientTemplate that you have for the column, which has incorrect syntax. The syntax that you are using for kendo template and not for the column template:
    .ClientTemplate("#if(in_out_explanation != ''){#<a href='javascript:void(0)'>#=in_date_time#</a>#}else{##=in_date_time##}#");

    You could try the following syntax and see if it will resolve the problem:
    .ClientTemplate("#=if(in_out_explanation != ''){'<a href=\'javascript:void(0)\'>' + in_date_time + '</a>'}else{in_date_time}#);

    or the following to escape the nested binding syntax:
    .ClientTemplate("\\#=if(in_out_explanation != ''){'<a href=\'javascript:void(0)\'>' + in_date_time + '</a>'}else{in_date_time}\\#);


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Guillermo
    Guillermo avatar
    6 posts
    Member since:
    Sep 2012

    Posted 23 Jul 2018 in reply to Konstantin Dikov Link to this post

    The fix ended up being this:

    .ClientTemplate("\\#if(in_out_explanation != ''){\\#<a href='javascript:void(0)'>\\#=in_date_time\\#</a>\\#}else{\\#\\#=in_date_time\\#\\#}\\#");

     

    Now, I have this problem:

    I need to make a call to an action called GetCheckTimesFortheDay sending in the date in question, on the template I have it rendering like this:

    ds.Ajax().Read(read => read.Action("GetCheckTimesFortheDay", "CheckTimes", new { checkDate = "#=Date.toLocaleDateString()#" }));

     

    the template generates it as follows:

    "read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate=NaN"}

    I wanted why it was generating a 'NaN' so I put this on top of the template:

    #=Date.toLocaleDateString()#

     

    and the result is : 7/23/2018

    at this point I don't know how to get it to generate it properly.

    What I need is to be rendered like this:

    "read":{"url":"/Personnel/CheckTimes/GetCheckTimesFortheDay?checkDate=7/23/2018"}

     

    Any ideas?

     

     

     

     

     

     

     

  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 24 Jul 2018 Link to this post

    Hi Guillermo,

    The problem is due to the escaping of the special characters in the date. However, you could define local variable in the detail template and use it in the Read definition:
    <script id="checkTimesDetail" type="text/x-kendo-template">
    #var itemDate = Date.toLocaleDateString();#
        @(Html.Kendo().Grid<Personnel3.Data.in_out>()
            ...
            .DataSource(ds =>
            {
                ds.Ajax().Read(read => read.Action("GetCheckTimesFortheDay", "CheckTimes", new { checkDate = "#=itemDate#" }));
            }).ToClientTemplate()
        )
    </script>

    Hope this helps.


    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Guillermo
    Guillermo avatar
    6 posts
    Member since:
    Sep 2012

    Posted 24 Jul 2018 Link to this post

    Did not work. Here's the result:

       Request URL: http://localhost:1806/Personnel/CheckTime/GetCheckTimesFortheDay?checkDate=‎7‎/‎9‎/‎2018
       Request Method: POST
       Status Code: 500 / Internal Server Error
     - Request Headers
       Accept: */*
       Accept-Encoding: gzip, deflate
       Accept-Language: en-US, en; q=0.5
       Cache-Control: no-cache
       Connection: Keep-Alive
       Content-Length: 20
       Content-Type: application/x-www-form-urlencoded; charset=UTF-8
       Cookie: __RequestVerificationToken_L1BlcnNvbm5lbA2=xZTCjWZ8KYE9h9P8uR47wnJXisQRB2MvJG2wJGJ5M462Jqxe2I4S-_Dg_Kks95eLgQL_uiopu4bzNjnLW2B8OqjAUDsNIAUP-jOhVmKWnvQ1; ASP.NET_SessionId=e4zkazzjdatug2mzebwukvhe; .AspNet.Cookies=dxVPu2Krk7AK8DoWTbqwDB0fMej7TsQ4aYwFRoVurhGSilMyWn_c-9rTrO-J_VtPWZhMMcQt7xEkuEeuYxwUT6x6znIILB4qYnX2iw4v19ZIf5wNTCdPHWak39sEIDqJ60-xGjEff5-sF87NSSGqLyb1tP3QocyDN9-JkmvCtA2GCYCgDQBLUnRUFHZ81mbHvkhFMG8NTh-gV3NpVU2OIXZATtgB7ET-cGbRkSW6C7IMVk2YDnXg61Ldl95f7jK27yw1-3tHcgsYozG2kViuyx8D0OkCjVkGZVWQ9emiOC6_31yNjJI6m4VQieGKY8M0YX4HChpsRd2KPQV0ZaugArqRxXyV6PlsbieMpRP9ArdEzDTc-Bpob5ql_N-EC-BTEZSlokdYvZebcn-_2pYOr3ATNQfEyGm9qJB0QgtEi3uV4T4R7d7RmpwR1SFUxgzmmk_V3T0yWPAKlHD_hmk54-Kr0CCLgKH8o89dk6MpL3vNldlJ-O6XBgkghOMv6QemYuSwCpeV3E327wsKIUu0ch2YvF3MKrk183gSc8gadxNhlGD3WJuoYAIBM56mr1GAfEP1CIWxd46gKlfC8w-ngX4WPtwEN2Xs_C4QPkOEPls8k3FK9aPqCdg_OTSsyAue; .AspNet.ApplicationCookie=fjvCPFk1ZWnzciNOV7unGb3eknnBtEdX8TK6NQQk61Pn81hxXc1lUDWiMlQIra_vTszbq2-P27O73vVWkN1XokLRxOWdNfs3KfiHbol-KW8LMhAdG3lGnBKO5LVMQRVxm-CLpmEvpOkhU5coLJGYitF7tnX-qpneBPWaGc6s_x2KRmWufnLkmItnaUmW6l4GZo5WNgkN7GGa8sHB4MHLK6ctlDTAN0ZTOCOxkX8h7sLu2brnDYwQifksNlxPg6Ko-pEX3fC9H0RYarH2YHvzZHXbznPstmND5t43d422oDOkioWu6hbuvw90hriwLsyUjRiAJpXulIOBHKghuwo0L9MVF1HaPEs7a7MnpWcoqnKA4LQqeflJDluRI1XTcqER768fh2gWUfiri6441y0bqtAVA3QNV0zMlNoNuzpCNJVR1B9SIJFo4pvJF9hWOA88_xva2seWkYl4YNN_uogKXHIhUJagae9rEqpxtQjyMlOK7yRz1CCn_cwICYhqqSzZ6T2pj1AgFdY87rRzEZ-1aPbpgmxvOddSy5gQ9buaS_AuZnt_6WX2tNojnXx299N8BpqsoDU1hPpzzLuao5O8LAMXkWGQnaYiwyl5nRlIj4CP13tBV7A8PMuIFisJlbwn_3gUSlg5k-1oN1Cwg4GO8-OS7eYcP2FnrBzHaUVz9HM
       Host: localhost:1806
       Referer: http://localhost:1806/Personnel/
       User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko
       X-Requested-With: XMLHttpRequest
     - Response Headers
       Cache-Control: private
       Content-Length: 13245
       Content-Type: text/html; charset=utf-8
       Date: Tue, 24 Jul 2018 19:46:25 GMT
       Server: Microsoft-IIS/10.0
       X-AspNet-Version: 4.0.30319
       X-Powered-By: ASP.NET
       X-SourceFiles: =?UTF-8?B?RDpcUHJvamVjdHNcUGVyc29ubmVsXERldmVsb3BtZW50IEJyYW5jaFxQZXJzb25uZWwzXFBlcnNvbm5lbDNcQ2hlY2tUaW1lXEdldENoZWNrVGltZXNGb3J0aGVEYXk=?=

     

    Server Error in '/Personnel' Application.
     
    The parameters dictionary contains a null entry for parameter 'checkDate' of non-nullable type 'System.DateTime' for method 'System.Web.Mvc.ActionResult GetCheckTimesFortheDay(Kendo.Mvc.UI.DataSourceRequest, System.DateTime)' in 'Personnel3.Controllers.CheckTimeController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 25 Jul 2018 Link to this post

    Hello Guillermo,

    On my side the request is correct with the code that I have shared in my previous post:
    Request URL: http://localhost:56541/Grid/HierarchyBinding_Orders?checkDate=1/1/1

    It could be something with the encoding, but without a runnable project that we can test it will be difficult to determine the exact cause. You could try to manually parse the "itemDate" outside of the Grid, before passing it to the "checkDate".

    Additionally, you might need to encode the "/" symbols in the date:

    Regards,
    Konstantin Dikov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Guillermo
    Guillermo avatar
    6 posts
    Member since:
    Sep 2012

    Posted 25 Jul 2018 in reply to Konstantin Dikov Link to this post

    Will submit a ticket with a project enclosed that reproduces the problem.
Back to Top