This is a migrated thread and some comments may be shown as answers.

Chrome error on Rad Scheduler appointment resize or move event when browser window is scrolled.

1 Answer 133 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Oct 2017, 03:17 PM

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;
        }
    }
}

1 Answer, 1 is accepted

Sort by
0
Peter
Top achievements
Rank 1
answered on 18 Oct 2017, 03:33 PM

Hi Michael,

There is a forum thread which explains similar issues and suggests a temporary solution until the fix gets included in the official release: http://www.telerik.com/community/forums/chrome-error-on-rad-scheduler-appointment-resize-or-move-event-when-browser-window-is-scrolled

Tags
Scheduler
Asked by
Michael
Top achievements
Rank 1
Answers by
Peter
Top achievements
Rank 1
Share this question
or