Hint leaving the screen problem

[Yordan]

If the hint is higher than about 100 pixels - and you pass over a top cell event - it leaving the browser screen, hiding part of the information it having.

I am using the " Example of Fare Calendar in Blazor Scheduler Component" from the demos as a base on Syncfusion site.

[Yordan]

Is there any possible easy solution ?

[Vengatesh Maniraj]

Sorry for the delay.

Currently we are checking on this and get back to you by Feb 14th 2022.

[Balasubramanian Sattanathan]

Hi Yordan,

We suggest you to integrate the ToolTip component to resolve the reported issue like the below code snippet.

Code snippet:

@page "/"

 

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Popups

@using Blazor_sample.Data

 

<SfSchedule @ref="ScheduleRef" TValue="ScheduleData.RoomData" Width="100%" Height="650px" @bind-SelectedDate="@SelectedDate" EnableAutoRowHeight="@AdaptiveRow">

    <ScheduleViews>

        <ScheduleView Option="View.TimelineDay"></ScheduleView>

    </ScheduleViews>

    <ScheduleGroup EnableCompactView="false" Resources="@groupData"></ScheduleGroup>

    <ScheduleResources>

        <ScheduleResource TItem="RoomsData" TValue="int[]" DataSource="@ResourceData" Field="RoomId" Title="Room Type" Name="MeetingRoom" TextField="Name" IdField="Id" ColorField="Color" AllowMultiple="true"></ScheduleResource>

    </ScheduleResources>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

</SfSchedule>

<SfTooltip ID="Tooltip" Target=".e-appointment" Content="@TooltipContent" OnRender="OnRender" Height="120px"></SfTooltip>

 

@code{

    SfSchedule<ScheduleData.RoomData> ScheduleRef;

    string TooltipContent = "";

    private DateTime SelectedDate { get; set; } = new DateTime(DateTime.Today.Year, 1, 3);

    private bool AdaptiveRow { get; set; } = true;

    private List<ScheduleData.RoomData> DataSource { get; set; } = new ScheduleData().GetRoomData();

    private string[] groupData = new string[] { "MeetingRoom" };

    private List<RoomsData> ResourceData { get; set; } = new List<RoomsData> {

        new RoomsData { Name = "Room A", Id = 1, Color = "#1aaa55" },

        new RoomsData { Name = "Room B", Id = 2, Color = "#357cd2" },

        new RoomsData { Name = "Room C", Id = 3, Color = "#7fa900" },

        new RoomsData { Name = "Room D", Id = 4, Color = "#ea7a57" },

        new RoomsData { Name = "Room E", Id = 5, Color = "#00bdae" },

        new RoomsData { Name = "Room F", Id = 6, Color = "#f57f17" },

        new RoomsData { Name = "Room G", Id = 7, Color = "#8e24aa" },

        new RoomsData { Name = "Room H", Id = 8, Color = "#3090C7" },

        new RoomsData { Name = "Room I", Id = 9, Color = "#df5286" },

        new RoomsData { Name = "Room J", Id = 10, Color = "#fec200" }

    };

    public class RoomsData

    {

        public string Name { get; set; }

        public string Color { get; set; }

        public int Id { get; set; }

    }

    public async Task OnRender(TooltipEventArgs args)

    {

        ScheduleData.RoomData eventData = await ScheduleRef.GetTargetEventAsync((int)args.Left, (int)args.Top);

        TooltipContent = "<div>Subject: " + eventData.Subject + "</div><div> StartTime: " + eventData.StartTime

                        + "</div><div>EndTime: " + eventData.EndTime + "</div><div>RoomId: " + eventData.RoomId + "</div><div>Description: " + eventData.Description;

    }

}

Here is the video demo that works as expected.


Sample: Added in the attachment

Kindly refer and follow the above solution, let us know if this is helpful.

Regards,
Balasubramanian S

Attachment: Blazor_sample_ec7b7590.zip

[Vengatesh Maniraj]

You are most welcome!!!

Please get in touch with us if you need any further assistance.

[Yordan]

Is there any pre-requirement for this tooltip to work, since in none of my pages in the project i am working on is working as implementation in the demo.

[Yordan]

P.S. It works on the other controls, but it does not triggers on the scheduler events.

[Yordan]

P.S. 2 : Found out that it stop works in scenario where

<ScheduleView Option="View.Month" >

[Balasubramanian Sattanathan]

Hi Yordan,

Thanks for your update.

We have checked the reported problem “hint-leaving-the-screen-problem” and confirm this as a defect at our end. We have logged the bug report which can be tracked from the following feedback. The fix will be included in our Weekly patch release scheduled on March 8, 2022. We will update you with further details on March 9, 2022, and would appreciate your patience until then.

Feedback: https://www.syncfusion.com/feedback/32880/the-tooltip-element-goes-outside-of-the-viewport

Regards,
Balasubramanian S

[Vengatesh Maniraj]

We are glad to announce that our weekly patch release v19.4.55 has been rolled out successfully. In this release, an issue with the tooltip going outside of the viewport has been fixed. As a result, we recommend you upgrade to the latest version of our Syncfusion package to avail of those changes.

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

Kindly check the reported defect in the latest version and get back to us if you need any further assistance.