We have been using the RadScheduler in our system for a couple of years. About 1 month ago our customers started reporting a bug when editing appointments. In Chrome when the a scheduler appointment is resized or moved it works the first time, but subsequent changes have no effect, as if the postback isn’t happening.
Occasionally we
also see this js error popping up in the browser console.
Uncaught TypeError:
Cannot read property ‘viewPartIndex’ of null
At a.DayModel._getTimeFromIndex
….
After 3 days of investigation we’ve still not managed to resolve the issue, however, interestingly we've found that removing <!DocType html> to put the browser in 'quirks mode' for Chrome improves the bug but obviously this isn’t a solution!
We’ve tried 3 version of the Telerik.Web.UI (2015.2.623.45, 2015.3.1111.45, and 2017.3.913.45). The error appears in all.
It seems the issue has been
raised lots of times previously but as far as I can tell Telerik have never resolved it?
http://www.telerik.com/forums/radscheduler---violation-forced-reflow-while-executing-javascript-took-n-ms
https://feedback.telerik.com/Project/108/Feedback/Details/64138-scheduler-appintment-duration-gets-reduced-on-appointment-being-dragged-and-dropp
https://feedback.telerik.com/Project/108/Feedback/Details/198638-drag-and-drop-of-the-appointments-does-not-work-correctly-when-the-scheduler-is-i
http://www.telerik.com/forums/schedulerformcreated-error
Any advice would be greatly appreciated as it's affecting a large number of our customers.
We’ve reproduced the error in a very basic demo (see below) to discount anything in our code.
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" Inherits="Default" CodeFile="Default.aspx.cs" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<
html
xml:lang
=
"en"
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadScheduler1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadScheduler1"
LoadingPanelID
=
"RadAjaxLoadingPanel1"
>
</
telerik:AjaxUpdatedControl
>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"RadAjaxLoadingPanel1"
runat
=
"server"
>
</
telerik:RadAjaxLoadingPanel
>
<
div
class
=
"demo-container no-bg"
>
<
telerik:RadScheduler
runat
=
"server"
ID
=
"RadScheduler1"
OnAppointmentInsert
=
"RadScheduler1_AppointmentInsert"
OnAppointmentUpdate
=
"RadScheduler1_AppointmentUpdate"
OnAppointmentDelete
=
"RadScheduler1_AppointmentDelete"
DataKeyField
=
"ID"
DataSubjectField
=
"Subject"
DataStartField
=
"Start"
DataEndField
=
"End"
Width
=
"100%"
Height
=
"1800px"
>
<
AdvancedForm
Modal
=
"true"
></
AdvancedForm
>
<
TimelineView
UserSelectable
=
"false"
></
TimelineView
>
<
TimeSlotContextMenuSettings
EnableDefault
=
"true"
></
TimeSlotContextMenuSettings
>
<
AppointmentContextMenuSettings
EnableDefault
=
"true"
></
AppointmentContextMenuSettings
>
</
telerik:RadScheduler
>
</
div
>
</
form
>
</
body
>
</
html
>
Default.aspx.cs
using
System;
using
System.Collections.Generic;
using
Telerik.Web.UI;
public
partial
class
Default : System.Web.UI.Page
{
private
const
string
AppointmentsKey =
"Telerik.Web.Examples.Scheduler.BindToList.CS.Apts"
;
private
List<AppointmentInfo> Appointments
{
get
{
List<AppointmentInfo> sessApts = Session[AppointmentsKey]
as
List<AppointmentInfo>;
if
(sessApts ==
null
)
{
sessApts =
new
List<AppointmentInfo>();
Session[AppointmentsKey] = sessApts;
}
return
sessApts;
}
}
protected
override
void
OnInit(EventArgs e)
{
base
.OnInit(e);
if
(!IsPostBack)
{
Session.Remove(AppointmentsKey);
InitializeResources();
InitializeAppointments();
}
RadScheduler1.DataSource = Appointments;
}
protected
void
RadScheduler1_AppointmentInsert(
object
sender, SchedulerCancelEventArgs e)
{
Appointments.Add(
new
AppointmentInfo(e.Appointment));
}
protected
void
RadScheduler1_AppointmentUpdate(
object
sender, AppointmentUpdateEventArgs e)
{
AppointmentInfo ai = FindById(e.ModifiedAppointment.ID);
RecurrenceRule rrule;
if
(RecurrenceRule.TryParse(e.ModifiedAppointment.RecurrenceRule,
out
rrule))
{
rrule.Range.Start = e.ModifiedAppointment.Start;
rrule.Range.EventDuration = e.ModifiedAppointment.End - e.ModifiedAppointment.Start;
TimeSpan startTimeChange = e.ModifiedAppointment.Start - e.Appointment.Start;
for
(
int
i = 0; i < rrule.Exceptions.Count; i++)
{
rrule.Exceptions[i] = rrule.Exceptions[i].Add(startTimeChange);
}
e.ModifiedAppointment.RecurrenceRule = rrule.ToString();
}
ai.CopyInfo(e.ModifiedAppointment);
}
protected
void
RadScheduler1_AppointmentDelete(
object
sender, SchedulerCancelEventArgs e)
{
Appointments.Remove(FindById(e.Appointment.ID));
}
private
void
InitializeResources()
{
ResourceType resType =
new
ResourceType(
"User"
);
resType.ForeignKeyField =
"UserID"
;
RadScheduler1.ResourceTypes.Add(resType);
RadScheduler1.Resources.Add(
new
Resource(
"User"
, 1,
"Alex"
));
}
private
void
InitializeAppointments()
{
DateTime start =
new
DateTime(2017, 10, 11).AddHours(12);
Appointments.Add(
new
AppointmentInfo(
"Meeting with Alex"
, start.AddHours(-2), start.AddHours(3),
string
.Empty,
null
,
string
.Empty, 2));
}
private
AppointmentInfo FindById(
object
ID)
{
foreach
(AppointmentInfo ai
in
Appointments)
{
if
(ai.ID.Equals(ID))
{
return
ai;
}
}
return
null
;
}
}
class
AppointmentInfo
{
private
readonly
string
_id;
private
string
_subject;
private
DateTime _start;
private
DateTime _end;
private
string
_recurrenceRule;
private
string
_recurrenceParentId;
private
string
_reminder;
private
int
? _userID;
public
string
ID
{
get
{
return
_id;
}
}
public
string
Subject
{
get
{
return
_subject;
}
set
{
_subject = value;
}
}
public
DateTime Start
{
get
{
return
_start;
}
set
{
_start = value;
}
}
public
DateTime End
{
get
{
return
_end;
}
set
{
_end = value;
}
}
public
string
RecurrenceRule
{
get
{
return
_recurrenceRule;
}
set
{
_recurrenceRule = value;
}
}
public
string
RecurrenceParentID
{
get
{
return
_recurrenceParentId;
}
set
{
_recurrenceParentId = value;
}
}
public
int
? UserID
{
get
{
return
_userID;
}
set
{
_userID = value;
}
}
public
string
Reminder
{
get
{
return
_reminder;
}
set
{
_reminder = value;
}
}
private
AppointmentInfo()
{
_id = Guid.NewGuid().ToString();
}
public
AppointmentInfo(
string
subject, DateTime start, DateTime end,
string
recurrenceRule,
string
recurrenceParentID,
string
reminder,
int
? userID) :
this
()
{
_subject = subject;
_start = start;
_end = end;
_recurrenceRule = recurrenceRule;
_recurrenceParentId = recurrenceParentID;
_reminder = reminder;
_userID = userID;
}
public
AppointmentInfo(Appointment source) :
this
()
{
CopyInfo(source);
}
public
void
CopyInfo(Appointment source)
{
Subject = source.Subject;
Start = source.Start;
End = source.End;
RecurrenceRule = source.RecurrenceRule;
if
(source.RecurrenceParentID !=
null
)
{
RecurrenceParentID = source.RecurrenceParentID.ToString();
}
if
(!String.IsNullOrEmpty(Reminder))
{
Reminder = source.Reminders[0].ToString();
}
Resource user = source.Resources.GetResourceByType(
"User"
);
if
(user !=
null
)
{
UserID = (
int
?)user.Key;
}
else
{
UserID =
null
;
}
}
}