Scheduler Custom Editor Popup set different datasources for controls

2 posts, 0 answers
  1. Rick
    Rick avatar
    49 posts
    Member since:
    Oct 2008

    Posted 26 Jan Link to this post

    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;'

     

    <div data-container-for="project" class="k-edit-field">
        <script>
        function filterProjects() {
            return {
                clientno: $("#Clients").val()
            };
        }
        </script>
     
        @(Html.Kendo().DropDownListFor(model => model.Id)
                                    .Name("Projects")
                                    .DataTextField("Name")
                                    .DataValueField("No")
                                    .DataSource(source => {
                                        source.Read(read => {
                                            read.Action("ViewProjects", "Projects").Data("filterProjects");
                                        })
                                        .ServerFiltering(true);
                                    })
                                    .HtmlAttributes(new { @class = "input" })
                                    .AutoBind(false)
                                    .SelectedIndex(0)
        )
    </div>

    <div data-container-for="project" class="k-edit-field">
        <script>
        function filterProjects() {
            return {
                clientno: $("#Clients").val()
            };
        }
        </script>
     
        @(Html.Kendo().DropDownListFor(model => model.Id)
                                    .Name("Projects")
                                    .DataTextField("Name")
                                    .DataValueField("No")
                                    .DataSource(source => {
                                        source.Read(read => {
                                            read.Action("ViewProjects", "Projects").Data("filterProjects");
                                        })
                                        .ServerFiltering(true);
                                    })
                                    .HtmlAttributes(new { @class = "input" })
                                    .AutoBind(false)
                                    .SelectedIndex(0)
        )
    </div>

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 28 Jan Link to this post

    Hello Rick,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top