How can I prevent the scheduler from changing the scroll position after load

[Frederiek]

After first render, and each time I navigate to another date, the scheduler's timeline scroll position is going back to somewhere around "now". What can I do to prevent that? I want the scroll position to not change when navigating.

I found a way to set the scrollposition to the start of the day by calling sfSchedule.ScrollToAsync("00:00") in the "Created" event, but it still keeps changing the scroll position when navigating to another date after that. I can also call the same method in OnActionCompleted when ActionType == ActionType.DateNavigate, but then it is always jumping back to the start of the day after navigating. I want it to scroll to the start of the day on initial rendering, and then after that simply stay at the same position once the user starts navigating between different days. Is that possible? And if so, how?

[Swathi Ravi]

Hi Frederik,

You can achieve your requirement by setting the Schedule’s EnablePersistence property to true, as shown in the below snippet.

Api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.SfSchedule-1.html#Syncfusion_Blazor_Schedule_SfSchedule_1_EnablePersistence

[index.razor]

<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate" EnablePersistence=true>

    <ScheduleEvents TValue="AppointmentData" Created="onCreated"></ScheduleEvents>

</SfSchedule>

 

@code {

    SfSchedule<AppointmentData> ScheduleRef;

 

    public void onCreated()

    {

        ScheduleRef.ScrollToAsync("00:00");

    }

}

Regards,

Swathi Ravi

Attachment: blazorscheduler_ffce1aa3.zip

[Frederiek]

Okay, that seems to fix it, but I also have to supply an "ID", otherwise there's a new entry created in local storage each time I arrive on that page.

But after supplying an ID, everything is indeed persisted, but then also restored on subsequent visits (as the feature should work I suppose). But that means the scrollToAsync doesn't work anymore (the persisted state seems to be set after the created event). Also I don't want the date to be persisted. I want to show it today starting from 00:00 each time you arrive to the page the first time. After that the scrollposition simply shouldn't change anymore (except by the user).

If I don't set the ID, everything works like I want it to, but then localstorage gets poluted...

[Swathi Ravi]

Frederik,

We don't have an inbuild option for this . We suggest that you can keep the same scroll position while navigating by using the DataBound event. Set the flag variable (here we given isNavigated) to false at first, and then set it to true when navigating the date or view, then set the default scroll position value in the DataBound event if only the flag variable is true.

[index.razor]

<SfSchedule @ref="ScheduleRef" TValue="AppointmentData" Height="650px" @bind-SelectedDate="@CurrentDate">

    <ScheduleEvents TValue="AppointmentData" Created="onCreated" DataBound="onDataBound" Navigating="onNavigating"></ScheduleEvents>

</SfSchedule>

 

@code {

   public bool isNavigated = false;

 

    public async Task onCreated()

    {

        await ScheduleRef.ScrollToAsync("00:00");

    }

 

    public async Task onNavigating(NavigatingEventArgs args) {

        isNavigated = true;

    }

 

    public async Task onDataBound( DataBoundEventArgs<AppointmentData> args)

    {

        if (isNavigated == true)

        {

            await ScheduleRef.ScrollToAsync("00:00");

        }

    }

}

Attachment: blazorschedulerdefaultscrollposition_a171b6c6.zip

[Frederiek]

This code doesn't really make sense to me... 

This is now returning to "00:00" every time you navigate. I want the exact opposite. I don't want the scrollposition to change at all (except by the user).

Anyway, when I run this application, even though "ScrollToAsync("00:00")" is definitely called each time you change the date, the scheduler still jumps back to "now", somewhere after that.

It only does that on weekdays. Not on weekends... very strange. Not sure what's going on... this feels quite buggy...

[Swathi Ravi]

Frederik,

I don't want the scrollposition to change at all (except by the user).

The Scheduler content area scroll position is only maintained in the vertical views of the Scheduler alone(Day, Week, and WorkWeek). Can you please share details of which view of the Scheduler you want to maintain the scroll position after the initial load?

[Frederiek]

I'm talking about the Timeline Day view. Each time you change the date, the view is jumping back to somewhere around "now"... unless it's a weekend day (a day without working hours), then the view jumps to the start "0:00".

You can see it on the demo here (https://blazor.syncfusion.com/demos/scheduler/overview). Just change it to "timeline views" then click on "day", move the scrollbar a bit, then change the date... the scrollbar jumps back to where it was before. Unless the day you changed to is a weekend day, then it jumps back to the beginning.

[Swathi Ravi]

Frederik,

We confirmed your reported problem “When navigate to another date, each time the scroller jumps back to the default position in timeline views
” as a bug and logged the defect report. The fix for this defect will be included in our upcoming weekly patch release, which is expected to be rolled out by mid of March 2023. You can track the status of the fix at the following link:

Feedback : https://www.syncfusion.com/feedback/41696/when-navigate-to-another-date-each-time-the-scroller-jumps-back-to-the-default

Disclaimer: Inclusion of this solution in the weekly release
may change due to other factors including but not limited to QA checks and works reprioritization.

[Ravikumar Venkatesan]

Frederiek, The fix for the issue “scrollbar reset to selected date on date navigate in timeline views” has been included in our weekly release 20.4.53. Upgrade to the latest version to resolve the issue.

Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.4.53?type=all#scheduler

[Frederiek]

I have updated to the latest version (20.4.0.53), and I don't see any changes in the behavior.

The view is still jumping around when changing the date... On workdays it jumps to the middle somewhere, on weekend days it jumps to the beginning.

I also still see the same behavior on the demo (https://blazor.syncfusion.com/demos/scheduler/overview)... not sure that one is already on that version though.

[Ravikumar Venkatesan]

Frederiek,




Thank you for updating to the latest version (20.4.0.53). We apologize that you are still experiencing the same behavior. Our team has verified that the fix was included in the weekly patch release 20.4.53.




To proceed further, please share the following details:

• Steps to reproduce the issue.
• Reproduce the issue in our shared sample that we have attached to this response.




Regarding the demo available on the Syncfusion website (https://blazor.syncfusion.com/demos/scheduler/overview), please note that it uses an older version of the package and therefore, the fix may not reflect in the demo.




Thank you.

Attachment: syncfusion_blazor_schedule_timeline_scroll_position_3e1b32df.zip

[Frederiek]

Hmm, I'm sorry, I must have done something wrong in my testing before... After trying out your sample, not being able to repeat the problem, I re-tried on our app, and couldn't repeat the problem there anymore either.

So, thanks for the fix!

[Ravikumar Venkatesan]

Frederiek,

You are welcome. Let us know if you need any other assistance.