Telerik Forums / UI for Silverlight Forum / ScheduleView /

Click on RowHeader

Telerik UI for Silverlight
Resources Buy Try

18 posts, 1 answers

Håkan

183 posts

Member since:
May 2011

Posted 14 Oct 2011 Link to this post

Hi,

Is there any way to detect a mouse click in a row header (or what it is called)?
I have two scenarios I would like to achive.

1. Click on a week in the month view to open up the timelineview with that week displayed.
Much like going to the dayview when clicking on a specific day.

2. Click on a resource group (which in my place is a person) and go to a page displaying information about that person.

I can handle all logic as long as I get an event from which I can figure out what week or resource that was clicked.

Regards,
Håkan
Konstantina
Admin

2332 posts

Posted 18 Oct 2011 Link to this post

Hi Håkan,

Straight to your questions:
1. You can find out when the week header is clicked through the VisibleRangeChanged. But to change the behaviour of this button, you need to edit the template of the ScheduleView. You can create a custom group header selector and when this header is clicked return the new template with the specific command.
2. The custom group header selector will resolve this issue also, but you have to make these headers clickable, by putting RadButtons. You can use the HorizontalTemplate.
You can find an example how to implement the custom headers in this online demo.

Hope this information helps.

Best wishes,
Konstantina
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Håkan

183 posts

Member since:
May 2011

Posted 18 Oct 2011 Link to this post

Hi Konstantina!

About number 1.
I use a CalendarViewDefinition with a custom GroupHeaderContentTemplateSelector.
I do this to be able to set a week number in the header.
It looks like this:

<local:CustomOrientedGroupHeaderContentTemplateSelector.VerticalMonthViewDateTemplate>

    <DataTemplate>

        <telerik:LayoutTransformControl>

            <telerik:LayoutTransformControl.LayoutTransform>

                <RotateTransform Angle="-90" />

            </telerik:LayoutTransformControl.LayoutTransform>

            <TextBlock Text="{Binding Name, Converter={StaticResource DateTimeToWeekNumberConverter}, ConverterParameter='includeLabel'}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" TextAlignment="Center" Padding="3" />

        </telerik:LayoutTransformControl>

    </DataTemplate>

</local:CustomOrientedGroupHeaderContentTemplateSelector.VerticalMonthViewDateTemplate>

But if I include a button in the DataTemplate it is always disabled, why?

And about the VisibleRangeChanged event you described, it is not called when I click the groupheader at all.

The same problem occurs for my number 2 question.

Regards,
Håkan

Håkan

183 posts

Member since:
May 2011

Posted 18 Oct 2011 Link to this post

Sorry, have to make it clear, the CalendarViewDefinition I mentioned is just an extended MonthViewDefinition looking like this:

public class CalendarViewDefinition : MonthViewDefinition { protected override DateTime GetVisibleRangeStart(DateTime currentDate, CultureInfo culture, DayOfWeek? firstDayOfWeek) { return CalendarHelper.GetFirstDayOfWeek(currentDate, firstDayOfWeek.Value); } }

Regards,
Håkan

Konstantina
Admin

2332 posts

Posted 20 Oct 2011 Link to this post

Hi Håkan,

This is really strange issue. Could you please send us your project, so that we can review it. In that way we will be able to provide you with solution in a timely manner.

Looking forward to your reply.

Best wishes,
Konstantina
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Håkan

183 posts

Member since:
May 2011

Posted 24 Oct 2011 Link to this post

Hi Konstantina,

It's not so easy to send you our project since it's part of a large system.
It's dependant of a number of WCF services, styles and other stuff, so it wont event compile.

Are there any specific files I can send you or better, do you have the possibility to create a simple test project with a button as you decribed? Then maybe I can figure it out on our side what 's wrong.

Regards,
Håkan
Konstantina
Admin

2332 posts
Posted 26 Oct 2011 Link to this post

Hello Håkan,

Where exactly do you wish to add the button? Please, share a code snippet. If you are adding a button, which is supposed to take the user to the WeekView definition, when clicked, then the button will be disabled if you do not have a WeekViewDefinition in your ViewDefinition collection.

We tested the case with adding a button as part of the regular group header content, and could not reproduce any issue.

Since I understand you wish to place the weeknumber in the group header, attached is a solution to this requirement that does not contain a custom view definition. I think using a custom view definition is not needed in your case. I believe the horizontal template your custom GroupHeaderContentTemplateSelector uses is also redundant.

Please, examine the attached project, and let me know if it fits your scenario and requirements.

Regards,
Konstantina
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

ScheduleView-GroupHeader-WeekNumber-SL.zip
Håkan

183 posts

Member since:
May 2011
Posted 27 Oct 2011 Link to this post

Hi Konstantina,
See my attached images for my three views.

In the MonthView I want to be able to click the RowHeader to the left, where the week number is displayed.
Then I want it to show the weekview. But the weekview is in fact a TimelineView displaying 7 days as default.
The number of visible days can be changed though.

The TimelineView also has resources to the left (employees).
I want to be able to click on a name and move to another silverlight page displaying that employee. I can take care of all that as long as I get some kind of event fired that can tell me the name of the resource or something useful.

I tried to add a button to the templates, but they were never enabled.

The only reason I have a custom view definition for the MonthView is because I override the GetVisibleRangeStart method to be able to set first day of current week as first day in calendar.

Regards,
Håkan

DayView.JPG

MonthView.JPG

WeekView.JPG
Dani
Admin

848 posts
Posted 28 Oct 2011 Link to this post

Hello Håkan,

As far as I can understand you have three view definitions - DayView, WeekView and a custom view definiton based on MonthView. Please, correct me if I am wrong, but when you say that you wish to have a functional button in TimelineView, my supposition is that you are referring to including a button in WeekView. Still, I am a little bit confused since the original inquiry referred to MonthView. Can you please, advice of where you wish to place a functional button?

We checked the screenshots of your view definitions display. Assuming, you wish to have a button in WeekView groupheaders that will execute some action depending on which resource has been clicked, the task is easy to accomplish. Once you have got the button in the group header template, you can create a custom command for it and pass the current resource as a command parameter rather than trying to use an event for any functionality you wish to implement later. You can check the implementation of this scenario in the attached project.

In MonthView when you click on a week header, by default you will be taken to WeekView, just the same as you will be taken to dayView once you click on a day header in WeekView. If you have this misfunctioning, then this is most likely due to customizations that have been applied. Please share your selector code as well as the xaml resources it uses.

We wish to assist you and help you identify the disabled button problem, but we have not been able to reproduce it so far. Looking forward to your feedback on this topic.

Greetings,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

ScheduleView-GroupHeader-WeekNumber-SL.zip
Håkan

183 posts

Member since:
May 2011

Posted 01 Nov 2011 Link to this post

Hi,

The problem is that I don't use the WeekViewDefinition. I use the TimelineViewDefinition instead.
My TimelineView displays 7 days as default but can be changed to display any number of days by the user.

So that's why I don't get the default functionality in the MonthView.
So either I want some click event or is there any way I can configure the WeekViewDefinition to work as in my attached image.
Having resources on the left side and days (whole days, no time) at the top grouped in weeks.

I tried you attached example and it works as expected, but when I implement the exact same functionality in my solution, the buttons are still disabled, strange!!
I even put a breakpoint in the CanExecute method of the command, and it gets hit and returns true.

I have made quite a few modifications in different templates and styles, is there anywhere I might have destroyed something?
- Regards,
Håkan
Dani
Admin

848 posts
Posted 04 Nov 2011 Link to this post

Hello Håkan,

You can configure the TimelineView to display as per your requirements by setting a few properties of the TimelineViewDefintion. Please, consider the following example:

<telerik:TimelineViewDefinition

               TimerulerMajorTickStringFormat=""

               GroupTickLength="1m"

               MajorTickLength="1week"

               MinorTickLength="1week" VisibleDays="60"/>

Additionally, you can use the TimerulerMajorTickStringFormat property to determine the date format you will use for the weeks.

When I applied this to the sample I previously sent, the resulting view was displayed as in the attached screenshot. Again, there is no problem adding a fully functional button in the group header. I kindly ask you to share any styling markup that you use on the RadScheduleView control - any selector you may be using or custom styles you may have applied.

All the best,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

TimelineView-Customization.PNG
Håkan

183 posts

Member since:
May 2011

Posted 11 Nov 2011 Link to this post

Hi,

The problem is not to configure the TimelineView to show what I want, I already got it.
The problem is that I want to click on a Week in the MonthView and get to the TimelineView.
As default, you go to the WeekView.

About the retemplating, is there any special parts you like to see?
I have copied the whole default xaml file for the ScheduleView control and modified it,
and it is over 3000 rows!

Regards,
Håkan
Dani
Admin

848 posts

Posted 15 Nov 2011 Link to this post

Hello Håkan,

If you want a button in the group header template to take you to the TimelineView, you will not need a custom command. You can use the already available commond SetTimelineViewMode.

The button will be disabled only if the CanExecute method of the command returns value False, that is - if you do not have a TimelineViewDefinition.

Please, try the following (I tested it again on the sample project and it is working fine):

<telerik:RadButton Content="{Binding FormattedName}" Command="scheduleView:RadScheduleViewCommands.SetTimelineViewMode"/>

If you still have difficulties getting this working, please send us either a sample project reproducing the issue or all your reasources applied to the RadScheduleView control, regardless of the large amount of xaml mark-up.

Best wishes,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Håkan

183 posts

Member since:
May 2011

Posted 16 Nov 2011 Link to this post

Hello Dani!

A lot of struggling but now I think I know what's wrong.

First of all, my RadButton in the resource group heder didn't work because there was a change in the GroupHeader template between the Q2 release and the SP1. I had used the Q2 release version of the ScheduleView.xaml file when doing my retemplating.
When I installed the SP1 version, I didn't look for any changes in the themes xaml file.
Now I have compared them and modified mine to work with the SP1.
So now that works for me!

My second problem, about the week group header in the MonthView was also disabled.
That was not solved by the step above. Since it worked in your example project I started to copy parts from my project into the example project and suddenly the group header was disabled.
Then I noticed the difference, I have no WeekViewDefinition, Only Month, Day and Timeline.
And it seems that you need a WeekViewDifinition to get the button active, even if I make a custom Command.
If I add a weekview, the button will be enabled.

Could you verify that on your side?

Regards,
Håkan
Dani
Admin

848 posts

Posted 17 Nov 2011 Link to this post

Hi Håkan,

Yes, template changes are sometimes made from one Q release to another. Since this can cause discrepancies we usually ask from our customers to share any customizations they have made upon the xaml mark-up.

The available view definitions determine which commands can be used. Meaning, if you have inherited MonthView, but have not changed the command of the week group header, it will still expect to move the view to WeekView. And since you do not have WeekView in your ViewDefinitions collection, the button will be disabled.

On the contrary, if you have set the command of your custom button to the SetTimelineViewCommand, having only DayView, MonthView and Timeline will work just fine for your custom button.

So basically, having no WeekView will not prevent any visual elements from being enabled, unless you are using a command that sets WeekView.

All the best,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Håkan

183 posts

Member since:
May 2011

Posted 22 Nov 2011 Link to this post

Hi Dani,

I understand what you say, but it doesn't work for me.
I just tried it again in your attached sample application a few posts ago (ScheduleView_GroupHeader_WeekNumber_SL).

I downloaded it again to make sure I had exactly that version.
Changed the view definitions to this:

<telerik:RadScheduleView.ViewDefinitions>

    <telerik:MonthViewDefinition/>

    <telerik:DayViewDefinition />

    <telerik:TimelineViewDefinition VisibleDays="7" />

</telerik:RadScheduleView.ViewDefinitions>

And also changed the group header template to this:

<local:OrientedGroupHeaderContentTemplateSelector.DateGroupHeaderDataTemplate>

    <DataTemplate>

        <telerikPrimitives:LayoutTransformControl VerticalAlignment="Stretch">

            <telerikPrimitives:LayoutTransformControl.LayoutTransform>

                <RotateTransform Angle="-90" />

            </telerikPrimitives:LayoutTransformControl.LayoutTransform>

            <Grid>

                <telerik:RadButton Command="{Binding SetTimelineViewCommand, Source={StaticResource ViewModel}}" CommandParameter="{Binding Name}">

                    <telerik:RadButton.Content>

                        <TextBlock Text="{Binding WeekNumber}" />

                    </telerik:RadButton.Content>

                </telerik:RadButton>

            </Grid>

        </telerikPrimitives:LayoutTransformControl>

    </DataTemplate>

</local:OrientedGroupHeaderContentTemplateSelector.DateGroupHeaderDataTemplate>

That will cause the button to be disabled.

As soon as I add a WeekViewDefinition, the button will light up, but it still does not navigate to the TimelineView, nothing happens.

So I still have two problems:
1. Button disabled
2. Even if button is enabled, it wouldn't go to TimelineView. Maybe I can get around this with a custom command if get the button enabled.

Could you please verify the same scenario with the same example application?
I'm running the Q2 SP1 version, if that would make a difference?

Regards,
Håkan
Answer
Dani
Admin

848 posts

Posted 22 Nov 2011 Link to this post

Hi Håkan,

We managed to reproduce the problem.

There are two issues that prevent the button from being enabled. Firstly, you should set the Command as showed in one of my previous posts, simply:

<telerik:RadButton Command="scheduleView:RadScheduleViewCommands.SetTimelineViewMode">

...

</telerik:RadButton>

With no CommandParameter and Source for the Command.

Secondly, the week group header in Month view by default points to the week view - again via a Command in the ControlTemplate of the group header. The button is disabled because a default command  has already been set to the button and WeekView is not available. Only afterwards does the ContentTemplateSelector place its custom button inside the group header. The selector, however, places simply content into the already existing group header, so it can not enable it in any way.

What you can do is either include WeekViewDefintion (and have the SetTimelineViewMode Command to actually take you from MonthView to TimelineView) in your ViewDefinitionCollection or take the following course of action:

-Implement the GroupHeaderStyleSelector, because it contains the MonthViewBottomLevelWeekGroupStyle, which is responsible for the button in question.

- Customize the MonthViewBottomLevelWeekGroupStyle by providing it with a GroupHeaderButton that uses the SetTimelineViewMode Command, rather than using Command="{TemplateBinding Command}" as by default.

An example of what I mean is:

<ControlTemplate x:Key="GroupHeaderTemplate2" TargetType="telerik:GroupHeader">

            <Grid>



                <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="OrientationStates">

                        <VisualState x:Name="Horizontal">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="VerticalAlignment">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch" />

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="HorizontalAlignment">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Left" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="Vertical" />

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="DayStates">

                        <VisualState x:Name="NormalDay" />

                        <VisualState x:Name="Today">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GroupHeaderBorderBrush_Today}" />

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource HorizontalGroupHeaderTodayBorderThickness}" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="TodayHorizontal">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="VerticalAlignment">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Stretch" />

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="HorizontalAlignment">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Left" />

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderBrush">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GroupHeaderBorderBrush_Today}" />

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="BorderThickness">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource VerticalGroupHeaderTodayBorderThickness}" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>





                <Border x:Name="Border" IsHitTestVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" BorderBrush="{TemplateBinding BorderBrush}"

                 BorderThickness="1"

                 Background="{TemplateBinding Background}">

                </Border>



                <telerik:GroupHeaderButton

                    x:Name="Header"

                    VerticalAlignment="Top"

                    Content="{TemplateBinding Content}"

                    ContentTemplate="{TemplateBinding ContentTemplate}"



                    Command="scheduleView:RadScheduleViewCommands.SetTimelineViewMode"



                    IsToday="{TemplateBinding IsToday}"

                    Orientation="{TemplateBinding Orientation}"

                    telerik:StyleManager.Theme="{StaticResource Theme}"

                    Foreground="{TemplateBinding Foreground}"

                     />

            </Grid>



        </ControlTemplate>



        <Style x:Key="MonthViewBottomLevelWeekGroupStyle" TargetType="telerik:GroupHeader">

            <Setter Property="Margin" Value="0 0 0 -1" />

            <Setter Property="Padding" Value="0 21 0 18" />

            <Setter Property="MinHeight" Value="85" />



            <Setter Property="Foreground" Value="{StaticResource TimeRulerGroupItemForeground}" />

            <Setter Property="BorderBrush" Value="{StaticResource GroupHeaderBorderBrush}" />

            <Setter Property="Background" Value="{x:Null}" />

            <Setter Property="BorderThickness" Value="1" />





            <Setter Property="Canvas.ZIndex" Value="-2" />



            <Setter Property="Template" Value="{StaticResource GroupHeaderTemplate2}" />



        </Style>

Please, note that the MonthViewBottomLevelWeekGroupStyle is no longer based on GroupHeaderBaseStyle and that the GroupHeaderButton has the proper Command.

I hope this information will help in solving the issue.

All the best,
Dani
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Håkan

183 posts

Member since:
May 2011

Posted 24 Nov 2011 Link to this post

Thanks Dani!

That did the trick.

This issue has been bugging me for a long time now, but now we can finally close it.
Thanks for your patience Dani.

Regards,
Håkan

Click on RowHeader

Konstantina

Konstantina

Konstantina

Dani

Dani

Dani

Dani

Dani