Styling Group Header Row

[Ashutosh]

Hi,

I want to change background of group header row according to the level. I am thinking of following style applied. But it does not work.

 

<Style TargetType="telerik:GroupHeaderRow" >
                                    <Setter Property="ShowGroupHeaderColumnAggregates" Value="{Binding AppDetails.ShowPositionColumnAggregates, RelativeSource={RelativeSource FindAncestor, AncestorType=views:PositionsViewBase}}" />
                                    <Setter Property="ShowHeaderAggregates"  Value="False" />
                                    <Setter Property="Background"  Value="{Binding Path=Level,Converter={StaticResource LevelToColorConverter}}" />
                                </Style>

[Dilyan Traykov]

Hello Ashutosh,

In order to achieve the desired behavior, you can make use of RadGridView's GroupRowStyleSelector property and style the group header rows based on a specific condition as demonstrated in the Style Selectors -> Group Rows demo of the WPF Controls Examples.

I hope you find this helpful. Please let me know if you need any further assistance on the matter.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

The link you have provided asked to download and install. Can you point me to some online documentation or example which I don't need to download.

Thanks

[Dilyan Traykov]

Hello,

I'm afraid we currently do not have such an example in our documentation, but you can have a look at the RowStyleSelector and CellStyleSelector articles which demonstrate similar approaches.

In your scenario, the GroupStyleSelector class can be defined as follows:

public class MyCustomGroupRowStyleSelector : StyleSelector
{
    public override Style SelectStyle(object item, DependencyObject container)
    {
        var group = item as QueryableCollectionViewGroup;
        var level = 1;
        var currentGroup = group;
        while(currentGroup.ParentGroup != null)
        {
            level += 1;
            currentGroup = currentGroup.ParentGroup as QueryableCollectionViewGroup;
        }

        if (level == 1)
        {
            return BigGroupStyle;
        }
        else
        {
            return SmallGroupStyle;
        }
    }

    public Style BigGroupStyle { get; set; }
    public Style SmallGroupStyle { get; set; }
}

You then need to define the selector in XAML, like so:

<my:MyCustomGroupRowStyleSelector x:Key="MyCustomGroupRowStyleSelector">
    <my:MyCustomGroupRowStyleSelector.BigGroupStyle>
        <Style TargetType="telerik:GroupHeaderRow" BasedOn="{StaticResource GroupHeaderRowStyle}">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </my:MyCustomGroupRowStyleSelector.BigGroupStyle>
    <my:MyCustomGroupRowStyleSelector.SmallGroupStyle>
        <Style TargetType="telerik:GroupHeaderRow" BasedOn="{StaticResource GroupHeaderRowStyle}">
            <Setter Property="Background" Value="Yellow" />
        </Style>
    </my:MyCustomGroupRowStyleSelector.SmallGroupStyle>
</my:MyCustomGroupRowStyleSelector>

Finally, you need to set it as RadGridView's GroupRowStyleSelector:

<telerik:RadGridView GroupRowStyleSelector="{StaticResource MyCustomGroupRowStyleSelector}" />

I'm also attaching a sample project to better demonstrate this. Please let me know if you find all of this helpful.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Hi,

Sorry for late reply as I caught up in other work. 

I tried the above code and it does work but I don't want to define styles in XAML. I am trying following code but it does not work. Please review and let me know.

 

public class CustomGroupHeaderRowStyleSelector: StyleSelector {
      public override Style SelectStyle(object item,DependencyObject container) {
          var group = item as QueryableCollectionViewGroup;
          var level = 1;
          var currentGroup = group;
          while (currentGroup.ParentGroup != null) {
              level += 1;
              currentGroup = currentGroup.ParentGroup as QueryableCollectionViewGroup;
          }
          switch (level) {
              default:
              case 1:
                  Style style = new Style(typeof(GroupHeaderRow));
                  style.Setters.Add(new Setter(GroupHeaderRow.BackgroundProperty, Colors.Blue));
                  style.Setters.Add(new Setter(GroupHeaderRow.ShowHeaderAggregatesProperty,false));
                  return style;
              case 2: return L2GroupStyle;
              case 3: return L3GroupStyle;
              case 4: return L4GroupStyle;
              case 5: return L5GroupStyle;
          }
      }

      public Style L1GroupStyle { get; set; }
      public Style L2GroupStyle { get; set; }
      public Style L3GroupStyle { get; set; }
      public Style L4GroupStyle { get; set; }
      public Style L5GroupStyle { get; set; }
  }

 

L2GroupStyle to L5GroupStyle are defined in XAML and it works as expected.

 

Regards,

Ashutosh

[Dilyan Traykov]

Hello Ashutosh,

If you're using implicit styles, you should base the style on the default one for this element. In this case, you need to base the style on the default GroupHeaderRowStyle.

Additionally, the Background property expects a value of type Brush so you should modify that as well. Here is the modified style:

Style style = new Style(typeof(GroupHeaderRow)) { BasedOn = (Style)App.Current.Resources["GroupHeaderRowStyle"] };
style.Setters.Add(new Setter(GroupHeaderRow.BackgroundProperty, new SolidColorBrush(Colors.Blue)));
style.Setters.Add(new Setter(GroupHeaderRow.ShowHeaderAggregatesProperty, false));
return style;

I hope that this solves your issue. Do let me know if you need any further assistance on the matter.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Hi,

Thanks for reply I am able to achieve the requirement.

Just one small problem, I am trying to implement same for Group Total Rows. I have tried similar approach but var group = item as QueryableCollectionViewGroup;  this returns null value.

 

Regards,

[Dilyan Traykov]

Hello Ashutosh,

Could you please specify whether you've used the GroupFooterRowStyleSelector or GroupFooterCellStyleSelector?

In the first case, you can get the group like so:

var group = item as CollectionViewGroup;

And in the second, you should use the following approach:

var cell = container as GridViewGroupFooterCell;
var footerRow = cell.ParentRow as GridViewGroupFooterRow;
var group = footerRow.Group as QueryableCollectionViewGroup;

Please let me know if this solves your issue.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

I am using GroupFooterRowStyleSelector and I cant find CollectionViewGroup. Actually I am getting Item as null which is root of the problem I guess.

I am also facing performance degradation issue. As no of groups increased performance starts degrading. Any tips on improving performance.

Regards,

[Dilyan Traykov]

Hello Ashutosh,

I'm attaching a sample project where the GroupFooterRowStyleSelector is working as expected. Could you please have a look at it and let me know how it differs from the setup at your end?

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Actually we have custom group aggregate function which may have cause this issue. When I checked data context for group footer row its turn's out to be GroupingImpl<TKey,TValue>. I am able to find some work around and tweaked the code as per my requirement.

Thanks for support.

Regards,

Ashutosh

[Ashutosh]

Hi,

I am facing a new problem. When I tried to scroll up or down, or collapse/expand any group group footer row's style gets messed up.While Group header row show correct style. I have virtualisation enable and disabling it fixed on scrolling but does not solve group expand/collapse action. I don't want to disable it as it hurts performance.  

Regards,

Ashutosh

[Dilyan Traykov]

Hello Ashutosh,

Please excuse me, but I was unable to quite understand what the exact issue you're observing at your end is. Can you please have a look at the attached project and let me know whether the issue is reproducible with it as well? If so, please specify the steps needed to do so or any modifications that are needed so that I may further assist you in finding a solution.

Thank you in advance for your cooperation on the matter.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Hi Dilyan,

I have started new thread for this issue. You can find it here: http://www.telerik.com/community/forums/group-footer-row-style-messed-up-on-expand-collapse-group

Please have a look into it.

Regards,

Ashutosh