Can you use Resources for Edit Templates

[Jon]

I have a scheduler with an Edit Template. The scheduler initialiser has a Resources section that is currently containing 3 hard coded items for the three Kendo drop downs I have in the template. When I run the code the drop downs are rendered but not bound to the resources. Eventually I will want the resources to be bound to database.

This is my initialiser

////initialise scheduler
$("#scheduler").kendoScheduler({
    date: Date.now(),
    timezone: "Europe/London",
    workDayStart: new Date("2013/1/1 08:00 AM"),
    workDayEnd: new Date("2013/1/1 8:00 PM"),
    dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd/M')#</strong>"),
    selectable: true,
    messages: {
        ariaSlotLabel: "Selected from {0:g} to {0:g}",
        showWorkDay: "Show core work hours"
    },
    editable: {
        window: {
            title: "Work Request",
            width: "720px"
        },
        template: $("#customEditorTemplate").html()
    },
    height: 400,
    views: [
        { type: "day", editable: { destroy: false } },
        { type: "week", editable: { destroy: false }, eventHeight: 40 },
        { type: "timeline", editable: { destroy: false }, eventHeight: 40 },
        { type: "timelineWeek", selected: true, majorTick: 1440, minorTickCount: 1, editable: { destroy: false }, eventHeight: 40 },
        { type: "agenda" },
        { type: "month", editable: { destroy: false }, eventHeight: 40 }
    ],
    timezone: "Etc/UTC",
    dataSource: {
        type: "signalr",
        push: function (e) {
            var notification = $("#notification").data("kendoNotification");
            notification.success(e.type);
        },
        transport: {
            signalr: {
                hub: sHub,
                promise: sHubStart,
                server: {
                    read: "read",
                    create: "create",
                    update: "update",
                    destroy: "destroy"
                },
                client: {
                    read: "read",
                    create: "create",
                    update: "update",
                    destroy: "destroy"
                }
            }
        },
        schema: {
            model: {
                id: "wRequestID",
                fields: {
                    wRequestId: {
                        editable: false,
                        from: "WRequestID",
                        type: "number",
                        defaultValue: 0
                    },
                    start: {
                        from: "Start",
                        type: "date",
                        culture: "en-GB"
                    },
                    end: {
                        from: "End",
                        type: "date",
                        culture: "en-GB" },
                    diary: {
                        from: "Diary",
                        type: "object",
                        defaultValue: "UIS"
                    },
                    team: {
                        from: "Team",
                        type: "object"
                    },
                    title: {
                        from: "Title",
                        type: "string",
                        validation: { required: true }
                    },
                    workManager: {
                        from: "WorkManager",
                        type: "object"
                    },
                    assignee: {
                        from: "Assignee",
                        type: "object"
                    },
                    changeRef: {
                        from: "ChangeRef",
                        type: "string",
                        validation: { required: true }
                    },
                    activity: {
                        from: "Activity",
                        type: "string",
                        validation: { required: true }
                    },
                    impactedServers: {
                        from: "ImpactedServers",
                        type: "string",
                        validation: { required: true }
                    },
                    impactedServices: {
                        from: "ImpactedServices",
                        type: "string",
                        validation: { required: true }
                    },
                    isBAU: {
                        from: "IsBAU",
                        type: "boolean",
                        defaultValue: false
                    },
                    projectRef: {
                        from: "ProjectRef",
                        type: "string",
                        validation: { required: true }
                    },
                    notes: {
                        from: "Notes",
                        type: "string"
                    },
                    isOOH: {
                        from: "IsOOH",
                        type: "boolean",
                        defaultValue: false
                    },
                    isAllDay: {
                        from: "IsAllDay",
                        type: "boolean",
                        defaultValue: false
                    },
                    recurrenceRule: {
                        from: "RecurrenceRule",
                        type: "string"
                    },
                    recurrenceId: {
                        from: "RecurrenceID",
                        type: "number"
                    },
                    recurrenceException: {
                        from: "RecurrenceException",
                        type: "string"
                    },
                    startTimezone: {
                        from: "StartTimezone",
                        type: "string"
                    },
                    endTimezone: {
                        from: "EndTimezone",
                        type: "string"
                    }
                }
            },
        },
    },
    resources: [
        {
            field: "team",
            dataSource: [
                { text: "Team 1", value: "Team 1", color: "#f8a398" },
                { text: "Team 2", value: "Team 2", color: "#51a0ed" },
                { text: "Team 3", value: "Team 3", color: "#56ca85" }
            ],
            title: "Team"
        },
        {
            field: "workManager",
            dataSource: [
                { text: "Manager 1", value: "12345", color: "#f8a398" },
                { text: "Manager 2", value: "23456", color: "#51a0ed" },
                { text: "Manager 3", value: "34567", color: "#56ca85" }
            ],
            title: "Work Manager",
        },
        {
            field: "assignee",
            dataSource: [
                { text: "Alex", value: "12345", color: "#f8a398" },
                { text: "Bob", value: "23456", color: "#51a0ed" },
                { text: "Charlie", value: "34567", color: "#56ca85" }
            ],
            title: "Assigned To"
        }
    ]
});

and this is my Edit template...

<script id="customEditorTemplate" type="text/x-kendo-template">
    <div class="container-fluid">
        <div class="editor-row form-group-sm">
            <div class="col-sm-1">
                <label for="wRequestID">ID</label>
                <input type="text" class="form-control" id="wRequestID" name="wRequestID" readonly data-bind="value:wRequestID">
            </div>
            <div class="col-sm-4">
                <label for="diary">Diary</label>
                <input type="text" class="form-control" id="diary" name="diary" readonly data-bind="value:diary" value="UIS">
            </div>
            <div class="col-sm-5 form-group-sm">
                <label for="team">Team</label>
                <select id="team" data-bind="value:team" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text">
                    <option value="UIS Solaris">UIS Solaris</option>
                    <option value="UIS Unix1">UIS Unix1</option>
                    <option value="UIS Worthing">UIS Worthing</option>
                </select>
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-10">
                <label for="title">Title</label>
                <input type="text" class="form-control" id="title" name="title" required="required" data-bind="value:title">
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-5">
                <label for="start">Start</label>
                <input type="text"
                        data-role="datetimepicker"
                        data-interval="15"
                        data-type="date"
                        data-bind="value:start,invisible:isAllDay"
                        name="start"/>
                <input type="text"
                        data-type="date"
                        data-role="datepicker"
                        data-bind="value:start,visible:isAllDay"
                        name="start" />
                <span data-bind="text: startTimezone"></span>
                <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
            </div>
            <div class="col-sm-5">
                <label for="end">End</label>
                <input type="text"
                        data-type="date"
                        data-role="datetimepicker"
                        data-bind="value:end,invisible:isAllDay"
                        name="end"
                        data-datecompare-msg="End date should be greater than or equal to the start date" />
                <input type="text"
                        data-type="date"
                        data-role="datepicker"
                        data-bind="value:end,visible:isAllDay"
                        name="end"
                        data-datecompare-msg="End date should be greater than or equal to the start date" />
                <span data-bind="text: endTimezone"></span>
                <span data-bind="text: startTimezone, invisible: endTimezone"></span>
                <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-3">
                <label for="isAllDay"><input type="checkbox" id="isAllDay" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay"> Anytime</label>
            </div>
            <div class="col-sm-4">
                <label for="isOOH"><input type="checkbox" id="isOOH" name="isOOH" data-type="boolean" data-bind="checked:isOOH"> OOH</label>
            </div>
            <div class="col-sm-3">
                <label for="isBAU"><input type="checkbox" id="isBAU" name="isBAU" data-type="boolean" data-bind="checked:isBAU"> BAU</label>
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-5">
                <label for="changeRef">Change Reference</label>
                <input type="text" class="form-control" id="changeRef" name="changeRef" required="required" data-bind="value:changeRef">
            </div>
            <div class="col-sm-5">
                <label for="projectRef">Project Reference</label>
                <input type="text" class="form-control" id="projectRef" name="projectRef" required="required" data-bind="value:projectRef">
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-5">
                <label for="workManager">Work Manager</label>
                <select id="workManager" name="workManager" data-bind="value:workManager" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text">
                    <option value="FZS78T">Manager 1</option>
                    <option value="FZS89M">Manager 2</option>
                    <option value="FZS98S">Manager 3</option>
                </select>
            </div>
            <div class="col-sm-5">
                <label for="assignee">Assignee(s)</label>
                <select id="assignee" name="assignee" class="form-control" date-bind="value:assignee" data-role="dropdownlist"
                        data-value-field="value" data-text-field="text">
                    <option value="FZS78T">Alex</option>
                    <option value="FZS89M">Bob</option>
                    <option value="FZS98S">Charles</option>
                </select>
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-5">
                <label for="impactedServers">Impacted Servers</label>
                <input type="text" class="form-control" id="impactedServers" name="impactedServers" required="required" data-bind="value:impactedServers">
            </div>
            <div class="col-sm-5">
                <label for="impactedServices">ImpactedServices</label>
                <input type="text" class="form-control" id="impactedServices" name="impactedServices" required="required" data-bind="value:impactedServices">
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-5">
                <label for="activity">Activity</label>
                <textarea id="activity" name="activity" class="form-control" required="required" data-bind="value:activity"></textarea>
            </div>
            <div class="col-sm-5 form-group-sm">
                <label for="notes">Notes</label>
                <textarea id="notes" name="notes" class="form-control" data-bind="value:notes"></textarea>
            </div>
        </div>
        <div class="editor-row form-group-sm">
            <div class="col-sm-10">
                <label for="recurrenceRule">Repeat</label>
                <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div>
            </div>
        </div>
    </div>

</script>

 

 

 

[Alex Hajigeorgieva]

Hello Jon,

The Kendo UI Scheduler resources are used to construct a DataSource instance. You may bind it with a remote endpoint in the same way as your regular DataSource with remote data is bound.

http://docs.telerik.com/kendo-ui/framework/datasource/basic-usage#create-datasource-for-remote-services

A running example is available in this forum thread:

http://www.telerik.com/forums/scheduler-resource

Kind Regards,
Alex
Telerik

 

[Jon]

Hi Alex,

Thanks for your reply... The links you supplied I have seen and used as a basis form my solution. The issue I am having is that I am using a scheduler with an EDIT TEMPLATE rather than a default template. 

I have created a dojo example to illustrate.... http://dojo.telerik.com/@Mych/IKOxu

Can this method be used?

[Alex Hajigeorgieva]

Hi Jon,

Please accept my apology for misunderstanding your original question.

Loading resources in a custom editor template is not currently supported in the Kendo UI Scheduler. Please share your idea to http://kendo.uservoice.com/ so we can consider it for our future releases. (I believe it is a great idea for a feature we should have).

Meanwhile, I can offer a way to achieve resource binding to the editor template programatically.

Here are my suggestions:

- move the resources outside of the Kendo UI Scheduler DataSource(resources are not part of the dataSource object)
-  add the dataSource as an HTML attribute 

data-source="{
     transport: {
        read: get[0...2]ResourceData}}" //[0..2] - i.e Team, WorkManager, Assignee

-   return the resource as JSON:

function getData(e, index) {
  var scheduler = $("#scheduler").data('kendoScheduler');
  var resourcesData = scheduler.resources[index].dataSource.view();
  e.success(resourcesData.toJSON());
}

Here is an updated Dojo demo:
http://dojo.telerik.com/aLOci

Kind Regards,
Alex
Telerik