Here is my initialization of my kendo scheduler:
scheduler = $('#scheduler').kendoScheduler({
toolbar: [ 'pdf' ],
pdf: {
fileName: 'Current Schedule View.pdf',
proxyTarget: '_blank'
},
date: new Date(),
startTime: new Date(),
timezone: "America/Chicago",
editable: {
template: $("#editor_template").html(),
},
messages: {
pdf: 'To PDF'
},
eventTemplate: $('#event_template').html(),
views: [
"day",
{type: "week", selected: true},
"workWeek",
"month",
{type: "agenda", eventTemplate: $('#agendaEventTemplate').html()},
{type: "timeline", eventHeight: 50}
],
dataSource: dataSource,
save: function(e){
console.log('Saving');
console.log(e);
},
cancel: function(e){
console.log('Cancelling');
console.log(e);
console.log(e.event.ownerId[0].value);
console.log(attendeeSaver);
e.event.ownerId = e.event.ownerId[0].value;
e.event.attendees = attendeeSaver;
console.log(e);
},
edit: function(e){
console.log(e);
attendeeSaver = e.event.attendees;
//if(e.event.ownerId == '{!currentUser}' || e.event.ownerId == 'none'){
console.log(e);
console.log(e.event.attendees);
console.log(e.event.ownerId);
console.log($('#WhoIdSearchInput'));
var whatIdAutoComp = $('#WhatIdInput').kendoAutoComplete({
minLength: 3,
filter: 'contains',
dataTextField: 'name',
noDataTemplate: $('#noDataTemplate').html(),
filtering: whatId_filter,
dataBound: whatId_dataBound,
change: whatId_change,
open: whatId_open,
select: whatId_selection
}).data('kendoAutoComplete');
console.log($('#WhatIdInput'));
var whoIdAutoComp = $('#WhoIdInput').kendoAutoComplete({
minLength: 3,
filter: 'contains',
dataTextField: 'name',
noDataTemplate: $('#noDataTemplate').html(),
filtering: whoId_filter,
dataBound: whatId_dataBound,
open: whoId_open,
change: whoId_change,
select: whoId_selection
}).data('kendoAutoComplete');
console.log('Test spot');
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getOrgUsers}', function(result, event){
result = result.replace(/\"\;/g, '"');
var resultArray = JSON.parse(result);
var userList = [];
for(var i = 0; i < resultArray.length; i++){
var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color };
userList.push(person);
}
console.log('test spot');
$('#OwnerIdInput').kendoMultiSelect({
maxSelectedItems: 1,
placeholder: 'Select Event Owner',
tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
template: $('#dropDownTemplate').html(),
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: userList
},
change: function(e) {
//console.log(e);
console.log('Inside owner box');
var selectedTags = $('.k-multiselect li.k-button');
for(var i = 0; i < selectedTags.length; i++){
var tag = $(selectedTags[i]);
var item = $(tag.find('span.selected-value'));
for(var k = 0; k < userList.length; k++){
if(item[0].textContent === userList[k].name){
tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});
}
}
}
},
});
console.log('done making owner box');
console.log($('#OwnerIdInput').data('kendoMultiSelect'));
$('#OwnerIdInput').data('kendoMultiSelect').trigger('change');
console.log('triggered owner box');
//Populate edit/create popup fields with passed parameters
/*for(var i = 0; i < parsedParamData.length; i++){
console.log($('#'+parsedParamData[i].fieldName+'Input')[0]);
if(parsedParamData[i].fieldName == 'WhatId' || parsedParamData[i].fieldName == 'WhoId'){
$('#'parsedParamData[i].fieldName+'Input')[0].prop('value', ''+parsedParamData[i].recordName);
//$('#'+parsedParamData[i].fieldName+'Input').data('kendoAutoComplete').value(parsedParamData[i].recordName);
}
else if(parsedParamData[i].fieldName == 'OwnerId'){
$('#'+parsedParamData[i].fieldName+'Input').prop('value', ''+parsedParamData[i].recordId);
//$('#'+parsedParamData[i].fieldName+'Input').data('kendoMultiSelect').value(parsedParamData[i].recordId);
}
}*/
});
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.CalendarData.getAllOrgResources}', function(result, event){
result = result.replace(/\"\;/g, '"');
var resultArray = JSON.parse(result);
console.log(resultArray);
var userList = [];
for(var i = 0; i < resultArray.length; i++){
var gradientColor = ColorLuminance(resultArray[i].color, -0.5);
var personalColor = 'linear-gradient(' + resultArray[i].color + ', ' + gradientColor + ')';
var person = { name: resultArray[i].name, value: resultArray[i].ownerId, tagColor: personalColor, color: resultArray[i].color, resourceType: resultArray[i].ownerType, email: resultArray[i].email };
userList.push(person);
}
$('#inviteInput').kendoMultiSelect({
enable: false,
maxSelectedItems: 90,
placeholder: 'Select People/Resources/Groups to Invite',
tagTemplate: '<span class="selected-value"</span><span style="color: white;">#:data.name#</span>',
template: $('#dropDownTemplate').html(),
dataTextField: 'name',
dataValueField: 'value',
dataSource: {
data: userList,
group: {field: 'resourceType'}
},
change: function(e) {
//console.log(e);
var selectedTags = $('.k-multiselect li.k-button');
for(var i = 0; i < selectedTags.length; i++){
var tag = $(selectedTags[i]);
var item = $(tag.find('span.selected-value'));
for(var k = 0; k < userList.length; k++){
if(item[0].textContent === userList[k].name){
tag.css({'background': userList[k].tagColor, 'width': '100px', 'height': '30px', 'font-size': '15px', 'overflow':'hidden', 'text-overflow':'ellipsis', 'border-radius':'5px'});
}
}
}
}
});
$('#inviteInput').data('kendoMultiSelect').trigger('change');
});
/*Can alter initial time interval here*/
var startTime = $('#startTimeInput').data('kendoDateTimePicker');
$('#endTimeInput').data('kendoDateTimePicker').value(new Date(startTime.value().getTime() + 30*60000));
$('#groupCheck').change(function(){
var invites = $('#inviteInput').data('kendoMultiSelect');
if(this.checked){
invites.enable(true);
} else{
invites.enable(false);
}
});
},
resources: resources
}).data('kendoScheduler');
My problem is the line: $('#OwnerIdInput').data('kendoMultiSelect').trigger('change');
When I click an already existing event to pop open the edit/create popup menu, If I click 'save', all is fine. I can continuously open and close the edit menu as long as I click 'save.' If, however, I click 'cancel' after opening the edit menu once, if I click it again, I will get the following error
Uncaught TypeError: i.wrap is not a function at kendo.all.js:4554
And it happens at the OwnerIdInput change trigger mentioned above. Triggering change has not issues outside of pressing the 'cancel' button and I am just not sure what is causing this behavior or how to fix it.
5 Answers, 1 is accepted
Here you will find a simplified version of the code snippet sent. You will notice that, when canceling the editing of an event, no error could be observed on the console.
May I ask you to modify the above so it reproduces the issue discussed and send it back to us? This way we will be able to troubleshoot it locally and to provide you with the most appropriate assistance for this case.
Regards,
Veselin Tsvetanov
Telerik by Progress
Rank 1
I don't know how I would modify that to reproduce the error. The issue is I can't incorporate my custom CRUD operations, the custom kendo events I am making in those CRUD operations, or the Remote action method calls (which occur asynchronously)...
What would cause kendo.all.js to throw i.wrap is not a function error on a multiselect widget? That is the tough part about debugging this... I have no clue what i.wrap really is or what it refers to.
Rank 1
I seemingly solved the problem. I had a sync: function(){} in my dataSource, but all it did was console.log() kind of as a test and didn't seemingly do anything of importance. So when I saved and update it was fine, but when I clicked cancel it wrecked the event and threw this i.wrap error. I must have got rid of the sync at some point because it didn't appear to do anything, but then even pressing save on an update threw the i.wrap error and my issue got worse (not realizing the one change I didn't revert was putting the sync back in there). So even though it didn't look like it did anything, it must have done something kind of behind the scenes?
But I added a sync: function(){ this.read(); }, call into my dataSource, then on the scheduler cancel event I called e.sender.dataSource.sync(), and now all is well! I can open and cancel event edits all I like, as well as save them without anymore issue. So calling read() to refresh the scheduler and events on a sync seemed to do the trick.
Rank 1
I'm actually having this same problem. I can fix it by re-reading the datasource in the "cancel" event but i dont particularly want to have to do that as i dont want to have to send a server request every time a user cancels an event. Due to the number of records they'll potentially have it could slow down the whole UX by a fair bit...
if you're going to ask to provide a code example, it's difficult as it's tied into an application with CRUD operations just like with OP and has a number of dependencies on other things.
It seems to me that this is a genuine bug and it'd be really nice if you could offer some sort of fix or at least help understand how the error might be caused? as OP has already said it's not very descript?
Rank 1
I am now using an external editor (my own custom editor, not the built in one), and prevent the built in editor from opening at all.
I store the 'old' data of the event right away in the edit event. Then the user can make changes and hit cancel and in my cancel event, I set that event in my array of events I pass to e.success in my read to the old data and call read.
cancel: function(e) {
if (e.sender.oldEventData != undefined) {
if (e.userCancelled == true && e.sender.oldEventData.taskId != '' && e.sender.oldEventData.ownerId != 'none') {
eventData[getIndexById(e.sender.oldEventData.taskId)] = e.sender.oldEventData;
e.sender.dataSource.read();
}
}
},
This forces a refresh of the scheduler.
This works for me because I am using local data. If you are using remote data, then the read CRUD operation will be calling out to the server for event data. With my local data, my read event makes no server calls, just reads in the event array and 're-draws' it on the scheduler as a sort of refresh. My server call is in my dataBinding event that I control with a global flag. The dataBinding event is called a lot, but my flag prevents the event from making a server call multiple times.