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
5 Answers, 1 is accepted
Rank 3
Bronze
Iron
Iron
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
Our thoughts here at Progress are with those affected by the outbreak.
Rank 3
Bronze
Iron
Iron
Rank 3
Bronze
Iron
Iron
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
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
Our thoughts here at Progress are with those affected by the outbreak.