Summary line below calendar

[Håkan]

Hi,

We are using the ScheduleView as a resource planning tool.
We use the TimelineViewDefinition with days on the x-axis and resources on the y-axis.
Now we also need to display a summary below the calendar.
The summary is supposed to show information like how many hours that are planned for each day.

The problem is if I create my own area below the ScheduleView control as for instance a Grid or a StackPanel it won't scroll with the ScheduleView of cource.
We display up to 31 days in the timeline view, then there will be a horizontal scrollbar.

Is there anyway I can retemplate the control to have a placeholder for this at the bottom.

One solution I came up with was to create a "Summary resource" to be displayed after all other resources, but then you need to scroll down to the bottom to see the summary, I would like it to be a frozen row at the bottom, like the AllDayArea in DayView, but at the bottom instead of the top.

Regards,
Håkan

[Valeri Hristov]

Hello Håkan,

RadScheduleView has the following properties that might be of help - Horizontal/VerticalOffset, ViewPortWidth/Height, ExtentWidth/Height, Horizontal/VerticalScrollBarVisibility, etc. Using those properties you could sync the scroll positions of the control with a ScrollViewer or another RadScheduleView, which could contain the summary information.

Regards,
Valeri Hristov
the Telerik team

[Håkan]

Hi,

Is there anyway I can check the width of a column in the TimelineView?

I have created a summary line below the ScheduleView.
It's accomplished by creating a Grid with the same number of columns as VisibleDays in the active ViewDefinition.
When number of visible days change (user can change this to any number) the summary is recreated.
But I need to set the column widths in my grid to the same as the column widths in the Timelineview to make them align.

I tried to calculate it, but always seem to get some pixels wrong.
See attahced images.

Also tried to set a MinWidth in the TimeRulerItemTemplate used by the TimelineView without any luck.
I could set colors and other stuff, so I know I am editing the correct template.

Regards,
Håkan

[Valeri Hristov]

Hello Håkan,

Please, find attached a simple application that demonstrates how to implement your request. You only need to take care of adding the correct ColumnDefinitions and content in the Grid panel that is below RadScheduleView.

Due to some limitations of Silverlight there are quite a few things that have to be wired in order to correctly synchronize a ScrollViewer and RadScheduleView. Here are some details:
1) Since Silverlight deletes the OneWay binding when the DependencyProperty is set,  HorizontalOffset has to be bound TwoWay. Unfortunately the Silverlight ScrollViewer does not allow TwoWay bindings on its HorizontalOffset property, hence I workarounded this limitation with an attached property.
2) The Grid panel that is inside the ScrollViewer has to have the same width as the ScheduleView content. The ScheduleView content width is the sum of the ExtentWidth and ViewportWidth properties. Since Silverlight does not have multi bindings and you cannot combine the values of two or more properties in one in XAML, I workarounded this limitation by creatint several attached properties - ExtentWidth and ViewportWidth are input, ContentWidth is their sum.
There is an additional property MaxTimeRulerExtent that sets the maximum value of the ContentWidth property. This is needed in case the view port becomes larger than the ViewDefinition.MaxTimeRulerExtent property. In this case the ScheduleView content stops stretching and the Grid panel should stop too. In addition, in this case the Grid panel should be left aligned.
3) The Grid panel that is inside the ScrollViewer has to be offset on the left with the width of the group headers of RadScheduleView (in case you have any group descriptions). This is done by binding the Margin property through a IValueConverter to RadScheduleView.HeadersLength.
4) The Silverlight ScrollViewer content in the default theme has small margin (10px). This offsets the GridPanel and leads to some undesired effects. To workaround this problem I set a Telerik theme on the ScrollViewer.

I hope this helps.

All the best,
Valeri Hristov
the Telerik team

[Håkan]

Hello Valeri!

You sure have put a alot of work into this issue, thank you very much!!
I still have some problems though...

When I implemented your example into my project, It seemed that the width was too large, som my columns were a bit too wide.
Maybe I have some styling that will cause that?
I tried to just decrease the width in the ScrollHelper.UpdateContentWidth() method.
Finally with some trial and error the code looks like this instead:

SetContentWidth(d, Math.Max(0, Math.Min(GetMaxTimeRulerExtent(d), GetExtentWidth(d) + GetViewportWidth(d))) - 68);

I managed to get it to look like the attached image 'without scroll'. As you can se, almost, but not quite perfect.

And when I changed visible days to 14 or 31 or even more, it was always some pixels off in some direction, either too narrow or too wide.

But the real problem came when I made my browser window smaller so it had to paint the horizontal scrollbar, then it went even more off, as you can see in image 'with scrollbar'.
And when I scrolled it, the ScheduleView did not scroll with it, as in your example, what am I missing?

So I guess just reducing the width as I did was not the answer.

Regards,
Håkan

[Valeri Hristov]

Hi Håkan,

I think you are on the right track. I added grouping to my sample and I was able to reproduce your problem. I think that I was able to fix it - I added a new attached property to ScrollHelper - HeadersLength and fixed the UpdateContentWidth method (the new property is bound to the ScheduleView). In addition, I moved the following binding from the Grid panel to the ScrollViewer:
Margin="{Binding HeadersLength, ElementName=ScheduleView, Converter={StaticResource DoubleToLeftMarginConverter}}"

Please, let me know if it still does not work.

Greetings,
Valeri Hristov
the Telerik team

[Håkan]

Hi Valerie!

Much better!
Seems to work almost perfectly now.
It only differs on a pixel some times, but I guess I can live with that.
It's probably some pixel rounding or something. The columns probably does not have the exact same width?

Gets more obvious when displaying a large number of columns with a scrollbar (se attached image)
But you can't even read the summary values within the columns anyway...
When displaying a couple of weeks, its OK. And our customers will normaly only display one or two weeks in this view.

Regards,
Håkan

[Valeri Hristov]

Hi Håkan,

I managed to reproduce the new problem. It seems that it is caused by the Grid panel - when you set UseLayoutRounding=false the columns render with the correct sizes. I suppose this will lead to other not desired effects, such as blurred lines or text inside the Grid columns, so you should check to see which setting works best for you.

Regards,
Valeri Hristov
the Telerik team

[Andrew]

Valeri, thank you so much for posting this solution! I'm doing something similar (putting a RadChart underneath the RadScheduleView), and this saved me lots of time!

Andrew

[Håkan]

Hi Valerie!

I still have one problem with this issue.
If I shrink my browser and refresh the page I will get the horizontal scrollbar, fine!
I scroll to the right, both the calenadar (in TimelineView) and my summary below follows.
Then I scroll back to the left, only the summary scrolls, the calendar stays.

See attached images.

Regards,
Håkan

[Valeri Hristov]

Hi Hakan,

If the timeline stops scrolling then the bindings to the scrollviewer are broken. I wasn't able to reproduce the problem whith the last application that I sent, probably there is something in yours that is not right?

All the best,
Valeri Hristov
the Telerik team

[Andrew]

I think I had that happen to me sometimes, if the width of the schedule didn't exactly match the width of the summary area.

[Håkan]

That could be the case for me too.
I sometimes get a scrollbar even thought the whole schedule fits.
And I can only scroll a pixel or two.

Why does that happen? My summary grid has this with binding:

Width="{Binding (local:ScrollHelper.ContentWidth), ElementName=ScheduleView}"

Regards,
Håkan

[Andrew]

It looks like there's a 1-pixel gray line on the far right of your summary area. Maybe there's an extra Border somewhere that you need to remove? Or, could it have something to do with UseLayoutRounding, as mentioned previously in this thread? I didn't mess with that, myself.

If it were my project, I'd open it with Silverlight Spy to take a closer look. http://firstfloorsoftware.com/silverlightspy/download-silverlight-spy/

[Håkan]

Correct!

I had a 1-pixel right margin on my summary grid.
Removing it solved my problems!

Thanks Andrew.

Regards,
Håkan