Error rendering Template

[Guillermo]

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.

 

[Konstantin Dikov]

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

[Guillermo]

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?

 

 

 

 

 

 

 

[Konstantin Dikov]

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

[Guillermo]

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.

[Konstantin Dikov]

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:

• https://stackoverflow.com/questions/2992231/slashes-in-url-variables

Regards,
Konstantin Dikov
Progress Telerik

[Guillermo]

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