Getting Error when trying to use "editorTemplate" option --- Customizing event editor using template (Javascript)
Hello Team Syncfusion,
I have an issue when i try to Customize event editor using template.
I get this Error: this.parent.getEditorTemplate(...) is not a function at e.renderFormElements
and when i do a click on cells to add ana event i have this Error : Uncaught TypeError: Cannot read property 'openEditor' of undefined
And if i delete the option :
editorTemplate: '#EventEditorTemplate',
All thing work fine.
NB : I do copy/past of the responsible code that customize event using template on your documentation
SIGN IN To post a reply.
7 Replies
Thank you for your reply Vinitha,
i have an other issue :
In Scheduler exactely on Month View, the default value of AllDay checkbox is checked .
How can i replace the default value to unchecked. with javascript ES5.
And how can i create a popup schedule edit like this (image below) using template (not with add additional fields to the default editor).
Additional Fields :
- CheckBox : Permanent Meeting
- Attached Document : File Upload
- Waiting Room : Checkbox
- AutoMuted : Checkbox
-Video Off: Checkbox
Delegate: Checkbox === if checked need to select the name of users
videoMeetingUrl : input that contain a url and cannot change it (not editable)
Thank you very much for your help
Hi Mustafa,
Thanks for your update.
We have validated your reported query “How to save start and end timezone fields and additional checkbox’s fields in db” and we have prepared the CRUD samples with startTimezone, endTimezone and Extra check box fields which can be downloaded from the below link.
Controller.ts
public JsonResult LoadData(Params param) // Here we get the Start and End Date and based on that can filter the data and return to Scheduler
{
DateTime start = param.StartDate;
DateTime end = param.EndDate;
var data = db.ScheduleEventDatas.Where(app => (app.StartTime >= start && app.StartTime <= end) || (app.RecurrenceRule != null && app.RecurrenceRule != "")).ToList(); // Here filtering the events based on the start and end date value.
return Json(data, JsonRequestBehavior.AllowGet);
}
public class Params
{
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
}
// CRUD Actions
[HttpPost]
public JsonResult UpdateData(EditParams param)
{
if (param.action == "insert" || (param.action == "batch" && param.added != null)) // this block of code will execute while inserting the appointments
{
var value = (param.action == "insert") ? param.value : param.added[0];
int intMax = db.ScheduleEventDatas.ToList().Count > 0 ? db.ScheduleEventDatas.ToList().Max(p => p.Id) : 1;
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
ScheduleEventData appointment = new ScheduleEventData()
{
Id = intMax + 1,
StartTime = startTime,
EndTime = endTime,
Subject = value.Subject,
Location = value.Location,
Description = value.Description,
IsAllDay = value.IsAllDay,
StartTimezone = value.StartTimezone,
EndTimezone = value.EndTimezone,
RecurrenceRule = value.RecurrenceRule,
RecurrenceID = value.RecurrenceID,
RecurrenceException = value.RecurrenceException,
AudioMuted = value.AudioMuted,
Delegate = value.Delegate,
VideoOff = value.VideoOff,
WaitingRoom = value.WaitingRoom
};
db.ScheduleEventDatas.InsertOnSubmit(appointment);
db.SubmitChanges();
}
if (param.action == "update" || (param.action == "batch" && param.changed != null)) // this block of code will execute while updating the appointment
{
var value = (param.action == "update") ? param.value : param.changed[0];
var filterData = db.ScheduleEventDatas.Where(c => c.Id == Convert.ToInt32(value.Id));
if (filterData.Count() > 0)
{
DateTime startTime = Convert.ToDateTime(value.StartTime);
DateTime endTime = Convert.ToDateTime(value.EndTime);
ScheduleEventData appointment = db.ScheduleEventDatas.Single(A => A.Id == Convert.ToInt32(value.Id));
appointment.StartTime = startTime;
appointment.EndTime = endTime;
appointment.StartTimezone = value.StartTimezone;
appointment.EndTimezone = value.EndTimezone;
appointment.Subject = value.Subject;
appointment.Location = value.Location;
appointment.Description = value.Description;
appointment.IsAllDay = value.IsAllDay;
appointment.RecurrenceRule = value.RecurrenceRule;
appointment.RecurrenceID = value.RecurrenceID;
appointment.RecurrenceException = value.RecurrenceException;
appointment.AudioMuted = value.AudioMuted;
appointment.Delegate = value.Delegate;
appointment.VideoOff = value.VideoOff;
appointment.WaitingRoom = value.WaitingRoom;
}
db.SubmitChanges();
}
if (param.action == "remove" || (param.action == "batch" && param.deleted != null)) // this block of code will execute while removing the appointment
{
if (param.action == "remove")
{
int key = Convert.ToInt32(param.key);
ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == key).FirstOrDefault();
if (appointment != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
}
else
{
foreach (var apps in param.deleted)
{
ScheduleEventData appointment = db.ScheduleEventDatas.Where(c => c.Id == apps.Id).FirstOrDefault();
if (apps != null) db.ScheduleEventDatas.DeleteOnSubmit(appointment);
}
}
db.SubmitChanges();
}
var data = db.ScheduleEventDatas.ToList();
return Json(data, JsonRequestBehavior.AllowGet);
}
Db Structure:
Kindly try with the above sample and get back to us if you need any further assistance.
Regards,
Vinitha
Thank you for your reply, the solution are goood, just have another issue with the multiselect checkbox
I have an issue with multi select textbox
i have data like :
contactList = {
id : 1, name: name1,
id : 2, name: name2,
id : 3, name: name3,
id : 4, name: name4,
}
as data binding i use
var dataContact = new ej.data.DataManager({
url: window.location.origin + '/contact/getContacts',
crudUrl: window.location.origin + '/BatchData',
adaptor: new ej.data.UrlAdaptor(),
crossDomain: true,
})
let contactListEle = args.element.querySelector('#ContactDropList')
let booleanValDelegateList = args.data['ContactDropList']
? args.data['ContactDropList']
: dataContact
if (!contactListEle .classList.contains('e-multiselect')) {
new ej.dropdowns.MultiSelect(
{
dataSource: booleanValDelegateList,
// set placeholder to MultiSelect input element
placeholder: 'Contact',
value: args.data['ContactDropList'],
// set the type of mode for checkbox to visualized the checkbox added in li element.
mode: 'CheckBox',
// set true for enable the selectAll support.
showSelectAll: true,
// set the select all text to MultiSelect checkbox label.
selectAllText: 'Select All',
fields: { text: 'name', value: 'id' },
},
contactListEle
)
}i can get the data and display it first time, then when i try to edit an event i found just the id of the contact that i already saved.
for example if i save on database the name3 with id:3, then when i try to edit the event the multiselect checkbox show me just the id not the name
Hi Mostafa,
Thanks for your update.
We have modified the sample with multiselect of your shared code snippet and were unable to replicate the problem at our end. Please refer to the following sample.
Please ensure that you have text in name fields which is assigned to multiselect datasource. If you still face the issue, please try to replicate the issue in a sample or share event collection of scheduler and datasource applied to multiselect to validate the problem at our end.
Regards,
Nevitha
SIGN IN To post a reply.
