This is a migrated thread and some comments may be shown as answers.

need advice urgently: GridView Group row question - See Image

1 Answer 40 Views
GridView
This is a migrated thread and some comments may be shown as answers.
doc21
Top achievements
Rank 1
doc21 asked on 24 Mar 2011, 07:25 PM
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

1 Answer, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 27 Mar 2011, 06:08 PM
Hi Haricharan,

 
I have prepared an example for you, which demonstrates how to achieve this result by editing the template of GridViewGroupRowPlease 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
Tags
GridView
Asked by
doc21
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Share this question
or