1. Home
  2. Forum
  3. Blazor
  4. Force scheduler to reload

Force scheduler to reload

Hello team!

I use a EjsDialog box to handle CRUD action in my scheduler.
but when create/update the event load correctly in database but the scheduler doesn't show the event since I haven't reload the page. I try writing in my save action
 this.ScheduleObj.EventSettings.DataSource = DataSource; // this line show errors bellow
 this.ScheduleObj.Refresh();       




Please is there a way to handle it?? 
when using OnActionComplete with EditorTemplates the scheduler show event immediatly after CRUD action but EditorTemplates has some limit to what I want to achieve.

Thanks!
Chimène NK. 

7 Replies
NR Nevitha Ravi Syncfusion Team September 25, 2019 01:28 PM UTC

  
Hi Nkoumbia, 

Greetings from Syncfusion Support. 

We have checked the reported scenario at our end and suspect that directly adding the appointments in the database without using public methods AddEvent and SaveEvent, for this case you could update the DataSource of the scheduler using property binding. Please share the Save click code snippet if the issue persist still at your end to provide the prompt solution. 

The OnPopupClose event has been introduced in our latest patch release 17.3.10 using which you can prevent the closing of editor window and the fix for issue “resource details not updated in EditoTemplate on cells” also included in this release. Please upgrade your versions to avail the fixes. 

  <ScheduleEvents TValue="AppointmentData" OnPopupClose="OnEditorClose"></ScheduleEvents>  
… 
   public void OnEditorClose(PopupCloseEventArgs<AppointmentData> args) 
    { 
        args.Cancel = true; //to prevent closing of the editor window 
    } 


Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE October 17, 2019 07:25 PM UTC

Hello Team !

I have a Question not sure if I would ask it here or in a SignalR Forum.

Q1. I using blazor server side with SignalR Notification, How can I reload the scheduler in JS Code and also how to show the toast in js code
My scenario is 
- When many users open a same page, if one of them add and appointement I just need to refresh others page user connected in the same group after notify them about the change (The notification work well, the page of the users that make a CRUD action load well no problem about the sender)

Razor page
<EjsSchedule TValue="AppointmentData"  ID="MyScheduler" @ref="ScheduleObj" CssClass="my-schedule" ModelType="@Model" Width="100%" Height="auto" SelectedDate="@(DateTime.Now.Date)" ShowWeekend="false" @bind-CurrentView="@MyView" FirstDayOfWeek=1  StartHour="08:00" EndHour="16:00" RowAutoHeight="@AdaptiveRow" ShowTimeIndicator="false">
</EjsSchedule>
<EjsToast @ref="ToastObj" ID="MyToast" Title="Alerte Information" TimeOut=5000 Icon="e-meeting" Content="@ToastContent" ShowCloseButton="true">
    <ToastPosition X="Center" Y="Top"></ToastPosition>
</EjsToast>    
@code{
public string ToastContent { get; set;} = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";
    EjsToast ToastObj;    
    EjsSchedule<AppointmentData> ScheduleObj;               
}

message.js
connection.on("ReceiveMessage", function(message, groupName) {
    var encodedMsg = message.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
    var li = document.createElement("li");
    li.className = "list-group-item list-group-item-warning";
    li.id = groupName;
    li.textContent = encodedMsg;
    document.getElementById("messagesList").appendChild(li);  
    try {
        var schedulerObj = document.getElementById("MyScheduler").ej2_instances[0]; 
         schedulerObj.DataSource.Reload(); // reload the scheduler Hope there is something I can write to handle the reload or other way
schedulerObj.Refresh();
 
var toastObj = document.getElementById("MyToast").ej2_instances[0];
toastObj.content = "Hello the Ðate has just been update!!";
toastObj.dataBind();
toastObj.Show();// this show and error

           }
    catch (e) {
       console.log(e);
    }
});

Thanks,
Chimène NK.
 

NR Nevitha Ravi Syncfusion Team October 18, 2019 01:18 PM UTC

Hi Nkouambia,
Thanks for your update. 

If your query is not related to previous post, you can create a new thread. We will always happy to assist you. 

We have prepared a sample to reload the scheduler and notify the receivers when CRUD actions performed by sender in razor page itself which can be downloaded from the following location. 

    EjsToast ToastObj; 
    private string groupName = "sm_salle"; 
    private string message = "Someone Just Update Informations"; 
 
    EjsSchedule<AppointmentData> ScheduleObj; 
    View CurrView = View.Week; 
    DateTime SelectedDate = new DateTime(2019, 1, 31); 
    HubConnection connection; 
 
    protected override async Task OnInitializedAsync() 
    { 
        connection = new HubConnectionBuilder().WithUrl("https://localhost:44363/ScheduleHub").Build(); 
        connection.On<List<AppointmentData>>("RecieveData", OnDataChange); 
        connection.On<View>("ChangeView", OnChangeView); 
        connection.On<DateTime>("ChangeDate", OnChangeDate); 
        await connection.StartAsync(); 
    } 
    public void OnActionCompleted(ActionEventArgs<AppointmentData> args) 
    { 
        if (args.RequestType == "eventCreated" || args.RequestType == "eventRemoved" || args.RequestType == "eventChanged") 
        { 
            connection.InvokeAsync("SendData", DataSource); 
        } 
    }   
  Task OnDataChange(List<AppointmentData> data) 
    { 
        this.DataSource = data; 
        this.ScheduleObj.Refresh(); 
        var model = new ToastModel() { Content = message, Title = groupName }; 
        this.ToastObj.Show(model); 
        return Task.CompletedTask; 
    } 

ScheduleHub.cs 
   public class ScheduleHub:Hub 
    { 
        public async Task SendData(List<Index.AppointmentData> data) 
        { 
            await Clients.Others.SendAsync("RecieveData", data); 
        } 
 
        public async Task SendViewData(View data) 
        { 
            await Clients.Others.SendAsync("ChangeView", data); 
        } 
 
        public async Task SendSelectedDateData(DateTime data) 
        { 
            await Clients.Others.SendAsync("ChangeDate", data); 
        } 
    } 
} 


Kindly get back to us if you need any further assistance. 

Regards, 
Nevitha. 


NC NKOUAMBIA CHIMENE October 22, 2019 04:16 PM UTC

Hi Nevitha!

The solution You provide Work for me Thanks. But about Toast Object, since I Have 3 messages depend on CRUD action ("Data Has been Update", "Data Has been delete", "Data Has been created").

When calling the OndataChange Content get the good message but show the previous message, because I think it need a Delay before load the corresponding message, but since we are not in a asynchronious method there is not a possibility to wait a delay before information load. refer https://www.syncfusion.com/forums/145791/how-to-change-toast-content-dynamically

Task OnDataChange(List<AppointmentData> data) 
    { 
        this.DataSource = data; 
        this.ScheduleObj.Refresh(); 
        var model = new ToastModel() { Content = message, Title = groupName }; 
              Task.Delay(100);
        this.ToastObj.Show(model); 
        return Task.CompletedTask; 
    } 


Thanks,
Chimène NK.


NR Nevitha Ravi Syncfusion Team October 23, 2019 06:56 AM UTC

Hi Nkouambia, 

Thanks for your update. 

We are glad that our previous solution helped you. We need to set a delay to change the toast content and we have modified our sample for the same which can be referred from the following link. 

Find the corresponding code snippet. 

protected override async Task OnInitializedAsync() 
    { 
        connection = new HubConnectionBuilder().WithUrl("https://localhost:44363/ScheduleHub").Build(); 
        connection.On<List<AppointmentData>, string>("RecieveData", OnDataChange); 
        connection.On<View>("ChangeView", OnChangeView); 
        connection.On<DateTime>("ChangeDate", OnChangeDate); 
        await connection.StartAsync(); 
    } 
    public void OnActionCompleted(ActionEventArgs<AppointmentData> args) 
    { 
        if (args.RequestType == "eventCreated" || args.RequestType == "eventRemoved" || args.RequestType == "eventChanged") 
        { 
            connection.InvokeAsync("SendData", DataSource, args.RequestType); 
        } 
    } 
    async Task OnDataChange(List<AppointmentData> data, string action) 
    { 
        this.DataSource = data; 
        this.ScheduleObj.Refresh(); 
        await Task.Delay(100); 
        var model = new ToastModel() { Content = action, Title = groupName }; 
        this.ToastObj.Show(model); 
    } 

ScheduleHub.cs 
        public async Task SendData(List<Index.AppointmentData> data, string action) 
        { 
            await Clients.Others.SendAsync("RecieveData", data, action); 
        } 

Could you please try above solution and confirm whether it helps to achieve your requirement?  

Regards, 
Nevitha 


NC NKOUAMBIA CHIMENE October 23, 2019 03:35 PM UTC

Hello Team!

Thanks It Work for me!

Q1: When Navigating in Month View it gave me the errors below and page just plant



And this is the code refer to the line 


Q2: The line 732 that I Comment was added to Reduce the heigth(-21 px) of cells programmatically when I navigate to TimelineMonth in order to Handle the RowAutoHeight programmatically(with a checkbox) but it not works.refer to this thread https://www.syncfusion.com/forums/148325/rowautoheight-curious-behavior
** Since I don't want to loose my template in TimelineweekView when check/unchecked RowAutoHeight (because my timelineweek-week-view will only Have 1 or 2 appointement/day/ressources AM and PM ) in WeekView the rowAuto Height is not important for me
**but in MonthView it is important and I want to reduce the height programmatically only when Condition is TimeLine-month-view and checkbox is unchecked 


Q3: Is ther a Want to hide the option in red cercle I have define 4 Views


Thanks,
Chimène NK.

NR Nevitha Ravi Syncfusion Team October 24, 2019 02:01 PM UTC

Hi Nkouambia, 

Thanks for your update. 

We are happy that your issue has been resolved with the provided solution. 

Q1 & Q2: 
We have modified our previously shared sample with your provided details. We have covered all your requirements like displaying the entire appointment details provided in the template and enable RowAutoHeight as true for Timeline month alone has been achieved which can be referred from the following link. 

<style> 
    .my-schedule.e-schedule .e-timeline-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-view .e-work-cells { 
        height: 70px; 
    } 
 
    .my-schedule.e-schedule .e-timeline-month-view .e-resource-cells, 
    .my-schedule.e-schedule .e-timeline-month-view .e-work-cells { 
        height: 90px; 
    } 
 
    .my-schedule.e-schedule .e-appointment { 
        height: 68px; 
    } 
    .my-schedule.e-schedule .e-agenda-view .e-appointment { 
        height: 30px; 
    } 
</style> 

Note: As mentioned in this thread, when RowAutoHeight property is false, appointment height should be 21px less than work cell height (for rendering more label). In the above sample, if RowAutoHeight property is set to false for other timeline views except month, the appointment will not show as the appointment height are only 2px less than work cell height. 

Q3: We can achieve your requirement in CSS, please refer the following code. 

    .my-schedule.e-schedule .e-today { 
        display: none; 
    } 

Kindly get back to us if you need any further assistance. 

Regards, 
Nevitha 


Loader.
Up arrow icon