Multiple icons for the same appointment

Hello Rick,

If you want to customize the AppointmentElement in order to have several icons in the same appointment, you should create a new class which inherits from the AppointmentElement class and override some methods. You should use the SchedulerElementProvider class which allows you to replace the default AppointmentElement with the custom one. More information about SchedulerElementProvider and how to change the default RadScheduler elements is available here: https://docs.telerik.com/devtools/winforms/controls/scheduler/fundamentals/scheduler-element-provider- 

Please refer to the following code snippet which demonstrates how to achieve this:

 public partial class RadForm1 : Telerik.WinControls.UI.RadForm
 {
     public RadForm1()
     {
         InitializeComponent();

         this.radScheduler1.ElementProvider = new MyElementProvider(radScheduler1);
         this.radScheduler1.Appointments.Add(new Appointment(DateTime.Now, DateTime.Now.AddHours(1), "Release meeting"));
     }
     public class MyAppointmentElement : AppointmentElement
     {
         LightVisualElement icon1;
         LightVisualElement icon2;

         public MyAppointmentElement(RadScheduler scheduler, SchedulerView view, IEvent appointment) : base(scheduler, view, appointment)
         {

         }
         protected override Type ThemeEffectiveType
         {
             get
             {
                 return typeof(AppointmentElement);
             }
         }

         protected override void CreateChildElements()
         {
             base.CreateChildElements();

             this.icon1 = new LightVisualElement();
             this.icon2 = new LightVisualElement();

             this.icon1.ShouldHandleMouseInput = false;
             this.icon1.NotifyParentOnMouseInput = true;
             this.icon1.Alignment = ContentAlignment.BottomRight;
             this.icon1.StretchHorizontally = false;
             this.icon1.StretchVertically = false;

             this.icon2.ShouldHandleMouseInput = false;
             this.icon2.NotifyParentOnMouseInput = true;
             this.icon2.Alignment = ContentAlignment.TopRight;
             this.icon2.StretchHorizontally = false;
             this.icon2.StretchVertically = false;

             this.Children.Add(icon1);
             this.Children.Add(icon2);

         }

         public override void Synchronize()
         {
             base.Synchronize();
             Appointment appointment = this.Appointment as Appointment;
             if (appointment != null)
             {
                 icon1.Image = Image.FromFile(@"..\..\Folder1.png");
                 icon2.Image = Image.FromFile(@"..\..\JunkFolder.png");
             }
         }
     }

     public class MyElementProvider : SchedulerElementProvider
     {
         public MyElementProvider(RadScheduler scheduler)
             : base(scheduler)
         {
         }

         protected override T CreateElement<T>(SchedulerView view, object context)
         {
             if (typeof(T) == typeof(AppointmentElement))
             {
                 return new MyAppointmentElement(this.Scheduler, view, (IEvent)context) as T;
             }

             return base.CreateElement<T>(view, context);
         }
     }
 }

I hope this helps. Should you have any other questions do not hesitate to ask.

Regards,
Nadya
Progress Telerik

Hello Nadya,

Thanks for your reply, we checked with the code & the icon is displayed when an appointment is added. 

Need a option to display the icons using a button click event and while adding appointment. Video link mentioned below for your reference.

Video link

We need to add multiple icons on multiple scenarios in our project(Eg: Adding an appointment, currently selected appointment). Is it possible to add the icons on a picture list & add/remove those in appointment.icon.add. Is there any option or a way to add a icon using this? Old existing VB code screenshot mentioned below for your reference.

screenshot 1  and   screenshot 2

Hello Rick,

I created a sample project for your reference demonstrating how to display the icons on a click event. The result is illustrated in the gif file. Please refer to the files attached to this thread. Feel free to modify the project in a way that suits your custom requirements best.

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

Regards,
Nadya
Progress Telerik

Hi Nadya,

Thank you for your reply :), the option works but still we need it to be working based on our requirement

We need to have access for the form controls on MyAppointmentElement class event.

Eg : For the currently selected appointment, for a button click event need to add icon based on control (given text box value, date) values in the form.

Need to add icons for the appointment based on the below points.

1) While adding appointment, using some form control vales will need to add the icons for appointment.

2) While dragging the appointment, need to check the values & need to add the icons for appointment.

3) During right click of an appointment & selecting the context menu option, need to add the icons for appointment.

4) While changing a value in dropdown, need an option to change the icon for the selected appointment

Hello Rick,

I updated the sample project in a way to demonstrate how to store the data in the custom Appointment class and how to visualize it via the AppointmentElement class. The Synchronize method in the custom AppointmentElement class is the appropriate place to display the data in the custom elements which you would like to show depending on the selected menu item from the context menu. Could you please give this project a try and see how it works for you?

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify it in a way that suits your requirements best.

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

Regards,
Nadya
Progress Telerik

Hi Nadya,

Thank you for your reply, we have fixed the icons adding issue in our project but there is an issue with the icon & text alignment. To add the icons we have used WrapLayoutPanel instead of StackLayoutElement. When we try to resize the appointment, the icon should get wrapped along with the appointment size. Video link of existing & current application attached for your reference. Please check & do the needful.

Existing Link  & Current application Link

Hello Rick,

Thank you for the provided information and video. From the attached video I can see that you want to achieve a wrapped functionality that allows the content to be wrapped from one row to the next or from one column to the next when resizing the AppointmentElement. In this case, it is appropriate to use a FlowLayoutPanel control instead of a WrapLayoutPanel. FlowLayoutPanel is a control that arranges its contents in a horizontal or vertical flow direction and achieves exactly the functionality that you want. More information you can find here: https://docs.microsoft.com/en-us/dotnet/api/system.windows.forms.flowlayoutpanel?view=netframework-4.8#remarks. For the image icons, you can use RadLabel and set its Image and Text property. Note that FlowLayoutPanel is a control that should be hosted in the AppointmentElement. This is why it is needed to create a new instance of the RadHostItem class which represents an item that contains external control. Please keep in mind that this approach may affect the application performance and may cause visual glitches as the controls don't support clipping and they are more complex and heavier than the RadElements.

Another approach that I can suggest is to use a RadListViewElement to hold the icon/text items in the CreateChildElements method of the custom AppointmentElement class. By default, RadListView supports three ViewTypes – ListView, IconsView, and DetailsView. For your custom requirement and layout, it is appropriate to choose IconsView which will display the list items in icons. This approach is shown in the following code snippet and the result is demonstrated in the attached gif file:

 protected override void CreateChildElements()
 {
     base.CreateChildElements();

     panel = new RadListViewElement();
     panel.ViewType = ListViewType.IconsView;
     panel.ItemSize = new Size(50, 20);
     IconListViewElement iconsView = panel.ViewElement as IconListViewElement;
     iconsView.Orientation = Orientation.Horizontal;
     
     panel.BackColor = Color.Transparent;
     
     this.completeIcon = new LightVisualElement();
     completeIcon.StretchHorizontally = true;
     this.completeIcon.Image = Image.FromFile(@"..//..//green.png");
     this.completeIcon.TextWrap = true;

     this.onHoldIcon = new LightVisualElement();
     this.onHoldIcon.Image = Image.FromFile(@"..//..//RedFlag.png");
     this.onHoldIcon.TextWrap = true;

     for (int i = 0; i < 5; i++)
     {
         ListViewDataItem item = new ListViewDataItem();

         item.Image = Image.FromFile(@"..//..//green.png");
         item.Text = i.ToString();
         item.TextImageRelation = TextImageRelation.ImageBeforeText; 
         panel.Items.Add(item);
     }
     panel.NotifyParentOnMouseInput = true;
     panel.ShouldHandleMouseInput = false;
     panel.ViewElement.NotifyParentOnMouseInput = true;
     panel.ViewElement.ShouldHandleMouseInput = false;
     panel.SelectedIndex = -1;
     panel.CurrentItem = null;
     this.Children.Add(panel);
 }

 protected override void OnPropertyChanged(RadPropertyChangedEventArgs e)
 { 
     base.OnPropertyChanged(e);
     if (e.Property.Name=="Bounds")
     {
         panel.MaxSize = new Size(this.Size.Width, this.Size.Height);
     }
 }

Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your custom requirements best.

I hope this information helps. Let me know if I can assist you further.

Regards,
Nadya
Progress Telerik

Hi Nadya,

Thanks for your reply, we are able to wrap the icons but we need to add text after the icons separately. We assign the text as (appointment.summary). Sample code mentioned below for your reference.

appointment = New MyCustomAppointment(DateTime.now, DateTime.now.AddHours(3), Name, "Other")

appointment.Summary="Test1"

We reduced the panel size but still the text appears behind the appointment

screenshot

 
We need to wrap the icons & text separately, Icons should be wrapped first followed by the text to the right to it (We do not provide text for all the icons instead we add the icons & add the text for the selected appointment). Can you please check & do the needful?

Hello Rick,

Actually, the icons panel is drawn over the rectangle which renders the AppointmentElement. The panel overlaps it and when you reduce the panel size it is normal that the text from the AppointmentElement is shown behind. This is expected behavior considering the z-order of the elements.

If you want to hide the text I can suggest you adding a StackLayoutPanel with an additional LightVisualElement within it which will represent the text. Thus, the LightVisualElement will be placed next to the icons panel if they share the same parent container.

In addition, you should override the DrawEventText method as well in order to disable the default text painting in the AppointmentElement. You can refer to the code snippet updated and refer to the attached gif file:

StackLayoutPanel container = new StackLayoutPanel();
LightVisualElement summaryText = new LightVisualElement();
protected override void CreateChildElements()
{
    base.CreateChildElements();

    container.Orientation = Orientation.Horizontal;

    panel = new RadListViewElement();
    panel.StretchHorizontally = false;
    panel.MaxSize = new Size(100, 0);
    panel.ViewType = ListViewType.IconsView;
    panel.ItemSize = new Size(35, 20);
    IconListViewElement iconsView = panel.ViewElement as IconListViewEle
    iconsView.Orientation = Orientation.Horizontal;
    panel.BackColor = Color.Transparent;

    this.completeIcon = new LightVisualElement();
    completeIcon.StretchHorizontally = true;
    this.completeIcon.Image = Image.FromFile(@"..//..//green.png");
    this.completeIcon.TextWrap = true;

    this.onHoldIcon = new LightVisualElement();
    this.onHoldIcon.Image = Image.FromFile(@"..//..//RedFlag.png");
    this.onHoldIcon.TextWrap = true;

    for (int i = 0; i < 5; i++)
    {
        ListViewDataItem item = new ListViewDataItem();

        item.Image = Image.FromFile(@"..//..//green.png");
        item.Text = i.ToString();
        item.TextImageRelation = TextImageRelation.ImageBeforeText;
        panel.Items.Add(item);
    }
    panel.NotifyParentOnMouseInput = true;
    panel.ShouldHandleMouseInput = false;
    panel.ViewElement.NotifyParentOnMouseInput = true;
    panel.ViewElement.ShouldHandleMouseInput = false;
    panel.SelectedIndex = -1;
    panel.CurrentItem = null;
    this.Children.Add(container);
    container.Children.Add(panel);
    container.Children.Add(summaryText);
}

protected override void OnPropertyChanged(RadPropertyChangedEventArgs e)
{
    base.OnPropertyChanged(e);
    if (e.Property.Name == "Bounds")
    {
        panel.MaxSize = new Size(100, this.Size.Height);
    }
}
public override void DrawEventText(IGraphics graphics)
{
    //disable default text painting
    //base.DrawEventText(graphics);
}

public override void Synchronize()
{
    base.Synchronize();
    //Add text
    this.summaryText.Text = this.Appointment.Summary;
    //....
}

It seems that you have a very custom requirement. That is why have in mind that we would gladly give you some tips and guidance what approach you may follow. However, the custom implementation is up to you.Feel free to extend the code snippet and implement the custom requirement that you have.

I hope this information helps. 

Regards,
Nadya
Progress Telerik