Group Footer row style messed up on expand/collapse group

17 posts, 0 answers
  1. Ashutosh
    Ashutosh avatar
    18 posts
    Member since:
    Sep 2016

    Posted 14 Oct Link to this post

    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

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

    Posted 17 Oct Link to this post

    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. 

     

  3. DevCraft banner
  4. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 18 Oct Link to this post

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

    Posted 18 Oct Link to this post

    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.}
  6. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 20 Oct Link to this post

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

    Posted 23 Oct in reply to Stefan X1 Link to this post

    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

  8. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 26 Oct Link to this post

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

    Posted 27 Oct in reply to Stefan X1 Link to this post

    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

  10. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 31 Oct Link to this post

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

    Posted 08 Nov Link to this post

    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

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

    Posted 10 Nov Link to this post

    One more thing along with row and column virtualisation set to true I have set  VirtualizingStackPanel.VirtualizationMode="Recycling" 
  13. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 10 Nov Link to this post

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

    Posted 11 Nov in reply to Stefan X1 Link to this post

    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;
            }
        }
    }

     

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

    Posted 11 Nov in reply to Ashutosh Link to this post

    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;
            }
        }

     

  16. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 16 Nov Link to this post

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

    Posted 17 Nov in reply to Dilyan Traykov Link to this post

    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

  18. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    371 posts

    Posted 21 Nov Link to this post

    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
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Back to Top
DevCraft banner