How to always display the date when scrolling

[Alex]

Hi, how do we ensure the date row is always visible when scrolling down (as shown below) is there a way to fix the date whilst keeping the rest of the scheduler responsive

Initial view, showing date

When we scroll down the date disappears

[Satheesh Kumar Balasubramanian]

Hi Alex,

 

You can use below customized style to achieve your requirement.

 

Index.razor:

<SfToolbar CssClass="custom-toolbar">

    <ToolbarItems>

        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="e-icons e-chevron-left" TooltipText="Previous"></ToolbarItem>

        <ToolbarItem Align="ItemAlign.Left" PrefixIcon="e-icons e-chevron-right" TooltipText="Next"></ToolbarItem>

        <ToolbarItem Type="ItemType.Input" Align="ItemAlign.Left">

            <Template>

                <SfDatePicker @bind-Value="DateValue" CssClass="form-control" Format="dddd MMM dd, yyyy"></SfDatePicker>

            </Template>

        </ToolbarItem>

        <ToolbarItem Align="ItemAlign.Left" Text="Today" TooltipText="Today"></ToolbarItem>

    </ToolbarItems>

</SfToolbar>

 

<style>

    .custom-toolbar {

        position: sticky;

        z-index: 1000;

    }

</style>

 

Kindly try the attached sample and let us know if this meets your requirement.

 

Regards,

Satheesh Kumar B

 

Attachment: Schedule_4ff86525.zip

[Alex]

Hi,

Thanks for the response.  Have you got an example where you don't use a fixed height?  As we can't use fixed height in our application, we always use the full height.

Also, it seems like when scroll bar is hitting the bottom , its calling scroll event and scheduler is being refreshed - is this correct?

Thanks,

Alex

[Satheesh Kumar Balasubramanian]

Hi Alex,

Have you got an example where you don't use a fixed height?  As we can't use fixed height in our application, we always use the full height.

You can use the below customized style to achieve your requirement.

Index.razor:

<style>    

.custom-toolbar {

        position: sticky;

        z-index: 1000;

        top: 0;

    }

</style>

 Also, it seems like when scroll bar is hitting the bottom , its calling scroll event and scheduler is being refreshed - is this correct?

By default, scheduler will not be refreshed when scrolling. Can you please confirm whether you are using AllowVirtualScrolling property?

Regards,
Satheesh Kumar B

Attachment: Schedule_8fe93b76.zip

[Alex]

Hi,

We are using  AllowVirtualScrolling = "true", does this make the scheduler fre

Thanks,

Alex

[Satheesh Kumar Balasubramanian]

Hi Alex,

 

We let you know that the content will be re-rendered based on the scrolling position during the virtual scrolling since it is the behavior. We have attached the video for your reference. If you are facing the same problem in your application which is shown in the attached video, which is the default behavior of scheduler.

Please let me know if you need any further assistance.

 

Regards,

Satheesh Kumar B

Attachment: ScreenCapture_5262022_2.13.53_PM_4ccc5dea.zip