Additional Fields in the custom edit page throwing exception

[Alex]

Hi there,

I'm trying to add an extra field called 'attendees' to my custom edit page. My initial intent is to schedule a room with participating members and NOT grouping the members but the rooms

However, whenever I run it, i get the exception 'c is undefined'. Please see my code below.

 Script

define([
    'plugins/router',
    'global/session',
    'services/security/map/general',
    'services/security/employee/general',
    'services/logger'
],
    function (router, session, mapService, employeeService, logger) {

        var vm = function () {
            var self = this;
            self.title = "Room Reservations";
            self.floorId = ko.observable();
            self.floorList = ko.observableArray();
            self.reservationList = ko.observableArray();
            self.personList = ko.observableArray();
            self.roomList = ko.observableArray();

            self.session = session;

            self.dropDownConfig = {
                dataTextField: "FullName",
                dataValueField: "Id",
                dataSource: self.floorList,
                value: self.floorId,
                index: 0,
            };

            self.floorId.subscribe(function (row) {
                for (var i = 0; i < self.floorList().length; i++) {
                    self.roomList([]);
                    if (self.floorList()[i].Id == row) {
                        self.roomList($.map(self.floorList()[i].Rooms, function (e) {
                            return { value: e.Id, text: e.Name };
                        }));

                        self.getReservations(row);
                        break;
                    }
                };
            });

            self.activate = function () {
                return $.when(mapService.getFloorWithReservations(), employeeService.getPeople({
                    PersonTypeId: null,
                    DepartmentId: null
                }))
               .then(function (getAllFloors, getPeople) {
                   if (getAllFloors.OperationStatus == "Success") {
                       self.floorList([]);
                       self.floorList(getAllFloors.ReturnValue);
                   }

                   if (getPeople.OperationStatus == "Success") {
                       self.personList([]);
                       self.personList(getPeople.ReturnValue);
                   }
               })
               .fail(function () {
               })
               .always(function () {
                   session.isBusy(false);
               });
            };
            self.attached = function () {

            };
            self.binding = function () {
                self.roomList([]);
                if (self.floorList().length) {
                    self.roomList($.map(self.floorList()[0].Rooms, function (e) {
                        return { value: e.Id, text: e.Name };
                    }));

                    self.getReservations(self.floorList()[0].Id);
                }
            };
            self.deactivate = function () {
                var scheduler = $("#scheduler").data("kendoScheduler");
                if (scheduler != null) {
                    scheduler.destroy();
                    $("#scheduler").empty();
                }
            };
            self.getReservations = function (floorId) {
                session.isBusy(true);
                return mapService.getReservations({ FloorId: floorId })
                   .done(function (getReservations) {
                       if (getReservations.OperationStatus == "Success") {
                           self.reservationList([]);
                           self.reservationList($.map(getReservations.ReturnValue, function (e) {
                               return {
                                   meetingID: e.Id,
                                   title: e.Title,
                                   start: new Date(moment(e.Start).format('L hh:mm a')),
                                   end: new Date(moment(e.End).format('L hh:mm a')),
                                   description: e.Description,
                                   recurrenceId: e.RecurrenceId,
                                   recurrenceRule: e.RecurrenceRule,
                                   recurrenceException: e.RecurrenceException,
                                   roomId: e.RoomId,
                                   attendees: e.Attendees,
                               }
                           }));
                       }
                       console.log(self.reservationList())
                       return self.loadScheduler();
                   })
                   .fail(function () {
                   })
                   .always(function () {
                       session.isBusy(false);
                   });
            };
            self.loadScheduler = function () {
                var scheduler = $("#scheduler").data("kendoScheduler");
                if (scheduler != null) {
                    scheduler.destroy();
                    $("#scheduler").empty();
                }

                $("#scheduler").kendoScheduler({
                    currentTimeMarker: false,
                    allDaySlot: false,
                    showWorkHours: true,
                    //majorTimeHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'h')#</strong><sup>00</sup>"),
                    date: new Date(),
                    startTime: new Date(getDateTime('07', getMonday(new Date()).getDate())),
                    endTime: new Date(getDateTime('20', getMonday(new Date()).getDate())),
                    mobile: true,
                    workDayStart: new Date(getDateTime('08', getMonday(new Date()).getDate())),
                    workDayEnd: new Date(getDateTime('19', getMonday(new Date()).getDate())),
                    //height: 700,
                    views: [
                        {
                            type: "day",
                            selected: true,
                            eventTemplate: $("#event-template").html(),
                            messages: {
                                allDay: "All Day"
                            },
                        },
                        //{
                        //    type: "month",
                        //    group: {
                        //        orientation: "vertical"
                        //    }
                        //},
                        //{ type: "week", selected: true },
                        //"month",
                        "agenda",
                        //"timeline"
                    ],
                    //majorTick: 1440,
                    minorTickCount: 4,
                    //selectable: true,
                    editable: {
                        template: $("#editor-template").html(),
                        editRecurringMode: "series",
                        confirmation: "Are you sure you want to delete this meeting?",
                        window: {
                            title: "My Custom Title",
                            animation: false
                            //open: myOpenEventHandler
                        }
                    },
                    edit: function (e) {
                        var attendees = e.container.find("#attendees").kendoMultiSelect({
                            valuePrimitive: true,
                            dataTextField: "Name",
                            dataValueField: "Id",
                            dataSource: self.personList()
                        }).data("kendoMultiSelect");

                        var start = e.container.find("#start").kendoDateTimePicker({
                            interval: 15
                        }).data("kendoDateTimePicker");

                        var end = e.container.find("#end").kendoDateTimePicker({
                            interval: 15
                        }).data("kendoDateTimePicker");

                        start.timeView.options.min = new Date(getDateTime('08', getMonday(new Date()).getDate()));
                        start.timeView.options.max = new Date(getDateTime('18', getMonday(new Date()).getDate()));

                        end.timeView.options.min = new Date(getDateTime('08', getMonday(new Date()).getDate()));
                        end.timeView.options.max = new Date(getDateTime('18', getMonday(new Date()).getDate()));
                    },
                    save: function (e) {
                        console.log(e)
                        if (!checkAvailability(e.event.start, e.event.end, e.event)) {
                            e.preventDefault();
                        }
                    },
                    dataBinding: function (e) {
                        //var tables = $(".k-scheduler-times .k-scheduler-table");

                        ////Required: remove only last table in dataBound when grouped
                        //tables = tables.last();

                        //var rows = tables.find("tr");

                        //rows.each(function () {
                        //    $(this).children("th:last").hide();
                        //});


                        var tables = $(".k-scheduler-times .k-scheduler-table");
                        tables.first().find("tr").eq(1).hide();

                        tables = $(".k-scheduler-header-wrap .k-scheduler-table");
                        tables.first().find("tr").eq(1).hide();
                    },
                    dataBound: function (e) {
                        //var scheduler = this,
                        //    view = this.view(),
                        //    firstTr = view.table.find("tr").eq(1);

                        //   console.log(view)
                    },
                    dataSource: self.reservationList(),
                    group: {
                        resources: ["Rooms"],
                        //orientation: "vertical"
                    },
                    resources: [
                        {
                            field: "roomId",
                            name: "Rooms",
                            dataSource: self.roomList(),
                            title: "Room"
                        },
                        {
                            field: "attendees",
                            dataSource: self.roomList(),
                            multiple: true,
                            title: "Attendees"
                        }
                    ],
                    footer: false
                });
            };
        };
        return vm;
    });

 

HTML 

<style type="text/css">
    .invalid-slot {
        background: red !important;
        cursor: no-drop;
    }
</style>
<div class="col-md-12">
    <div class="col-md-6">
        <h2 data-bind="text: title"></h2>
    </div>
    <div class="col-md-6">
        <input style="width: 350px; float: right;" data-bind="kendoDropDownList: dropDownConfig" />
    </div>
</div>
<div class="col-md-12">
    <div style="margin-bottom: 20px;" id="scheduler"></div>

    <script id="event-template" type="text/x-kendo-template">
        <span>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</span>
        <i class="fa fa-lock"> </i>
        <div>
            # for (var i = 0; i < resources.length; i++) { #
            #: resources[i].text #
            # } #
        </div>
    </script>

    <script id="editor-template" type="text/x-kendo-template">
        <div class="k-edit-label">
            <label for="title">Title</label>
        </div>
        <div class="k-edit-field" data-container-for="title">
            <input name="title" class="k-input k-textbox" type="text" data-bind="value:title">
        </div>

        <div class="k-edit-label">
            <label for="start">Start</label>
        </div>
        <div class="k-edit-field" data-container-for="start">
            <input name="start" id="start" type="text" required data-role="datetimepicker" data-bind="value: start" />
        </div>

        <div class="k-edit-label">
            <label for="end">End</label>
        </div>
        <div class="k-edit-field" data-container-for="end">
            <input name="end" id="end" type="text" required data-role="datetimepicker" data-bind="value: end" />
        </div>

        <div class="k-edit-label">
            <label for="description">Description</label>
        </div>
        <div class="k-edit-field" data-container-for="description">
            <textarea name="description" class="k-textbox" data-bind="value: description"></textarea>
        </div>

        <div class="k-edit-label">
            <label for="recurrenceRule">Recurrence</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="attendees">Attendees</label></div>
        <div data-container-for="attendees" class="k-edit-field">
            <select id="attendees" name="attendees" data-bind="value: attendees"></select>
        </div>
    </script>

</div>

 

Please help.

Alex

[Vladimir Iliev]

Hello Alex,

From the provided information it's not clear for us what is the exact reason for current behavior - could you please prepare runable example where the issue is reproduced and send it back to us?

Regards,
Vladimir Iliev
Telerik

 

 

[Alex]

Hello Vladimir,

 Please see the link below

Issue Reproduced

 I just need a reference to the attendees on the edit page, I have added it as a resource as per your documentation but to no avail.

 

Kind Regards,

Alex

[Vladimir Iliev]

Hello Alex,

After inspecting the project it appears that the error is related to the Knockout and it's integration with Kendo UI - please note however that Knockout is not officially supported and therefor I could only suggest to submit issue at following GitHub repository:

• Knockout-kendo

Regards,
Vladimir Iliev
Telerik