We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Error When Dragging/Resizing Appointment

I am using package version 17.3.18 and the month view of the scheduler.  When I drag or resize an appointment, I receive the following error in the console and the appointment is not updated in the calendar (not sure if that is by design or not).  This also causes a disconnect (I am using server-side blazor), probably because of the thrown error.

Error: System.NullReferenceException: Object reference not set to an instance of an object.
   at Syncfusion.EJ2.Blazor.BaseComponent.Update(String value, String keyField, String key)
--- End of stack trace from previous location where exception was thrown ---
   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
   at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)

I've reviewed the release notes for the later package versions and I haven't seen it as a fixed bug.  Is this a bug in the version I am using?  Is it fixed in a later version?  I can't currently use a later version because I am not able to use VS 2019 preview, so I can't simply try a later version to see if this has been resolved.

6 Replies

NR Nevitha Ravi Syncfusion Team November 20, 2019 02:25 PM UTC

Hi Kevin, 

Greetings from Syncfusion Support. 

We suspect that the cause for the issue might be due to some customization done within events or appointment collections type mismatch, please find the following workable code snippet for your reference. 

@using Syncfusion.EJ2.Blazor.Schedule 
 
<EjsSchedule TValue="AppointmentData" Height="650px" CurrentView="View.Month" SelectedDate="@(new DateTime(2019,1,31))"> 
    <ScheduleEventSettings DataSource="DataSource"></ScheduleEventSettings> 
</EjsSchedule> 
@code{ 
    List<AppointmentData> DataSource = new List<AppointmentData> 
    { 
        new AppointmentData{ Id = 1, Subject = "Meeting", StartTime = new DateTime(2019, 1, 31, 9, 30, 0) , EndTime = new DateTime(2019, 1, 31, 11, 0, 0)} 
    }; 
    public class AppointmentData 
    { 
        public int Id { get; set; } 
        public string Subject { get; set; } 
        public string Location { get; set; } 
        public DateTime StartTime { get; set; } 
        public DateTime EndTime { get; set; } 
        public string Description { get; set; } 
        public bool IsAllDay { get; set; } 
        public string RecurrenceRule { get; set; } 
        public string RecurrenceException { get; set; } 
        public Nullable<int> RecurrenceID { get; set; } 
    } 
} 

Please try the code snippet if the issue persist still share the issue replicating code or try to reproduce a issue in a sample to provide the prompt solution at earliest. 

Regards, 
Nevitha 




UN Unknown November 21, 2019 12:12 AM UTC

I believe my original error was caused by my appointment data not having an Id property.  The following reproduces the error (notice the AppointmentId property and not Id):

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Schedule


<EjsSchedule TValue="AppointmentData"
                ModelType="@appointmentModel"
                Height="100%"
                Width="100%"
                CurrentView="View.Month"
                SelectedDate="@(new DateTime(2019,12,1))">
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings DataSource="@DataSource">
        <Template>
            @{
                var appointment = (context as AppointmentData);
                <div class="subject">
                    @(appointment.Subject + " - " + appointment.Location)
                </div>
            }
        </Template>
    </ScheduleEventSettings>
</EjsSchedule>

@code{

    private readonly AppointmentData appointmentModel = new AppointmentData();

    private List<AppointmentData> DataSource = new List<AppointmentData>
{
        new AppointmentData{ AppointmentId = Guid.NewGuid(), Subject = "Meeting1", Location="Charleston, SC", Status="Confirmed", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
        new AppointmentData{ AppointmentId = Guid.NewGuid(), Subject = "Meeting2", Location="San Diego, CA", Status = "Confirmed", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(1)}
    };

    public class AppointmentData
    {
        public Guid AppointmentId { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public string Status { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
    }
}

If I change AppointmentId to Id, I no longer receive the original error.

However, there is another error, even if I use the Id property.  Unfortunately, this error occurs intermittently.  When a meeting is dragged and dropped or resized, the signalR connection is closed with the following in the browser console:

[2019-11-20T18:41:56.206Z] Error: Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'. blazor.server.js:1:5015
    log https://localhost:5001/_framework/blazor.server.js:1
    stopConnection https://localhost:5001/_framework/blazor.server.js:1
    onclose https://localhost:5001/_framework/blazor.server.js:1
    close https://localhost:5001/_framework/blazor.server.js:1
    stop https://localhost:5001/_framework/blazor.server.js:1
    stopInternal https://localhost:5001/_framework/blazor.server.js:1
    a https://localhost:5001/_framework/blazor.server.js:1
    a https://localhost:5001/_framework/blazor.server.js:1
    s https://localhost:5001/_framework/blazor.server.js:1

There is nothing in the .net console.  This doesn't happen every time an appointment is dragged and dropped or resize, but occurs after a few times of moving or resizing.  I have generally been able to reproduce it by resizing and dragging and dropping "meeting 2" 5-7 times.  I have also tried using a separate TemplateArgs class as the model (as shown in some other examples in your documentation).  The same thing occurred.

The following reproduces this error (note the use of the template):

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData"
             ModelType="@appointmentModel"
             Height="100%"
             Width="100%"
             CurrentView="View.Month"
             SelectedDate="@(new DateTime(2019,12,1))">
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings DataSource="DataSource">
        <Template>
            @{
                var appointment = (context as AppointmentData);
                <div class="subject">
                    @(appointment.Subject + " - " + appointment.Location)
                </div>
            }
        </Template>
    </ScheduleEventSettings>
</EjsSchedule>
@code{
    AppointmentData appointmentModel = new AppointmentData();
    List<AppointmentData> DataSource = new List<AppointmentData>
{
        new AppointmentData{ Id = 1, Subject = "Meeting1", Location="Charleston, SC", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
        new AppointmentData{ Id = 2, Subject = "Meeting2", Location="San Diego, CA", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(1)}
    };
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

This error occurs event if I simplify the template to:

        <Template>
            @{
                <div class="subject">
                    @((context as AppointmentData).Subject)
                </div>
            }
        </Template>

However, this error does not occur if I do not use the template at all.  That is, the following does not result in the error:

<EjsSchedule TValue="AppointmentData"
             ModelType="@appointmentModel"
             Height="100%"
             Width="100%"
             CurrentView="View.Month"
             SelectedDate="@(new DateTime(2019,12,1))">
    <ScheduleViews>
        <ScheduleView Option="View.Month"></ScheduleView>
    </ScheduleViews>
    <ScheduleEventSettings DataSource="DataSource">
    </ScheduleEventSettings>
</EjsSchedule>
@code{
    AppointmentData appointmentModel = new AppointmentData();
    List<AppointmentData> DataSource = new List<AppointmentData>
{
        new AppointmentData{ Id = Guid.NewGuid(), Subject = "Meeting1", Location="Charleston, SC", StartTime = new DateTime(2019, 12, 04).Date , EndTime = new DateTime(2019, 12, 11).Date.AddMinutes(1)},
        new AppointmentData{ Id = Guid.NewGuid(), Subject = "Meeting2", Location="San Diego, CA", StartTime = new DateTime(2019, 12, 11).Date , EndTime = new DateTime(2019, 12, 18).Date.AddMinutes(1)}
    };
    public class AppointmentData
    {
        public Guid Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}


UN Unknown November 21, 2019 12:14 AM UTC

Sorry, I ran out of space on the previous post.

Can you reproduce the error I mentioned?  Do you have a guess as to what is causing the error?  Let me know if additional information is useful.  Thank you!


NR Nevitha Ravi Syncfusion Team November 21, 2019 01:10 PM UTC

Hi Kevin, 

Thanks for your update. 

We have checked the shared code and could reproduce the reported problem at our end. The problem occurs due to low buffer size, so please add the following code in the startup.cs page. 

        public void ConfigureServices(IServiceCollection services) 
        { 
            services.AddRazorPages(); 
            services.AddServerSideBlazor(); 
            services.AddSingleton<WeatherForecastService>(); 
            services.AddSignalR(e => 
            { 
                e.MaximumReceiveMessageSize = 102400000; 
            }); 
        } 

Please try out the solution and get back to us if you still face any problem. 

Regards, 
Nevitha 



UN Unknown November 21, 2019 04:25 PM UTC

That seems to have solved the issue.  Thanks!


NR Nevitha Ravi Syncfusion Team November 21, 2019 06:48 PM UTC

Hi Kevin, 

Your most welcome. Kindly keep in touch for further assistance, we will be always happy in assisting you. 

Regards, 
Nevitha 


Loader.
Live Chat Icon For mobile
Up arrow icon