Questions on Kendo UI for jQuery Forum

3 answers

151 views

Additional Fields in the custom edit page throwing exception

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 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">