This is a migrated thread and some comments may be shown as answers.
Additional Fields in the custom edit page throwing exception
3 Answers 21 Views
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 13 Aug 2015, 03:31 PM

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

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 17 Aug 2015, 10:11 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Alex
Top achievements
Rank 1
answered on 17 Aug 2015, 03:36 PM

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

0
Vladimir Iliev
Telerik team
answered on 18 Aug 2015, 10:49 AM
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:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Asked by
Alex
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Alex
Top achievements
Rank 1
Share this question
or