GroupHeader IsSelected & Click Event`

9 posts, 0 answers
  1. Kieron
    Kieron avatar
    16 posts
    Member since:
    Nov 2013

    Posted 03 Jun Link to this post

    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.

  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 08 Jun Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Kieron
    Kieron avatar
    16 posts
    Member since:
    Nov 2013

    Posted 09 Jun in reply to Yana Link to this post

    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>

     

     

  5. Kieron
    Kieron avatar
    16 posts
    Member since:
    Nov 2013

    Posted 10 Jun in reply to Kieron Link to this post

    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.

  6. Kieron
    Kieron avatar
    16 posts
    Member since:
    Nov 2013

    Posted 30 Jun Link to this post

    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>

  7. Kalin
    Admin
    Kalin avatar
    1208 posts

    Posted 05 Jul Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Kieron
    Kieron avatar
    16 posts
    Member since:
    Nov 2013

    Posted 21 Jul in reply to Kalin Link to this post

    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?

  9. Kalin
    Admin
    Kalin avatar
    1208 posts

    Posted 26 Jul Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  10. Kieron
    Kieron avatar
    6 posts
    Member since:
    Jan 2016

    Posted 27 Jul in reply to Kalin Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready