Can you use Resources for Edit Templates

4 posts, 0 answers
  1. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 24 May Link to this post

    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>

     

     

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    114 posts

    Posted 26 May Link to this post

    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
    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
  4. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 26 May in reply to Alex Hajigeorgieva Link to this post

    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?

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    114 posts

    Posted 30 May Link to this post

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