Issue with appointment size and position in TelerikScheduler when changing time division

[Hadrian]

Hi, I need the SchedulerResourceGroupHeaderTemplate to have a certain size to fit a long description of the appointment and some buttons for actions. I am using the TelerikScheduler component to represent when a person should take one or several medications, but when I change the time division from 12h to 8h or lower the position of the event/appointment gets completely out of position.

Why does it position itself in this way? Am I using the component incorrectly?

 

Im using telerikSchedulerRef to refresh the UI, when time division changes

telerikSchedulerRef?.Rebind();

and OnItemRenderHandler to add a css class for resizing the appointment control (.k-event)

private void OnItemRenderHandler(SchedulerItemRenderEventArgs e) => e.Class += " customAppointment";

Thanks in advance

 

 <TelerikScheduler Data="@ViewModel.Appointments" @bind-Date="@filterStartDateTime" View="SchedulerView.Timeline" @ref="telerikSchedulerRef" OnItemRender="@OnItemRenderHandler">
     <SchedulerToolBar>
         <SchedulerToolBarCustomTool>

             <div class="mr-2">
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.Day)" Size="sm">24h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.HalfDay)" Size="sm">12h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.EightHours)" Size="sm">8h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.Hourly)" Size="sm">1h</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.HalfHour)" Size="sm">30m</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.TenMinutes)" Size="sm">10m</TelerikButton>
                 <TelerikButton OnClick="()=>SetTimeDivisionMode(TimeDivision.FiveMinutes)" Size="sm" Class="mr-3">5m</TelerikButton>
             </div>
			 
         </SchedulerToolBarCustomTool>

         <SchedulerToolBarCustomTool>
             <div class="time-filters">
                 <TelerikDateTimePicker Title="@Localizer["AppStrings.StartDate"]" @bind-Value="@filterStartDateTime" Format="dd/MM/yyyy HH:mm" Width="160px"></TelerikDateTimePicker>
                 <TelerikFontIcon Icon="@FontIcon.ArrowRight" Size="md" />
                 <TelerikDateTimePicker Title="@Localizer["AppStrings.Enddate"]" @bind-Value="@filterEndDateTime" Format="dd/MM/yyyy HH:mm" Width="160px"></TelerikDateTimePicker>
             </div>
         </SchedulerToolBarCustomTool>
     </SchedulerToolBar>

     <SchedulerResources>
         <SchedulerResource Field="@nameof(Appointment.LineId)" TextField="Text" ValueField="Value" Data="@ViewModel.Resources"></SchedulerResource>
     </SchedulerResources>

     <SchedulerSettings>
         <SchedulerGroupSettings Resources="@GroupingResources" Orientation="@SchedulerGroupOrientation.Vertical"></SchedulerGroupSettings>
     </SchedulerSettings>

     <SchedulerViews>
         <SchedulerTimelineView StartTime="@filterStartDateTime" EndTime="@filterEndDateTime" SlotDivisions="@slotDivisions" SlotDuration="@slotDuration">

             <SchedulerResourceGroupHeaderTemplate>

                 <div class="appointment_container" style="min-height:130px;">
                     <div class="appoint-left">

                         <TelerikButton Icon="@FontIcon.FileAdd" Size="sm" />

                     </div>

                     <div class="appoint-center">
                         <div class="appointment_desc" title="@context.Text">
                             @context.Text
                         </div>

                         <div class="appointment_size">
                            Total: @context.Size ml/24h
                         </div>
                     </div>

                     <div class="appoint-right">
                         <TelerikButton Icon="@FontIcon.Envelop" Size="sm" Class="appoint-envelop" />
                         <span style="font-style:italic">
                             @context.Route
                         </span>
                     </div>

                 </div>

             </SchedulerResourceGroupHeaderTemplate>

             <ItemTemplate>
                 @{
                     <div class="d-flex justify-content-between">
                         <TelerikDropDownButton Icon="@FontIcon.Checkbox">
                             <DropDownButtonItems>
                                 <DropDownButtonItem Icon="@FontIcon.Check"> Check</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.Pause">Pause</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.MinusCircle">Stop</DropDownButtonItem>
                                 <DropDownButtonItem Icon="@FontIcon.Cart">Add to cart</DropDownButtonItem>
                             </DropDownButtonItems>
                         </TelerikDropDownButton>

                         <span>Test description</span>
                     </div>
                 }
             </ItemTemplate>

         </SchedulerTimelineView>
     </SchedulerViews>
 </TelerikScheduler>

private void OnItemRenderHandler(SchedulerItemRenderEventArgs e) => e.Class += " customAppointment";