Styling Group Header Row

14 posts, 2 answers
  1. Ashutosh
    Ashutosh avatar
    18 posts
    Member since:
    Sep 2016

    Posted 02 Sep Link to this post

    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>

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 02 Sep Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. DevCraft banner
  4. Ashutosh
    Ashutosh avatar
    18 posts
    Member since:
    Sep 2016

    Posted 02 Sep Link to this post

    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

  5. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 02 Sep Link to this post

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

    Posted 08 Sep in reply to Dilyan Traykov Link to this post

    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

  7. Answer
    Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 08 Sep Link to this post

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

    Posted 20 Sep Link to this post

    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,

  9. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 20 Sep Link to this post

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

    Posted 28 Sep in reply to Dilyan Traykov Link to this post

    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,

  11. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 29 Sep Link to this post

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

    Posted 30 Sep in reply to Dilyan Traykov Link to this post

    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

  13. Ashutosh
    Ashutosh avatar
    18 posts
    Member since:
    Sep 2016

    Posted 18 Oct in reply to Ashutosh Link to this post

    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

  14. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 20 Oct Link to this post

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

    Posted 26 Oct in reply to Dilyan Traykov Link to this post

    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

Back to Top
DevCraft banner