Hello there,
I am trying to use a custom template for the editor popup in the Scheduler. All works fine until I add a control that needs to be populated from the database. Here is how I declare the template:
@(Html.Kendo().Scheduler<RichlynNew.Data.Timesheet>() .Name("scheduler") .Date(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day)) .StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day)) .Height(830) .Timezone("Etc/UTC") .Editable(editable => { editable.TemplateName("CustomEditorTemplate").Window(w => w.Title("Edit Timesheet").Name("editWindow").HtmlAttributes(new { id = "editWindow", @width = "900px" })); editable.Confirmation(false); }) .Selectable(true)......
And in the template I have a control as such:
<div data-container-for="project" class="k-edit-field"> <script> function filterProjects() { return { clientno: $("#Clients").val() }; } </script> @(Html.Kendo().DropDownListFor(model => model.ProjectId) .Name("Projects") .DataTextField("ProjectName") .DataValueField("ProjectNo") .DataSource(source => { source.Read(read => { read.Action("ViewProjects", "Projects").Data("filterProjects"); }) .ServerFiltering(true); }) .HtmlAttributes(new { @class = "input" }) .AutoBind(false) //.CascadeFrom("Clients") .SelectedIndex(0) )</div>
When I click to create an event is giving me the following error:
Uncaught Error: Invalid template:'<div class="k-edit-label"> <label for="Title">Title</label></div><div data-container-for="title" class="k-edit-field"> <input class="k-textbox" data-bind="value:title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label"> <label for="Start">Start</label></div><div data-container-for="start" class="k-edit-field"> <input data-bind="value:start,invisible:isAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="startDateTime" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script> jQuery(function(){jQuery("\#startDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script> <input data-bind="value:start,visible:isAllDay" id="startDate" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script> jQuery(function(){jQuery("\#startDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script> <span data-for="start" class="k-invalid-msg"></span></div><div class="k-edit-label"> <label for="End">End</label></div><div data-container-for="end" class="k-edit-field"> <input data-bind="value:end,invisible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="endDateTime" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script> jQuery(function(){jQuery("\#endDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script> <input data-bind="value:end,visible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="endDate" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script> jQuery(function(){jQuery("\#endDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script> <span data-bind="text: endTimezone"></span> <span data-for="end" class="k-invalid-msg"></span></div><div class="k-edit-label"> <label for="IsAllDay">IsAllDay</label></div><div data-container-for="isAllDay" class="k-edit-field"> <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label"> <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="recurrenceRule" class="k-edit-field"> <div data-bind="value:recurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script> jQuery(function(){jQuery("\#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label"> <label for="Description">Description</label></div><div data-container-for="description" class="k-edit-field"> <textarea class="k-textbox" cols="20" data-bind="value:description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="project" class="k-edit-field"> <script> function filterProjects() { return { clientno: $("#Clients").val() }; } </script> <input class="input" data-val="true" data-val-number="The field ProjectId must be a number." data-val-required="The ProjectId field is required." id="Projects" name="Projects" type="text" value="0" /><script> jQuery(function(){jQuery("\#Projects").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Projects/ViewProjects","data":filterProjects},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"ProjectName","autoBind":false,"dataValueField":"ProjectNo","index":0});});</script></div>' Generated code:'var o,e=kendo.htmlEncode;with(data){o='<div class="k-edit-label"> <label for="Title">Title</label></div><div data-container-for="title" class="k-edit-field"> <input class="k-textbox" data-bind="value:title" id="Title" name="Title" type="text" value="" /></div><div class="k-edit-label"> <label for="Start">Start</label></div><div data-container-for="start" class="k-edit-field"> <input data-bind="value:start,invisible:isAllDay" data-val="true" data-val-date="The field Start must be a date." data-val-required="The Start field is required." id="startDateTime" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script>\tjQuery(function(){jQuery("#startDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script> <input data-bind="value:start,visible:isAllDay" id="startDate" name="start" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script>\tjQuery(function(){jQuery("#startDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script> <span data-for="start" class="k-invalid-msg"></span></div><div class="k-edit-label"> <label for="End">End</label></div><div data-container-for="end" class="k-edit-field"> <input data-bind="value:end,invisible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" data-val="true" data-val-date="The field End must be a date." data-val-required="The End field is required." id="endDateTime" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001 00:00" /><script>\tjQuery(function(){jQuery("#endDateTime").kendoDateTimePicker({"format":"dd/MM/yyyy HH:mm","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"interval":30});});</script> <input data-bind="value:end,visible:isAllDay" data-dateCompare-msg="End date should be greater than or equal to the start date" id="endDate" name="end" required="required" style="z-index: inherit;" type="text" value="01/01/0001" /><script>\tjQuery(function(){jQuery("#endDate").kendoDatePicker({"format":"dd/MM/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});</script> <span data-bind="text: endTimezone"></span> <span data-for="end" class="k-invalid-msg"></span></div><div class="k-edit-label"> <label for="IsAllDay">IsAllDay</label></div><div data-container-for="isAllDay" class="k-edit-field"> <input data-bind="checked: isAllDay" data-val="true" id="IsAllDay" name="IsAllDay" type="checkbox" /></div><div class="k-edit-label"> <label for="RecurrenceRule">RecurrenceRule</label></div><div data-container-for="recurrenceRule" class="k-edit-field"> <div data-bind="value:recurrenceRule" id="RecurrenceRule" name="RecurrenceRule"></div><script>\tjQuery(function(){jQuery("#RecurrenceRule").kendoRecurrenceEditor({});});</script></div><div class="k-edit-label"> <label for="Description">Description</label></div><div data-container-for="description" class="k-edit-field"> <textarea class="k-textbox" cols="20" data-bind="value:description" id="Description" name="Description" rows="2"></textarea></div><div data-container-for="project" class="k-edit-field"> <script> function filterProjects() { return { clientno: $("';Clients").val() }; } </script> <input class="input" data-val="true" data-val-number="The field ProjectId must be a number." data-val-required="The ProjectId field is required." id="Projects" name="Projects" type="text" value="0" /><script> jQuery(function(){jQuery("#Projects").kendoDropDownList({"dataSource":{"transport":{"read":{"url":"/Projects/ViewProjects","data":filterProjects},"prefix":""},"serverFiltering":true,"filter":[],"schema":{"errors":"Errors"}},"dataTextField":"ProjectName","autoBind":false,"dataValueField":"ProjectNo","index":0});});</script></div>;o+=;}return o;'
1 Answer, 1 is accepted
From the provided information it seems that the issue might be caused by the "filterProjects" function used inside the edit template as it contains "#" symbol. Please note that all "#" (sharp) symbols inside the editor templates should be escaped as they are special symbols used by Kendo UI templates:
<script> function filterProjects() { return { clientno: $("\#Clients").val() }; } </script>Regards,
Vladimir Iliev
Telerik