Default Editor Template source code

3 posts, 0 answers
  1. David
    David avatar
    6 posts
    Member since:
    Apr 2016

    Posted 28 Jul Link to this post

    I'm working with the Kendo UI scheduler in pure javascript and I want to make changes to the recurrence editor.  

    I want to start with the EXACT javascript template that is used for the default scheduler edtitor, then make my changes.  

    Where can I find the default editor template source?

    Thanks.

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 29 Jul Link to this post

    Hello David,

    You can check the following custom editor template which is created to replicate as much as possible the editor template that the Scheduler generated internally:

    <script type="text/x-kendo-template" id="CustomEditorTemplate">
         <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" name="Title" type="text" required="required" />
        </div>
     
        <div class="k-edit-label">
            <label for="Start">Start</label>
        </div>
        <div data-container-for="start" class="k-edit-field">
            <input name="start" required="required" style="z-index: inherit;" type="datetime"
                data-bind="value:start,invisible:isAllDay"
                data-format="M/d/yyyy h:mm tt"
                data-role="datetimepicker" />
     
            <input name="start" required="required" type="date" style="z-index: inherit;"
                data-bind="value:start,visible:isAllDay"
                data-format="M/d/yyyy"
                data-role="datepicker" />
     
            <span data-bind="text: startTimezone"></span>
            <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 name="end" required="required" style="z-index: inherit;" type="datetime"
                data-bind="value:end,invisible:isAllDay"
                data-format="M/d/yyyy h:mm tt"
                data-role="datetimepicker" />
     
            <input name="end" required="required" type="date" style="z-index: inherit;"
                data-bind="value:end,visible:isAllDay"
                data-format="M/d/yyyy"
                data-role="datepicker" />
     
            <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" name="IsAllDay" type="checkbox" value="true" />
        </div>
     
     
        <div class="endTimezoneRow">
            <div class="k-edit-label"></div>
            <div class="k-edit-field">
                <label class="k-check">
                    <input checked="checked" class="k-timezone-toggle" type="checkbox" value="true" />
                    Use separate start and end time zones
                </label>
            </div>
        </div>
        <script>
            $(".k-timezone-toggle").on("click", function () {
                var isVisible = $(this).is(":checked");
                var container = $(this).closest(".k-popup-edit-form");
     
                var endTimezoneRow = container.find("label[for='endTimezone']").parent().add(container.find("div[data-container-for='endTimezone']"));
                endTimezoneRow.toggle(isVisible);
     
                if (!isVisible) {
                    var uid = container.attr("data-uid");
                    var scheduler = $("\#scheduler").data("kendoScheduler");
                    var model = scheduler.dataSource.getByUid(uid);
                    model.set("endTimezone", null);
                }
            });
     
            var endTimezone = '${data.endTimezone}';
            if (!endTimezone || endTimezone == "null") {
                $(".k-timezone-toggle").trigger('click');
            }
        <\/script>
     
        <div class="k-edit-label">
            <label for="startTimezone">Start Timezone</label>
        </div>
        <div data-container-for="startTimezone" class="k-edit-field">
            <div data-bind="value:startTimezone" id="startTimezone" name="startTimezone" data-role="timezoneeditor"></div>
        </div>
     
        <div class="k-edit-label">
            <label for="endTimezone">End Timezone</label>
        </div>
        <div data-container-for="endTimezone" class="k-edit-field">
            <div data-bind="value:endTimezone" id="endTimezone" name="endTimezone" data-role="timezoneeditor"></div>
        </div>
     
        <div class="k-edit-label">
            <label for="recurrenceRule">Recurrence Rule</label>
        </div>
        <div data-container-for="recurrenceRule" class="k-edit-field">
            <div data-bind="value:recurrenceRule" id="recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
        </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 class="k-edit-label">
            <label for="RoomID">RoomID</label>
        </div>
         
        <div data-container-for="RoomID" class="k-edit-field">
            <input id="RoomID" name="RoomID" style="width: 200px" type="text"
                data-bind="value:RoomID"
                data-val="true"
                data-val-number="The field RoomID must be a number."
                data-source='[{"text":"Meeting Room 101","value":1},{"text":"Meeting Room 201","value":2}]'
                data-text-field="text"
                data-value-field="value"
                data-value-primitive="true"
                data-option-label="None"
                data-role="dropdownlist" />
        </div>
     
        <div class="k-edit-label">
            <label for="Attendees">Attendees</label>
        </div>
        <div data-container-for="Attendees" class="k-edit-field">
            <select id="Attendees" multiple="multiple" name="Attendees"
                data-role="multiselect"
                data-bind="value:Attendees"
                data-source='[{"text":"Alex","value":1},{"text":"Bob","value":2},{"text":"Charlie","value":3}]'
                data-text-field="text"
                data-value-field="value"
                data-value-primitive="true"
                ></select>
        </div>
    </script>

    You can load this template in the Scheduler as demonstrated below:

    $("#scheduler").kendoScheduler({
        editable: {
            //set the template
            template: kendo.template($('#CustomEditorTemplate').html())
        },


    Regards,
    Vladimir Iliev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    6 posts
    Member since:
    Apr 2016

    Posted 01 Aug in reply to Vladimir Iliev Link to this post

    Thanks!
Back to Top