need advice urgently: GridView Group row question - See Image

[doc21]

Hi 
Please see the attached image (a mock up image made in Word) and trying to achieve that and breaking my head.

As the image shows for each group row I want to show details like Age,PhoneNumber. 
They can be shown in the grid but my requirement is to be shown in the group row.

For example, consider 1st row based on the name "Cesc Fabregas" I search and retrieve a ObservableCollection that contains the 
customers Age,Phone Number. I have to some show these in the group row itself and not in the grid.
I don't want to show the fields horizontally, I have to show them vertically as shown in the image.

The user can then click on any of the group row to show more details about the customer. 

Need to know if this can be done very urgently and if yes please provide me a sample code or any hint. Please help

[Vanya Pavlova]

Hi Haricharan,

 
I have prepared an example for you, which demonstrates how to achieve this result by editing the template of GridViewGroupRow. Please note the StackPanel after the AggregateResultsList, which displays the results of the aggregate functions. In order to display the desired custom data you can use IValueConverter as demonstrated in the attachment.  The changes within this template are listed below:

<Border x:Name="ToggleButtonBorder" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Column="2" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="25"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Grid.Column="2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" telerik:SelectiveScrollingGrid.SelectiveScrollingClip="True" Visibility="{Binding ShowHeaderAggregates, Converter={StaticResource BooleanToVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                            <telerik:AggregateResultsList telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" ItemsSource="{TemplateBinding AggregateResults}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <telerik:AggregateResultsList.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <StackPanel Orientation="Horizontal"/>
                                    </ItemsPanelTemplate>
                                </telerik:AggregateResultsList.ItemsPanel>
                                <telerik:AggregateResultsList.ItemTemplate>
                                    <DataTemplate>
                                        <telerik:GridViewAggregateResultCell AggregateResult="{Binding}" telerik:StyleManager.Theme="{StaticResource Theme}"/>
                                    </DataTemplate>
                                </telerik:AggregateResultsList.ItemTemplate>
                            </telerik:AggregateResultsList>
                            <StackPanel Grid.Column="1" Orientation="Vertical" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <TextBlock Text="{Binding .,Converter={StaticResource gp}}"/>
                            </StackPanel>
                        </Grid>
.....

Kind regards,
Vanya Pavlova
the Telerik team