Group Footer row style messed up on expand/collapse group

[Ashutosh]

Hi,

In my application I have added some custom style for group header row and group footer row based on group level. Here is link for support ticket for it http://www.telerik.com/community/forums/styling-group-header-row

This is working great, but I faced a problem. When I am scrolling up and down group footer style gets messed up.I found out that is known issue which caused due to virtualisation. So I disable the virtualisation and it becomes stable. But it still gets messed up whenever I collapse an expanded group and expand it again.See attached screenshot. Here group header style is stable but for group footer row's style gets interchanged.

Can you provide me solution or workaround for fixing this issue.

Thanks and Regards,

Ashutosh

[Ashutosh]

Any updates on this. According to this it is recommended to use Style Selector. Which is exactly what I am doing. 

I don't want to disable virtualisation as it drastically degrades the performance of already slow control. 

 

[Stefan]

Hello Ashutosh,

Generally, if a GroupStyleSelector is used, rather than accessing the visual elements directly, such behavior should not be reproduced. May I ask you to provide some details on your setup? Sharing some code would also be quite useful.

Regards,
Stefan X1
Telerik by Progress

[Ashutosh]

Here is the class which I am using. I have tried to access item as var group = item as QueryableCollectionViewGroup;  but it returns null value.

01.public class CustomGroupFooterRowStyleSelector : StyleSelector {
02.        public override Style SelectStyle(object item, DependencyObject container) {
03.            var grid = ((GridViewGroupFooterRow)container).ParentOfType<RadGridView>();
04.            ApplicationDetails appDetails = ((IHasApplicationDetails)grid.DataContext).AppDetails;
05.            if (appDetails.GroupHeaderColorByLevel.Count == 1) {return GetStyleByLevel(appDetails.GroupHeaderColorByLevel[1]); }
06.            Int32 level = 1;
07.            dynamic group = ((GridViewGroupFooterRow)container).DataContext;
08.            if (group != null) {
09.                dynamic currentGroup = group;
10.                while (currentGroup.ParentGroup != null) {
11.                    level += 1; currentGroup = currentGroup.ParentGroup;
12.                }
13.            }
14.            Color color;
15.            appDetails.GroupHeaderColorByLevel.TryGetValue(level, out color);
16.            if (color == null) { color = Colors.Transparent; }
17.            return GetStyleByLevel(color);
18.        }
19.        private Style GetStyleByLevel(Color color) {
20.            Style style = new Style(typeof(GridViewGroupFooterRow));
21.            style.Setters.Add(new Setter(GridViewGroupFooterRow.BackgroundProperty, new SolidColorBrush(color)));
22.            return style;
23.        }
24.    }
25.}

[Stefan]

Hello,

Thanks for the additional info.

I prepared a sample application based on it in which such behavior is not reproduced. Can you please check it out? How does it deffer from the setup at your end?

Regards,
Stefan X1
Telerik by Progress

[Ashutosh]

Hi Stefan,

After modifying code you have provide I am able to reproduce the bug. I am attaching t the screen shot of the bug.The difference I can see in code setup is, I am setting ShowGroupFooters property of grid to false and setting  ShowGroupHeaderColumnAggregates Property true in group header row style. I am doing this as I have custom aggregates used for showing total and I want it to align to the column.

 

Here is XAML:

01.<UserControl.Resources>
02.        <my:MyViewModel x:Key="MyViewModel"/>
03.        <my:CustomGroupFooterRowStyleSelector x:Key="groupFooterRowStyleSelector"/>
04.        <my:CustomGroupHeaderRowStyleSelector x:Key="groupHeaderRowStyleSelector"/>
05.    </UserControl.Resources>
06.    <Grid x:Name="LayoutRoot" Background="White">
07.        <Grid DataContext="{StaticResource MyViewModel}">
08.            <Grid.RowDefinitions>
09.                <RowDefinition Height="*"/>
10.                <RowDefinition Height="Auto" />
11.            </Grid.RowDefinitions>
12.            <telerik:RadGridView Grid.Row="0"
13.                             Name="clubsGrid"
14.                             ItemsSource="{Binding Clubs}"
15.                             AutoGenerateColumns="True"
16.                             GroupFooterRowStyleSelector="{StaticResource groupFooterRowStyleSelector}"
17.                             GroupRowStyleSelector="{StaticResource groupHeaderRowStyleSelector}"
18.                             ShowGroupFooters="False"
19.                             Margin="5"
20.                             GroupRenderMode="Flat">
21.            </telerik:RadGridView>
22.            <StackPanel Orientation="Horizontal" Grid.Row="1">
23.                <Button Height="80" Grid.Row="2" Content="Add"  Click="Button_Click"/>
24.                <Button Height="80" Grid.Row="2" Content="Remove" Click="Button_Click_1"/>
25.            </StackPanel>
26.
27.        </Grid>
28.    </Grid>
29.</UserControl>

 

And here is my style selector class:

01.    public class CustomGroupFooterRowStyleSelector : StyleSelector {
02.
03.        public override Style SelectStyle(object item, DependencyObject container) {
04.            Dictionary<Int32, System.Windows.Media.Color> GroupHeaderColorByLevel = new Dictionary<int, System.Windows.Media.Color> {
05.                [1] = System.Windows.Media.Color.FromArgb(255, 123, 163, 210),
06.                [2] = System.Windows.Media.Color.FromArgb(255, 213, 124, 123),
07.                [3] = System.Windows.Media.Color.FromArgb(255, 181, 206, 130),
08.                [4] = System.Windows.Media.Color.FromArgb(255, 133, 196, 214),
09.                [5] = System.Windows.Media.Color.FromArgb(255, 246, 179, 123),
10.            };
11.            var grid = ((GridViewGroupFooterRow)container).ParentOfType<RadGridView>();
12.            Int32 level = 1;
13.            dynamic group = ((GridViewGroupFooterRow)container).DataContext;
14.            if (group != null) {
15.                dynamic currentGroup = group;
16.                while (currentGroup.ParentGroup != null) {
17.                    level += 1; currentGroup = currentGroup.ParentGroup;
18.                }
19.            }
20.            Color color;
21.            GroupHeaderColorByLevel.TryGetValue(level, out color);
22.            if (color == null) { color = Colors.Transparent; }
23.            Style style = new Style(typeof(GridViewGroupFooterRow));
24.            style.Setters.Add(new Setter(GridViewGroupFooterRow.BackgroundProperty, new SolidColorBrush(color)));
25.            return style;
26.        }
27.    }
28.
29.    public class CustomGroupHeaderRowStyleSelector : StyleSelector {
30.        public override Style SelectStyle(object item, DependencyObject container) {
31.            Dictionary<Int32, System.Windows.Media.Color> GroupHeaderColorByLevel = new Dictionary<int, System.Windows.Media.Color> {
32.                [1] = System.Windows.Media.Color.FromArgb(255, 123, 163, 210),
33.                [2] = System.Windows.Media.Color.FromArgb(255, 213, 124, 123),
34.                [3] = System.Windows.Media.Color.FromArgb(255, 181, 206, 130),
35.                [4] = System.Windows.Media.Color.FromArgb(255, 133, 196, 214),
36.                [5] = System.Windows.Media.Color.FromArgb(255, 246, 179, 123),
37.            };
38.
39.            var grid = ((GroupHeaderRow)container).ParentOfType<RadGridView>();
40.            Int32 level = 1;
41.            var group = item as QueryableCollectionViewGroup;
42.            if (group != null) {
43.                var currentGroup = group;
44.                while (currentGroup.ParentGroup != null) {
45.                    level += 1;
46.                    currentGroup = currentGroup.ParentGroup as QueryableCollectionViewGroup;
47.                }
48.            }
49.            Color color;
50.            GroupHeaderColorByLevel.TryGetValue(level, out color);
51.            if (color == null) { color = Colors.Transparent; }
52.            Style style = new Style(typeof(GroupHeaderRow));
53.            style.Setters.Add(new Setter(GroupHeaderRow.BackgroundProperty, new SolidColorBrush(color)));
54.            style.Setters.Add(new Setter(GroupHeaderRow.ShowHeaderAggregatesProperty, false));
55.            style.Setters.Add(new Setter(GroupHeaderRow.ShowGroupHeaderColumnAggregatesProperty, true));
56.            return style;
57.        }
58.    }
59.}

Please review the code and let me know solution to fix this.

Thanks and Regards,

Ashutosh

[Stefan]

Hello Ashutosh,

I reviewed the provided code and I might be missing something, as Styles targeting GroupHeaderRow element are applied through GroupRowStyleSelector. I assume that this code would not even compile. Can you please clarify this?

Regards,
Stefan X1
Telerik by Progress

[Ashutosh]

Hi Stefan,

The code does compile. And actually using GroupRowStyleSelector for styles targeting GroupHeaderRow was recommended by you guys only. You can see it here : http://www.telerik.com/forums/styling-group-header-row

I tried to attached the code to the previous reply to this thread but unable to do so due to restriction on file type and size for attached files. Let me know how to add code so I can provide you compiled and running sample to make things faster.

Regards,Ashutosh

[Stefan]

Hi Ashutosh,

Thanks for the update.

Indeed, the code does compile. I have missed to set the GroupRenderMode property of RadGridView, so please excuse me for this misunderstanding.

As to providing a running sample application, I am afraid that there is a restriction in our forum for such attachments. This is supported for a regular support thread only.

However, attached you can find the modified sample application with the exact same code you have provided in which the reported behavior is still not reproduced. The only way I managed to replicate it locally, was by defining the same columns of RadGridView manually multiple times. Can you please clarify whether you have used such an approach?

Regards,
Stefan X1
Telerik by Progress

[Ashutosh]

If only I had option to attach my code this could have been much faster.

Anyways, I do have some complex custom column which I am adding in codebehind. But not sure whether your scenario matches mine. Another difference I can see is my FooterStyleSelector class is slightly different and I am hosting the application in a website.

Did you find any solution to fix it when you were able to reproduce the issue? This can may work for my scenario as well.

Regards,

Ashutosh

[Ashutosh]

One more thing along with row and column virtualisation set to true I have set  VirtualizingStackPanel.VirtualizationMode="Recycling" 

[Stefan]

Hi Ashutosh,

Since I am not able to replicate this behavior locally, I can only guess what the cause for it might be. As  it seems to be related to the particular implementation, please, verify that with the applied customizations no visual elements of the control are directly modified. If not, please review your logic for calculating the level of the given groups, since the needed style is applied based on it.

I hope this hints help you find the root of the misbehavior you are experiencing.

Regards,
Stefan X1
Telerik by Progress

[Ashutosh]

Hi Stefan,

As I said earlier reply, I am able reproduce the behaviour by taking sample application you have attached  and modifying styleselector classes. And your code does not have any customisation where visual elements of the control are directly modified. 

In your latest attached code you have modified GroupHeaderSelector similar to what I have implemented. But not groupfooterselector. Can you please apply the same logic and see if you can reproduce the behaviour. I am providing footerSelector class once again for your reference.

public class CustomGroupHeaderRowStyleSelector : StyleSelector {
        public override Style SelectStyle(object item, DependencyObject container) {
            Dictionary<Int32, System.Windows.Media.Color> GroupHeaderColorByLevel = new Dictionary<int, System.Windows.Media.Color> {
                [1] = System.Windows.Media.Color.FromArgb(255, 123, 163, 210),
                [2] = System.Windows.Media.Color.FromArgb(255, 213, 124, 123),
                [3] = System.Windows.Media.Color.FromArgb(255, 181, 206, 130),
                [4] = System.Windows.Media.Color.FromArgb(255, 133, 196, 214),
                [5] = System.Windows.Media.Color.FromArgb(255, 246, 179, 123),
            };

            var grid = ((GroupHeaderRow)container).ParentOfType<RadGridView>();
            Int32 level = 1;
            var group = item as QueryableCollectionViewGroup;
            if (group != null) {
                var currentGroup = group;
                while (currentGroup.ParentGroup != null) {
                    level += 1;
                    currentGroup = currentGroup.ParentGroup as QueryableCollectionViewGroup;
                }
            }
            Color color;
            GroupHeaderColorByLevel.TryGetValue(level, out color);
            if (color == null) { color = Colors.Transparent; }
            Style style = new Style(typeof(GroupHeaderRow));
            style.Setters.Add(new Setter(GroupHeaderRow.BackgroundProperty, new SolidColorBrush(color)));
            style.Setters.Add(new Setter(GroupHeaderRow.ShowHeaderAggregatesProperty, false));
            style.Setters.Add(new Setter(GroupHeaderRow.ShowGroupHeaderColumnAggregatesProperty, true));
            return style;
        }
    }
}

 

[Ashutosh]

Please ignore attached code in last post. Here is the right class.

public class CustomGroupFooterRowStyleSelector : StyleSelector {

        public override Style SelectStyle(object item, DependencyObject container) {
            Dictionary<Int32, System.Windows.Media.Color> GroupHeaderColorByLevel = new Dictionary<int, System.Windows.Media.Color> {
                [1] = System.Windows.Media.Color.FromArgb(255, 123, 163, 210),
                [2] = System.Windows.Media.Color.FromArgb(255, 213, 124, 123),
                [3] = System.Windows.Media.Color.FromArgb(255, 181, 206, 130),
                [4] = System.Windows.Media.Color.FromArgb(255, 133, 196, 214),
                [5] = System.Windows.Media.Color.FromArgb(255, 246, 179, 123),
            };
            var grid = ((GridViewGroupFooterRow)container).ParentOfType<RadGridView>();
            Int32 level = 1;
            dynamic group = ((GridViewGroupFooterRow)container).DataContext;
            if (group != null) {
                dynamic currentGroup = group;
                while (currentGroup.ParentGroup != null) {
                    level += 1; currentGroup = currentGroup.ParentGroup;
                }
            }
            Color color;
            GroupHeaderColorByLevel.TryGetValue(level, out color);
            if (color == null) { color = Colors.Transparent; }
            Style style = new Style(typeof(GridViewGroupFooterRow));
            style.Setters.Add(new Setter(GridViewGroupFooterRow.BackgroundProperty, new SolidColorBrush(color)));
            return style;
        }
    }

 

[Dilyan Traykov]

Hello Ashutosh,

Thank you for the provided code snippets. We have investigated this issue and can state that, unfortunately, the GroupRowStyleSelector functionality was not intended to work with the group header column aggregates row.

The reason the styles are applied to these elements is that they are of type GridViewGroupFooterRow, however, they do not participate in RadGridView's virtualization mechanism.

You can still work with the footer rows by setting the ShowGroupFooters property to True, should you find applicable.

We will try to further investigate this issue and think of approaches to it, however, we cannot commit to a certain time frame for it.

If I can further assist you in any way, please let me know.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Hi Dilyan,

Unfortunately I can't really use ShowGroupFooters.If you come up with the approaches to solve this or any workaround it will be great. 

Regards,

Ashutosh

[Dilyan Traykov]

Hello Ashutosh,

I have logged a new bug report in our feedback portal to which you can subscribe in order to get notified about any changes in its status.

As a thank you for your help in finding this issue, I've awarded you with some Telerik points.

If any other questions or concerns regarding our products arise, do not hesitate to contact us again.

Regards,
Dilyan Traykov
Telerik by Progress

[Ashutosh]

Any update on this. Because with this bug the feature we have developed is pretty useless

[Dilyan Traykov]

Hello Ashutosh,

As stated in my previous reply, the new bug report is already in our backlog, however, as we're currently working on a number of new features and bug fixes, I'm afraid we cannot commit to a certain timeframe for its completion.

What I can suggest is to subscribe to the feedback item in our feedback portal in order to get notified about any changes in its status.

Regards,
Dilyan Traykov
Telerik by Progress