This is a migrated thread and some comments may be shown as answers.
Error rendering Template
6 Answers 37 Views
This is a migrated thread and some comments may be shown as answers.
Guillermo
Top achievements
Rank 1
Guillermo asked on 20 Jul 2018, 11:49 PM

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.

 

6 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Jul 2018, 12:17 PM
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.
0
Guillermo
Top achievements
Rank 1
answered on 23 Jul 2018, 05:58 PM

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?

 

 

 

 

 

 

 

0
Konstantin Dikov
Telerik team
answered on 24 Jul 2018, 11:14 AM
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.
0
Guillermo
Top achievements
Rank 1
answered on 24 Jul 2018, 07:50 PM

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.
0
Konstantin Dikov
Telerik team
answered on 25 Jul 2018, 06:48 AM
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.
0
Guillermo
Top achievements
Rank 1
answered on 25 Jul 2018, 07:22 PM
Will submit a ticket with a project enclosed that reproduces the problem.
Tags
Grid
Asked by
Guillermo
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Guillermo
Top achievements
Rank 1
Share this question
or