Resizing elements

[Lasse]

Hi,

I'm struggling with your Visual Style Builder. I'm trying to reduce the size of the Scheduler Navigator
Both the buttons and the panel where the dates are viewed. But when i look at this in the VSB, i cannot figure out where the control size is set. Neither where the element sizes is set ( i do look at the elements min and max size, padding and margin.. ) 

And how do i change the look of an Appointment in the scheduler - monthly view?

Could someone please guide me. I need to do this on the Pages control as well. I use the default theme as the base theme...

Regards
Svein Thomas

[Ivan Todorov]

Hi Svein Thomas,

Thank you for writing.

The Visual Style Builder cannot set properties of the Controls. It is used to manipulate the elements that compound a control. Furthermore, the RadSchedulerNavigator is an AutoSize control e.g. its size is defined by the size of its elements.

To reduce its size you need to remove several Margins/Paddings. You might also need to remove the BackgroundShape of one of its elements, because it does not look good when the size of the other elements is changed. I have recorded a short video which demonstrates how to achieve this and I am attaching it to my response.

As to styling the AppointmentElements, they are not exposed to Visual Style Builder, because most of their properties are set depending on the properties of the actual appointment they represent (BackgroundInfo, Status etc.). In order to customize them, you can subscribe to RadScheduler's AppointmentFormatting event.

I am not sure if I understand your last requirement, but I suppose you need to reduce the size of the tabs in RadPageView. This is also demonstrated in the attached video.

I hope this is useful. Should you have further questions, do not hesitate to ask.

Greetings,
Ivan Todorov
the Telerik team

[Anouar]

Hello,

I use Telerik RadControls for WinForms 2012.3.10.16.0 and I have the same problem with the AppointmentElement Radscheduler in Timeline view : impossible to increase the height of appointments enough to use a legible font on a large wall image.

I tried to work with BackgroundInfo and Status property of the AppointmentElement but I can't change the AppointmentElement size.

I tried since two weeks a lot of solutions from internet and on telerik forum but none works for me.

I read that for appointments in timeline view it was not possible to increase height in this version of telerik.
Yet I found an example on the internet (http://www.codeproject.com/Articles/126159/Scrollbar-for-appointments-in-Telerik-s-RadSchedul).
So I tried to create a new theme but I can't found the AppointementElement in VSB.
I tried through the event AppointmentFormatting

private void radScheduler1_AppointmentFormatting (object sender, SchedulerAppointmentEventArgs e)
         {
             e.AppointmentElement.Size = new Size (60, 60);
         }

no change (even for MonthView or DayView). So what is this event?

Best Regards,

Anouar.

[Ivan Petrov]

Hi Anouar,

Thank you for writing.

You can modify the height of the appointments in timeline view by setting the AppointmentHeight property of the scheduler timeline view element. Here is how:

SchedulerTimelineViewElement view = this.radScheduler1.SchedulerElement.ViewElement as SchedulerTimelineViewElement;
view.AppointmentHeight = 100;

For the Font property you can use the AppointmentFormatting event:

Font f = new System.Drawing.Font("Arial", 20);
private void radScheduler1_AppointmentFormatting(object sender, SchedulerAppointmentEventArgs e)
{
    e.AppointmentElement.Font = f;
}

I hope this helps. Feel free to write back with further questions.

Kind regards,
Ivan Petrov
the Telerik team

[Anouar]

Hi Ivan,

Thank a lot for your answers. Actually, the code that you gave me almost works for me. When I put this two instructions in my init function :

public void InitTimline()
 {
     radScheduler1.GetTimelineView().ShowTimescale(Timescales.HalfHour);
     SchedulerTimescale timescale = this.radScheduler1.GetTimelineView().GetScaling();
     timescale.DisplayedCellsCount = 16;

     this.radScheduler1.GetTimelineView().AllowAppointmentMove = false;
     this.radScheduler1.GetTimelineView().AllowAppointmentResize = false;

     //On augmente la taille des appointments
     SchedulerTimelineViewElement view = this.radScheduler1.SchedulerElement.ViewElement as SchedulerTimelineViewElement;
     view.AppointmentHeight = 100;

     #region Definition des backgrounds
     this.radScheduler1.Backgrounds.BeginItemUpdate();

     #region ACCES
     AppointmentBackgroundInfo appbgrinfacc = new AppointmentBackgroundInfo(22, "Accès", Color.DarkSlateBlue,
                                                                         Color.Indigo, Color.White, Color.White);

     //Bordures
     appbgrinfacc.BorderBoxStyle = BorderBoxStyle.FourBorders;
     appbgrinfacc.SelectedBorderColor = Color.Transparent;

     //DateTime
     appbgrinfacc.DateTimeColor = Color.Red;
     appbgrinfacc.DateTimeFont = new System.Drawing.Font("Microsoft Sans Serif", 8.25F, (System.Drawing.FontStyle.Regular), System.Drawing.GraphicsUnit.Point, ((byte)(0)));

     //Ombre
     appbgrinfacc.ShadowStyle = ShadowStyles.BlurShadow;
     appbgrinfacc.ShadowColor = Color.DarkSlateBlue;
     appbgrinfacc.ShadowWidth = 4;

     this.radScheduler1.Backgrounds.Add(appbgrinfacc);
     #endregion

     this.radScheduler1.Backgrounds.EndUpdate();
     #endregion

     #region Definition des status de GCR possibles
     this.radScheduler1.Statuses.BeginUpdate();
     this.radScheduler1.Statuses.Clear();
     this.radScheduler1.Statuses.Add(new AppointmentStatusInfo(4, "Non commencé", Color.Gray, Color.Gray, AppointmentStatusFillType.Solid));
     this.radScheduler1.Statuses.Add(new AppointmentStatusInfo(5, "En cours", Color.Red, Color.Red, AppointmentStatusFillType.Solid));
     this.radScheduler1.Statuses.Add(new AppointmentStatusInfo(6, "Terminé", Color.Orange, Color.Orange, AppointmentStatusFillType.Solid));
     this.radScheduler1.Statuses.Add(new AppointmentStatusInfo(7, "Validé", Color.LawnGreen, Color.LawnGreen, AppointmentStatusFillType.Solid));
     this.radScheduler1.Statuses.EndUpdate();
     #endregion

     #region Definition des differents groupe domaines
     Resource resource = new Resource(Guid.NewGuid(), "Transport");

     this.radScheduler1.Resources.BeginUpdate();
     this.radScheduler1.Resources.Clear();

     resource.Color = Color.IndianRed;
     this.radScheduler1.Resources.Add(resource);

     resource = new Resource(Guid.NewGuid(), "Accès");
     resource.Color = Color.MediumPurple;
     this.radScheduler1.Resources.Add(resource);

     resource = new Resource(Guid.NewGuid(), "Coeur");
     resource.Color = Color.LightGreen;
     this.radScheduler1.Resources.Add(resource);

     resource = new Resource(Guid.NewGuid(), "PFS");
     resource.Color = Color.LightSkyBlue;
     this.radScheduler1.Resources.Add(resource);

     resource = new Resource(Guid.NewGuid(), "BSS");
     resource.Color = Color.Orange;
     this.radScheduler1.Resources.Add(resource);
     this.radScheduler1.Resources.EndUpdate();
     #endregion

     radScheduler1.FocusedDate = DateTime.Now;
 }

all the appointments takes the specified height BUT, when I clik the "Previous/Next Appointment" button, a NullReferenceException is throw on the main() function and the application crash (cf. NullReferenceException.png).

When I delete this instruction

view.AppointmentHeight = 100;

there is no more error.

I think i'm doing something wrong...
The function below load the Appointments in my Radscheduler.

public void LoadTimeline()
{
    radScheduler1.Appointments.BeginUpdate();
    foreach (Gcr g in mng.LstACCES)
    {
        g.BackgroundId = 22;
        radScheduler1.Appointments.Add(g);
        g.ResourceIds.Add(this.radScheduler1.Resources[1].Id);
    }
    radScheduler1.Appointments.EndUpdate();
}

For the font I've no problem, but I just want to know how I can specify a different font for the datetime and for the Location, Description, Subject ...

In advance thanks for your response.

Regards

Anouar

[Anouar]

Hi again support,

I've just try to test your proposition on a completly new project with only one Radscheduler on a WinForm and the same problem appears...
On this new project I didn't use any thead or something that could interfere with this two instructions :

SchedulerTimelineViewElement view = this.radScheduler1.SchedulerElement.ViewElement as SchedulerTimelineViewElement;

view.AppointmentHeight = 100;

In advance thanks for your help.

Regards,

Anouar

[Ivan Petrov]

Hi Anouar,

Thank you for writing back.

I was able to reproduce the issue and have logged it on our Public Issue Tracking System - PITS. You can track its progress, subscribe for status changes and add your vote comment to it on the following link - PITS Issue. Unfortunately, I am not able to provide you with a workaround due to the nature of the issue.

I have also updated your Telerik points for bringing this issue to our attention.

If you have further questions, I would be glad to help.

Greetings,
Ivan Petrov
the Telerik team

[Anouar]

Hi Ivan,

Thanks for your response. I reduced the range of my radscheduler for more legibility and I hide the Next/Previous button.
Thanks again for your follow.

Can you juste tell me how can I individually change the font of the date and the font of the description for all appointment ?

Regards,

Anouar

[Ivan Petrov]

Hello Anouar,

Thank you for your reply.

The text inside the appointment element is drawn using our HTML-like text formatting. The hours displayed are internally formatted and you can only change their font size through the Font property of the appointment element. The rest of the text you can format through the TitleFormat property. You can set both properties in the AppointmentFormatting event:

private void radScheduler1_AppointmentFormatting(object sender, SchedulerAppointmentEventArgs e)
{
    AppointmentTitleFormatter formatter = (new AppointmentTitleFormatterFactory()).Create(e.AppointmentElement.View.ViewType);
    string format = formatter.GetTitleFormat(e.AppointmentElement, e.AppointmentElement.View, this.radScheduler1);
    e.AppointmentElement.TitleFormat = "<span style=\"font-size:16\">" + format + "</span>";
    e.AppointmentElement.Font = new System.Drawing.Font(e.AppointmentElement.Font.FontFamily, 20);
}

I hope this will be useful. Should you have further questions, I would be glad to help.

All the best,
Ivan Petrov
the Telerik team