GroupHeader IsSelected & Click Event`

[Kieron]

Hi,

I want the ability for the user to be able to click on a Group Header (in DayView) and for the Group Header and Row to be Selected - however a few issues I cant seem to solve :

I'm overriding the GroupHeaderBaseStyle but can't seem to bind the Command on the GroupHeaderButton to my ViewModel - how do I go about achieving this so I can catch when the user has clicked on each GroupHeader?

There doesn't seem to be an IsSelected property for the GroupHeader - so how would I go about storing this information as per the user clicking on each header?

Thanks.

[Yana]

Hi Kieron,

As far as I understand, you need to customize the GroupHeaders for the resources - in this case you could create a custom Resource and add IsSelected property to it as demonstrated here.

Additionally, if you define the ViewModel as a StaticResource inside the Window Resources, you can bind a Command to it by referencing it with Source={StaticResource ViewModel}.

I hope this will help get started. We will need more details/some sample code on the exact scenario in order to provide further assistance.

Regards,
Yana
Telerik

[Kieron]

Thank Yana, that got me going in the right direction...

So I have a very simple Resource class called Vehicle which I have put my IsSelected property on :

public class Vehicle : Resource
{
  public string StockName { get; set; }
  public string StockNo { get; set; }
  public Brush Brush { get; set; }
  public bool IsSelected { get; set; }
}

This property gets updated on each click on a GroupHeader - you can see in the following xaml that my command on the GroupHeaderButton is bound to a VehicleSelectedCommand which does this.   So I put a DataTrigger on my GroupHeader Control Template hoping that I would be able to update the border colour of the GroupHeader this way - but I can't seem to notify the ScheduleView of the change of property value and therefore the border colour doesn't change.

<Style x:Key="GroupHeaderBaseStyle" TargetType="telerik:GroupHeader">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type telerik:GroupHeader}">
        <Grid>
          <VisualStateManager.VisualStateGroups>
            ...
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="Stretch" IsHitTestVisible="False" VerticalAlignment="Stretch"/>
          <telerik:GroupHeaderButton x:Name="Header" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" CommandParameter="{Binding Name}" Command="{Binding Name.VehicleSelectedCommand}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}"
IsToday="False" Orientation="Vertical" />
        </Grid>
        <ControlTemplate.Triggers>
          <DataTrigger Binding="{Binding Name.IsSelected}" Value="True">
            <Setter TargetName="Border" Property="BorderBrush" Value="#FFFFC92B" />
            <Setter TargetName="Border" Property="BorderThickness" Value="2 0 2 2" />
          </DataTrigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

 

 

[Kieron]

Hi, please ignore the last comment - I realised after a bit of playing that I have to remove the ResourceType from the ResourceCollection and re-add it (with the changes) for the scheduleview to update.

Thanks.

[Kieron]

Hi,
Related quick question - I'm now trying to change the MouseOver Trigger of the GroupHeaderButton but not having much luck - what am I doing wrong here?  Thanks.

 

<telerik:GroupHeaderButton x:Name="Header" ContentTemplate="{TemplateBinding ContentTemplate}"
                           Background="{StaticResource GroupHeadersBackgroundBrush}" Content="{TemplateBinding Content}"
                           ContentStringFormat="{TemplateBinding ContentStringFormat}" Command="{Binding Name.VehicleSelectedCommand}"
                           HorizontalAlignment="Left" VerticalAlignment="Stretch" Foreground="{TemplateBinding Foreground}" FontSize="{TemplateBinding FontSize}"
                           FontFamily="{TemplateBinding FontFamily}" IsToday="False" Orientation="Vertical" >
    <telerik:GroupHeaderButton.CommandParameter>
        <MultiBinding Converter="{StaticResource MultiCommandParamConverter}">
            <Binding Path="Name" />
            <Binding ElementName="mainScheduleView" />
        </MultiBinding>
    </telerik:GroupHeaderButton.CommandParameter>
    <telerik:GroupHeaderButton.Style>
        <Style TargetType="{x:Type telerik:GroupHeaderButton}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Purple"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </telerik:GroupHeaderButton.Style>
</telerik:GroupHeaderButton>

[Kalin]

Hello Kieron,

If you apply an implicit Style with the same Style Trigger - everything should work as expected:

<Style TargetType="telerik:GroupHeaderButton">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Purple"/>
        </Trigger>
    </Style.Triggers>
</Style>

Check the attached sample project. Hope this helps.

Regards,
Kalin
Telerik

[Kieron]

Hi, I can see how you have done it in the example project, but this doesn't work for me.  So my RadScheduleView has set the GroupHeaderStyleSelector and GroupHeaderContentSelector properties and in my Windows Resources I have a basestyle for the GroupHeader (see below):

<Style x:Key="GroupHeaderBaseStyle" TargetType="telerik:GroupHeader">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GroupHeader}">
                        <Grid>
                            <Border x:Name="Border"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    HorizontalAlignment="Stretch"
                                    IsHitTestVisible="False" VerticalAlignment="Stretch"/>
                            <telerik:GroupHeaderButton
                                x:Name="Header" Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                HorizontalAlignment="Left" VerticalAlignment="Stretch"
                                Foreground="{TemplateBinding Foreground}"
                                FontSize="{TemplateBinding FontSize}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                FontFamily="{TemplateBinding FontFamily}"
                                Orientation="Vertical"
                                Background="{TemplateBinding Background}">
                            </telerik:GroupHeaderButton>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

Also in my windows resources I have the following styles (these are set against the related properties on my OrientedGroupHeaderStyleSelector) :

<Style x:Key="VerticalGroupHeaderStyle" TargetType="scheduleView:GroupHeader" BasedOn="{StaticResource GroupHeaderBaseStyle}">
    <Setter Property="BorderBrush" Value="Green" />
    <Setter Property="Margin" Value="0 0 0 -1" />
    <Setter Property="Padding" Value="0 -1 0 0" />
    <Setter Property="Panel.ZIndex" Value="-2" />
</Style>

<Style x:Key="VerticalBottomLevelGroupHeaderStyle" TargetType="scheduleView:GroupHeader" BasedOn="{StaticResource GroupHeaderBaseStyle}">
    <Setter Property="BorderBrush" Value="Blue" />
    <Setter Property="Margin" Value="0 0 0 -1" />
    <Setter Property="Padding" Value="0 -1 0 0" />
    <Setter Property="Panel.ZIndex" Value="-2" />
</Style>

With all that in place, the style you have provided does not work on the GroupHeaderButton that is contained within the controltemplate of my GroupHeader, nor can I set the style explicitly against it - so how do I set it whilst still keeping in place my GroupHeader base style?

[Kalin]

Hi Kieron,

When using Implicit Styles you would need to base the applied Style to the default one in order to override only needed properties (or add the Style Trigger like in this case):

<Style TargetType="telerik:GroupHeaderButton" BasedOn="{StaticResource GroupHeaderButtonStyle}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Purple"/>
        </Trigger>
    </Style.Triggers>
</Style>

Doing this will allow you to achieve the desired - check the attached sample project.

Regards,
Kalin
Telerik by Progress

[Kieron]

Hi,
Thanks for that - unfortunately I had already tried that and it makes no difference at all in my project - I'll accept this as the answer though as I can see that the example project is working - so it must be something incorrect I have set in mine.