Appointmentimages with alignment and padding

6 posts, 1 answers
  1. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 29 Apr 2020 Link to this post

    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

  2. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 29 Apr 2020 in reply to Stephan Link to this post

    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.
  3. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4131 posts

    Posted 30 Apr 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  4. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 30 Apr 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thanks for your help. The solution worksf fine.
  5. Stephan
    Stephan avatar
    12 posts
    Member since:
    May 2019

    Posted 06 May 2020 Link to this post

    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

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4131 posts

    Posted 08 May 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top