Error on the day View and navigating from the day view

Hello,

I having some problems with switching views on the scheduler.
  • When switching views, sometimes the events are not rendered. I get the data remotely depending on the current scheduler dates and then run the  StateHasChanged (day, week or month views). From my testing this seems to happen only when I navigate from the Day view to the other views
  • I'm get an error (image below) when navigation to the view day and scrolling through the day.


Please check the attached file for a gif with the problems happening

Kind Regards,
Rodrigo F.

Attachment: SchedulerGettimezoneOffsetError_62625036.7z

3 Replies

AK Alagumeena Kalaiselvan Syncfusion Team February 20, 2020 12:24 PM UTC

Hi Rodrigo, 

Thanks for contacting Syncfusion support! 

We have checked the reported problem and attached gif and we suspect that this occurred due to the scheduler “Navigating” event. So, we suggest you to use Custom Adaptor to handle data operations in an asynchronous manner. The custom Adaptor has the ReadAsync method which triggers for every scheduler navigations. So, you can define your customizations inside the ReadAsync( ) to overcome this issue. 

Kindly follow the below steps for that 

Step 1:  Define the EjsDataManger with Custom Adaptor inside the ScheduleEventSettings element. 
Step 2:  Define ReadAsync() which performs data read operations asynchronously. 

We have modified the already shared sample followed by this forum 151438. Refer the following code that 

<EjsSchedule @ref="LookSchedule" TValue="ViewModel.Look" Height="100%" Width="100%" CurrentView="View.Month" AllowDragAndDrop="false" AllowResizing="false" 
             RowAutoHeight="true" FirstDayOfWeek="1" ShowQuickInfo="false"> 
    <ScheduleWorkHours Highlight="false" /> 
    <ScheduleEvents TValue="ViewModel.Look" EventRendered="OnEventRenderedHandler" OnPopupClose="PopupClose" /> 
    <ScheduleEventSettings TValue="ViewModel.Look" AllowAdding="false" AllowDeleting="false" EnableTooltip="true"> 
        <ChildContent> 
            <EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager> 
        </ChildContent> 
        <Template> 
            @{ 
                var entity = (context as ViewModel.Look); 
                <div class="template-wrap"> 
                    <div class="subject">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.Craft} - {entity.Status}")</div> 
                </div> 
            } 
        </Template> 
        <TooltipTemplate> 
            @{ 
                var entity = (context as ViewModel.Look); 
                <div class="tooltip-wrap"> 
                    <div class="content-area"> 
                        <div class="name">@entity.Craft</div> 
                        <div class="city">@entity.Site</div> 
                        <div class="time">@($"{entity.StartTime.ToUniversalTime().ToString("hh:mm tt")} - {entity.EndTime.ToUniversalTime().ToString("hh:mm tt")}")</div> 
                        <div class="time">@($"{TimeSpan.FromSeconds(entity.Duration).ToString(@"mm")} min")</div> 
                    </div> 
                </div> 
            } 
        </TooltipTemplate> 
    </ScheduleEventSettings> 
    ... 
</EjsSchedule> 
 
@code { 
    public class CustomAdaptor : DataAdaptor 
    { 
        public async override Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string keyValue = null) 
        { 
            // you can define the own customization here instead of using Navigating event 
            var data  = await Index.GetDataSource(); 
            return dataManagerRequest.RequiresCounts ? new DataResult() { Result = data, Count = data.Count() } : (object)data; ; 
        } 
    } 
} 

You can download this sample using the below link 

Please get back to us, If this issue may still persist 

Regards 
Alagumeena.K 



RO Rodrigo February 20, 2020 03:21 PM UTC

Hi Alagumeena,

The reason I'm not using a custom adaptor (It's always my preferred way using syncfusion controls) is because I have external filters to the schedule. Is there a way to trigger the adator externally to the scheduler? Also will the adaptor be triggered by a switch view?

As an example, a super user can filter the events selecting on a dropdown the customer.

kind Regards,
Rodrigo F.


AK Alagumeena Kalaiselvan Syncfusion Team February 21, 2020 04:48 PM UTC

Hi Rodrigo, 

Thanks for your update! 

Yes, Scheduler supports to trigger the adaptor from external filters.  It can achieved by assigning respective filter to ScheduleEventSettings tag Query property and get the filter parameters in “ReadAsync” method. 

The adaptor Read method triggers automatically when switching views and dates in Scheduler. 

Refer the below steps to trigger the adaptor from external filters.  

In that sample, we have updated the filtered query dynamically in drop down component change event. 

Step 1:  Define the EjsDropDownList(external filter) with “ValueChange” event. 
Step2:  Define the “Query” property  inside the element of “ScheduleEventSettings” tag. 
Step3:  Need to fetch the data based on the required constraints while changing the dropdown value. 
Step 4:  Finally, Get the filtered event data through the instance of datamanager request which was define as a parameter of ReadAsync() of CustomAdaptor. Refer below snapshot for that 

 

We have modified the already shared sample based on your requirement. Refer the below code 

@using Syncfusion.EJ2.Blazor.Data; 
@using Syncfusion.EJ2.Blazor.DropDowns 
... 
 
<EjsDropDownList TValue="string" TItem="Type" Placeholder="Select a game" DataSource="@LocalData"> 
    <DropDownListFieldSettings Value="ID" Text="Text"></DropDownListFieldSettings> 
    <DropDownListEvents TValue="string" ValueChange="OnChangeValue"></DropDownListEvents> 
</EjsDropDownList> 
 
<EjsSchedule @ref="LookSchedule" TValue="ViewModel.Look" Height="100%" Width="100%" CurrentView="View.Month" AllowDragAndDrop="false" AllowResizing="false" 
             RowAutoHeight="true" FirstDayOfWeek="1" ShowQuickInfo="false"> 
    <ScheduleWorkHours Highlight="false" /> 
   <ScheduleEventSettings TValue="ViewModel.Look" Query="@ScheduleQuery" AllowAdding="false" AllowDeleting="false" EnableTooltip="true"> 
        <ChildContent> 
            <EjsDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></EjsDataManager> 
        </ChildContent> 
        ... 
    </ScheduleEventSettings> 
</EjsSchedule> 
... 

@code{ 
  public class Type 
        { 
            public string ID { get; set; } 
            public string Text { get; set; } 
        } 
 
        public List<Type> LocalData = new List<Type> { 
            new Type() { ID= "Type1", Text= "Paris" }, 
            new Type() { ID= "Type2", Text= "Germany" } 
        }; 
 
        public void OnChangeValue(ChangeEventArgs<string> args) // you can use filter the event based on dropdownvalue 
        { 
            if (args.Value != null) 
            { 
                Type items = JsonConvert.DeserializeObject<Type>(args.ItemData.ToString()); 
                ScheduleQuery = new Query().Where(new WhereFilter() { Field = "Subject", Operator = "equal", value = items.Text }); ; 
            } 
        } 
public class CustomAdaptor : DataAdaptor 
    { 
        public async override Task<object> ReadAsync(DataManagerRequest dm, string keyValue = null) // Get filtered data by using the instance of datamanager request 
        {    
            var data  = await Index.GetDataSource() as IEnumerable; 
            await Task.Delay(100); //To mimic asynchronous operation, we delayed this operation using Task.Delay 
            if (dm.Where != null && dm.Where.Count > 0) 
            { 
                // Filtering 
                data = DataOperations.PerformFiltering(data, dm.Where, dm.Where[0].Operator); 
            } 
            return dm.RequiresCounts ? new DataResult() { Result = data, Count = data.Cast<ViewModel.Look>().Count() } : (object)data; ; 
        } 
    } 
... 
} 

Also you can download this sample using the below link 


Kindly try out with shared sample and get back to us, If you need further queries 

Note: We could not able to get provided script error in our end. So, If provided solution does not meets your requirement. Kindly share Scheduler rendering code or sample project to provide better solution. 

Regards 
Alagumeena.K 


Loader.
Up arrow icon