[Solved] Grouping and sorting a cell based on another one

[Michele]

Hello to everybody,
I've got this problem , I've got a cell that contains a description as ("Less 5000", "Between 5000 and 6000"....) and another column that's the ordinal, that says how to order it... since when I group I wish to see before "Less 5000" then "Betweeen..."...
If I sort directly on the first I've got before Between... since B cames before L..

How can I do that? I've tried playing with

 private void gvSforamenti_Grouping(object sender, Telerik.Windows.Controls.GridView.GridView.GridViewGroupingEventArgs e)
        {
            if (e.Action == CollectionChangeAction.Add)
            {
                if (e.GroupDescriptor.Member == "FasciaDescr")
                {
                    e.GroupDescriptor.Member = "FasciaOrdine";
                    e.GroupDescriptor.DisplayContent = "FasciaDescr";
                    e.GroupDescriptor.SortDirection = System.ComponentModel.ListSortDirection.Ascending;

                }
                int i = 0;
            }
        }

and on the Grouped event but with no luck...

Thanks in advance

Paolo

[Pavel Pavlov]

Hello Paolo,

I have tried some approaches . Here is the most effective one:

In order to change the group header for your scenario you will need to modify  the  template for the GridViewGroupRow the following way:

Here is some XAML I paste from a tested project:

 <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <Style x:Key="MyGroupStyle" TargetType="gridView:GridViewGroupRow" >
                <Setter Property="Template" >
                    <Setter.Value>
                        <ControlTemplate x:Key="GridViewGroupRowTemplate" TargetType="gridView:GridViewGroupRow">
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Background="{TemplateBinding Background}">
                                <gridView:GridViewExpander x:Name="PART_GroupExpander"  RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}" Grid.Column="1"  ExpandDirection="Down" Header="test123">
                                    <gridView:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" />
                                </gridView:GridViewExpander>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Grid.Resources>
        <telerik:RadGridView x:Name="RadGridView1" GroupRowStyle="{StaticResource MyGroupStyle}" />

  </Grid>

Please find the attribute Header="test123" . You need to change this one to  to a binding with a custom IValueConverter. The converter should tace care to convert from the numeric value you group by , to the descriptive text you need to display in the header.

Something like Header = "{Binding FasciaOrdine, Converter = {StaticResource OrdineToDescrConverter}}" ...

 

where OrdineToDescConverter is a custom IValueConverter you need to implement.

In case you find troubles  implementing this, just let me know.
Regards,

Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michele]

Hello Pavel,
sorry if I re-open this post... are you planning to implement a more efficent way of allowing sorting (maybe detached) from grouping?
Right now I need to order a grouped gridview based on DateTime and I dislike to pass something as 12muneric-string-datetime as the header....

Thanks

Paolo

[Pavel Pavlov]

Hi Paolo,

I am not sure I get the question right . I understand you have got a column of DateTime type and you need to perform sorting by that column ... however I can not understand what do you mean by "passing 12numeric-string-datetime as a header ?

Regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michele]

Hello Pavel,
in the example you posted me you wrote :

"Please find the attribute Header="test123" . You need to change this one to  to a binding with a custom IValueConverter. The converter should tace care to convert from the numeric value you group by , to the descriptive text you need to display in the header.

Something like Header = "{Binding FasciaOrdine, Converter = {StaticResource OrdineToDescrConverter}}" ...
"

So as I've understood I need to create an ivalue converter that tooks my value (Datetime, int, whatever) and it subsitute with the right value...

what If I need to sort based on a datime but I've got a different grouping?

Consider this extreme case (where I've got an header that's clickable when grouped on a Member)

  <UserControl.Resources>
        <Style TargetType="grid:AggregateResultsList" x:Key="prova">
            <Setter Property="HorizontalAlignment" Value="Left"></Setter>
        </Style>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot">
        <Grid.Resources>
            <DataTemplate x:Key="ClickableHeaderTemplate" >
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition></ColumnDefinition>
                        <ColumnDefinition></ColumnDefinition>
                    </Grid.ColumnDefinitions>
                    <test:GroupHeader Grid.Column="0"/>
                </Grid>
            </DataTemplate>
            <ControlTemplate x:Key="GridViewGroupRowTemplate" TargetType="grid:GridViewGroupRow">
                <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" Background="{TemplateBinding Background}">
                    <grid:GridViewExpander x:Name="PART_GroupExpander" Grid.Column="1"  ExpandDirection="Down" RowIndicatorVisibility="{TemplateBinding RowIndicatorVisibility}" >
                        <grid:GridViewExpander.Header>
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <test:GroupHeader Grid.Column="0"/>
                            </Grid>
                        </grid:GridViewExpander.Header>
                        <!--<grid:GroupVirtualizingPanel x:Name="PART_GridViewVirtualizingPanel" />-->
                    </grid:GridViewExpander>
                </Grid>
            </ControlTemplate>
            <Style x:Key="GridViewGroupRowStyle1" TargetType="grid:GridViewGroupRow">
                <Setter Property="HorizontalAlignment" Value="Left"/>
                <Setter Property="Template" Value="{StaticResource GridViewGroupRowTemplate}"/>
            </Style>
            <telerik:Office_BlackTheme x:Key="Theme"/>
            <Color x:Key="GridViewIndentCellBorderBrushColor">#FFB3B3B3</Color>
            <SolidColorBrush x:Key="GridViewIndentCellBorderBrush" Color="{StaticResource GridViewIndentCellBorderBrushColor}"/>
            <Color x:Key="GridViewIndicatorsPartsFillGradientStop1">#FF000000</Color>
            <Color x:Key="GridViewIndicatorsPartsFillGradientStop2">#FF000000</Color>
            <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop1}" Offset="0"/>
                <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop2}" Offset="1"/>
            </LinearGradientBrush>
            <ControlTemplate x:Key="GridViewExpanderToggleButtonTemplate" TargetType="ToggleButton">
                <Grid Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                        <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="180"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundEllipse" Storyboard.TargetProperty="BorderThickness">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0,0,0,1"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border x:Name="BackgroundEllipse" Width="24" UseLayoutRounding="True" BorderBrush="{StaticResource GridViewIndentCellBorderBrush}">
                        <Path x:Name="ExpanderButton" Fill="{StaticResource GridViewIndicatorsPartsFill}" Height="5" Width="7" RenderTransformOrigin="0.5,0.5" Data="M3,0 L4,0 4,0.99999972 5,0.99999993 5,1.9999999 6,1.9999999 6,2.9999999 7,2.9999999 7,3.9999999 7,4.9999999 6,4.9999999 5,4.9999999 5,3.9999999 4,3.9999999 4,2.9999999 3,2.9999999 3,3.9999999 2,3.9999999 2,4.9999999 1,4.9999999 0,4.9999999 0,3.9999999 0,2.9999999 1,2.9999999&#xa;1,1.9999999 2,1.9999999 2,0.99999972 3,0.99999972 z">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="180"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                </Grid>
            </ControlTemplate>
            <Color x:Key="GridViewRowIndicatorBackgroundColor">#FFDBDEE1</Color>
            <SolidColorBrush x:Key="GridViewRowIndicatorBackground" Color="{StaticResource GridViewRowIndicatorBackgroundColor}"/>
            <ControlTemplate x:Key="GridViewExpanderTemplate" TargetType="grid:GridViewExpander">
                <Grid x:Name="PART_GroupExpanderGrid" HorizontalAlignment="Stretch">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="ExpandStateGroup">
                            <VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Collapsed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupExpanderGrid" Storyboard.TargetProperty="Opacity">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="0.5"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition x:Name="PART_HeaderRow"/>
                        <RowDefinition x:Name="ContentRow"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition/>
                    </Grid.ColumnDefinitions>
                    <grid:HorizontalScrollPanel x:Name="PART_HeaderScroller" HorizontalAlignment="Stretch" Grid.Column="1" Grid.Row="0" HorizontalScrollEnabled="False" telerik:StyleManager.Theme="{StaticResource Theme}">
                        <Border x:Name="PART_GroupExpanderBorder" UseLayoutRounding="True" Background="{TemplateBinding IndentBackground}" BorderBrush="{TemplateBinding BorderBrush}">
                            <Grid x:Name="PART_HeaderGrid" MinHeight="{TemplateBinding MinHeight}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <grid:IndentPresenter BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="0" IndentLevel="{Binding Level}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                <ToggleButton x:Name="HeaderButton" VerticalAlignment="Stretch" Background="{TemplateBinding Background}" IsTabStop="False" Template="{StaticResource GridViewExpanderToggleButtonTemplate}" VerticalContentAlignment="Center" Grid.Column="1" IsChecked="{Binding IsExpanded}"/>
                                <Border x:Name="ExpanderRowBottomBorder" Grid.Column="2" Grid.ColumnSpan="3" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1"/>
                                <ContentPresenter Margin="3,0,3,0" VerticalAlignment="Center" Grid.Column="3" Content="{TemplateBinding Header}">
                                </ContentPresenter>
                                <grid:AggregateResultsList HorizontalAlignment="Left" VerticalAlignment="Center" Grid.Column="4" telerik:StyleManager.Theme="{StaticResource Theme}">
                                    <grid:AggregateResultsList.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal"/>
                                        </ItemsPanelTemplate>
                                    </grid:AggregateResultsList.ItemsPanel>
                                    <grid:AggregateResultsList.ItemTemplate>
                                        <DataTemplate>
                                            <grid:GridViewAggregateResultCell AggregateResult="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                        </DataTemplate>
                                    </grid:AggregateResultsList.ItemTemplate>

                                </grid:AggregateResultsList>
                            </Grid>
                        </Border>
                    </grid:HorizontalScrollPanel>
                    <StackPanel x:Name="Content" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Background="{TemplateBinding IndentBackground}">
                        <ContentPresenter/>
                        <grid:GridViewGroupFooterRow x:Name="Footer" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                    </StackPanel>
                    <Border UseLayoutRounding="True" Grid.Column="1" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,0"/>
                    <grid:IndicatorPresenter x:Name="PART_IndicatorPresenter" Visibility="{TemplateBinding RowIndicatorVisibility}" Background="{StaticResource GridViewRowIndicatorBackground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="0" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                </Grid>
            </ControlTemplate>
            <Color x:Key="GridViewHierarchyAndGroupingColor">#FFFDDFAA</Color>
            <Color x:Key="GridViewGroupingRowsColor">#FFFDF6E9</Color>
            <LinearGradientBrush x:Key="GridViewExpanderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="{StaticResource GridViewHierarchyAndGroupingColor}" Offset="1"/>
                <GradientStop Color="{StaticResource GridViewGroupingRowsColor}" Offset="0"/>
            </LinearGradientBrush>
            <Color x:Key="GridViewBorderBrushColor">#FFB3B3B3</Color>
            <SolidColorBrush x:Key="GridViewHeaderCellBorderBrush" Color="{StaticResource GridViewBorderBrushColor}"/>
            <Color x:Key="GridViewHeaderCellForegroundColor">#FF000000</Color>
            <SolidColorBrush x:Key="GridViewHeaderCellForeground" Color="{StaticResource GridViewHeaderCellForegroundColor}"/>
            <SolidColorBrush x:Key="GridViewCellIndentBackground" Color="{StaticResource GridViewHierarchyAndGroupingColor}"/>
            <Style x:Key="GridViewExpanderStyle1" TargetType="grid:GridViewExpander">
                <Setter Property="Template" Value="{StaticResource GridViewExpanderTemplate}"/>
                <Setter Property="MinHeight" Value="24"/>
                <Setter Property="Background" Value="{StaticResource GridViewExpanderBackground}"/>
                <Setter Property="BorderBrush" Value="{StaticResource GridViewHeaderCellBorderBrush}"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}"/>
                <Setter Property="IndentBackground" Value="{StaticResource GridViewCellIndentBackground}"/>
            </Style>
        </Grid.Resources>
        <Grid.Background>
            <ImageBrush ImageSource=""></ImageBrush>
        </Grid.Background>
        <Grid.RowDefinitions>
            <RowDefinition Height="30"></RowDefinition>
            <RowDefinition Height="Auto"></RowDefinition>
        </Grid.RowDefinitions>
        <Grid x:Name="gvFilter" Grid.Row="0" MinHeight="30" Height="30">
            <StackPanel Orientation="Horizontal">

                <TextBlock  Text="Data Ricerca" Width="70" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></TextBlock>
                <telerikInput:RadDatePicker  x:Name="dpData" IsTodayHighlighted="True" Height="22" Margin="5,0,0,0"></telerikInput:RadDatePicker>

                <TextBlock  Text="Giorni" Width="40" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0" ></TextBlock>
                <telerikInput:RadMaskedTextBox Width="40" Mask="###" Margin="5,0,0,0" VerticalAlignment="Center" HorizontalAlignment="Left" x:Name="tbGiorni" Value="0" />

                <TextBlock  Text="Scarto" Width="40" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5,0,0,0"></TextBlock>
                <telerikInput:RadMaskedTextBox Mask="###" Margin="5,0,0,0" VerticalAlignment="Center" x:Name="tbScarto" Value="0" />

                <Button x:Name="btnSearch"  Click="btnSearch_Click"  Content="Ricerca" FontSize="10" Height="22" Margin="5,0,0,0" ></Button>
            </StackPanel>
        </Grid>

where GroupHeader is as this :

<UserControl x:Class="IFWebLight.Disallineamenti.Inquiry.GroupHeader"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" Height="20"
    xmlns:IF="clr-namespace:IFWebLight.Disallineamenti">
    <UserControl.Resources>

    </UserControl.Resources>
    <StackPanel Orientation="Horizontal" Loaded="StackPanel_Loaded" VerticalAlignment="Center">
        <ContentPresenter  x:Name="normalContent" Content="{Binding Header}"></ContentPresenter>
        <HyperlinkButton x:Name="hyperLinkContent" Content="{Binding Header}" Visibility="Collapsed" Click="hyperLinkRapporto_Click_1">
        </HyperlinkButton>
    </StackPanel>
</UserControl>

How Can I apply the custom sorting on this?
Can you provide me a working sample?
Thanks in advance

Paolo

[Pavel Pavlov]

Hi Paolo,

I have carefully reviewed your post. Unfortunately I must admit that custom sorting currently provided by RadGridView does not cover the case when RadGridView is Grouped. I have discussed this with the team and we find it reasonable to thing about extending the custom sorting logic to allow arbitrary sorting on groups not only on flat rows. Since this was just scheduled , I can not commit to a specific release date .

Meanwhile such behavior is not impossible to achieve with the current version  but would require tons of ugly hacks which I would rather not recommend. 

Regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michele]

Hello Pavel,
thanks for your answer.... I really thank you about taking in care this problem... in the mean I have admin that it's not a good news for me, but I wait for this feature!

Thanks

Paolo