Appointmentimages with alignment and padding

[Stephan]

Hello Telerik-Team,

I'm trying to format appointments in the timelineview of the scheduler. The following code works, but it doesn't look the way I want.

private void rsTermine_AppointmentFormatting(object sender, SchedulerAppointmentEventArgs e)
        {
            e.AppointmentElement.ShowAppointmentDescription = true;
            e.AppointmentElement.TextAlignment = ContentAlignment.MiddleCenter;
            e.AppointmentElement.ForeColor = e.AppointmentElement.BackColor.IdealTextColor();
            e.AppointmentElement.Text = e.Appointment.Start.Date == e.Appointment.End.Date ? $"{e.Appointment.Start:t} - {e.Appointment.End:t} <b>{e.Appointment.Summary}</b>" : $"{e.Appointment.Start:g} - {e.Appointment.End:g}<b>{e.Appointment.Summary}</b>";
            e.AppointmentElement.TextWrap = true;
            e.AppointmentElement.AutoEllipsis = true; ;

            if (e.Appointment.DataItem is IDispositionTermin termin)
            {
                e.AppointmentElement.Image = termin.CalendarSymbol;
                e.AppointmentElement.ImageAlignment = ContentAlignment.MiddleLeft;
                e.AppointmentElement.ImageLayout = ImageLayout.None;
                e.AppointmentElement.TextImageRelation = TextImageRelation.ImageBeforeText;
                e.AppointmentElement.ToolTipText = termin.TooltipText;
                //e.AppointmentElement.Padding = new Padding(5, 1, 2, 1);
            }
        }

 

I want to align both, text and image left with a bit padding on the left side and the image before the text. The appointment should look this way: < padding | image | text >. Have you any suggestions to improve the code?

Greetings from Germany,

Stephan

[Stephan]

Oops, I forget to say, I tried setting TextAlignment and ImageAlignment to ContentAlignment.MiddleLeft, but when I do that, the text is displayed over the image.

[Dess | Tech Support Engineer, Principal]

Hello, Stephan, 

I would recommend you to use the AppointmentElement.AppointmentIcon instead of using the AppointmentElement.Image property. The icon has a slight left padding which may be suitable for your case. In addition, you can add some extra empty char in the begging of the text to adjust the desired padding between the text and icon.  

However, if you want to adjust in a very precise manner the margin between image and text part, you can also consider creating a custom AppointmentElement and insert different inner elements (e.g. two LightVisualElements) for the image and text parts. Then, you can adjust the margin between the two separate elements: https://docs.telerik.com/devtools/winforms/controls/scheduler/appointments-and-dialogs/custom-appointment-element 

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Stephan]

Thanks for your help. The solution worksf fine.

[Stephan]

Hello support team,

the provided solution works fine, but now I have a small problem with small appointment. If the Image is to big to fit into the appointments area, it's overlapping. I tried to avoid this by only enable the image, if the width of the appointment is bigger than my icon.

private void rsTermine_AppointmentFormatting(object sender, SchedulerAppointmentEventArgs e)
        {
            e.AppointmentElement.ShowAppointmentDescription = true;
            e.AppointmentElement.TextAlignment = ContentAlignment.MiddleLeft;
            e.AppointmentElement.ForeColor = e.AppointmentElement.BackColor.IdealTextColor();
            e.AppointmentElement.Text = ((e.Appointment.Start.Date == e.Appointment.End.Date) || ((e.Appointment.Start.Date.AddDays(1) == e.Appointment.End.Date) && (e.Appointment.End == e.Appointment.End.Date)))
                ? $"{e.Appointment.Start:t} - {e.Appointment.End:t} <b>{e.Appointment.Summary}</b>"
                : $"{e.Appointment.Start:g} - {e.Appointment.End:g} <b>{e.Appointment.Summary}</b>";
            e.AppointmentElement.TextWrap = true;
            e.AppointmentElement.AutoEllipsis = true; ;

            if (e.Appointment.DataItem is IDispositionTermin termin)
            {
                var width = termin.CalendarSymbol?.Width;
                e.AppointmentElement.AppointmentIcon = (width.HasValue && e.AppointmentElement.Size.Width > width.Value)
                    ? termin.CalendarSymbol
                    : null;

                //e.AppointmentElement.AppointmentIcon = termin.CalendarSymbol;
                e.AppointmentElement.ToolTipText = termin.TooltipText;
            }
        }

But now my icon is not shown until I select a appointment, than all appointments get refreshed immediately. This happens because on first appointment formatting event the size is (0, 0). I use this code to refresh the scheduler, but this doesn't work for the appointments.

public void RefreshScheduler()
{
    rsTermine.Refresh();
    rsTermine.SchedulerElement.RefreshViewElement();

    //RefreshViewElement erzeugt eine neues Viewelement, daher müssen einige Properties ggf. neu gesetzt werden
    if (rsTermine.SchedulerElement.ViewElement is TimelineGroupingByResourcesElement timelineElement)
    {
        timelineElement.ResourceHeaderWidth = 150;
    }
}

How do I trigger a Refresh of the appointments?

 

Regards,

Stephan

[Dess | Tech Support Engineer, Principal]

Hello, Stephan, 

If you need to force refreshing the appointment elements and fire the AppointmentFormatting event, it is appropriate use the SchedulerElement.RefreshViewElement method.

Thus, you are expected to obtain the desired styling. 

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik