Grid Layout in UWP Pivot Grid (SfPivotGrid)

10 May 20213 minutes to read

The position of summary cells in the SfPivotGrid can be customized with the help of Layout property. It can be positioned at the top or bottom of each parent member.

The following are the five different kinds of layouts supported by the SfPivotGrid:

  • Normal layout.
  • Excel-like layout.
  • Normal top summary layout.
  • No summaries layout.

Normal layout

Normal layout is the default layout of SfPivotGrid, in which the summary cells are positioned at the bottom of value cells. Refer to the following code snippet to customize the grid layout.

<syncfusion:SfPivotGrid x:Name="PivotGrid1" Layout="Normal"
                        OlapDataManager="{Binding OlapDataManager}">
</syncfusion:SfPivotGrid>
this.PivotGrid1.Layout = GridLayout.Normal;
Me.PivotGrid1.Layout = GridLayout.Normal

Grid-Layouts_img1

Excel-like layout

In Excel-Like layout, the summary cells are positioned at the bottom alone and the child members appear below the parent member with some indent space.

<syncfusion:SfPivotGrid x:Name="PivotGrid1" Layout="ExceLikeLayout"
                        OlapDataManager="{Binding OlapDataManager}">
</syncfusion:SfPivotGrid>
this.PivotGrid1.Layout = GridLayout.ExcelLikeLayout;
Me.PivotGrid1.Layout = GridLayout.ExcelLikeLayout

Grid-Layouts_img2

Normal top summary layout

In normal top summary layout, the summary cells are positioned at the top of each parent member and the child members appear adjacent to it.

<syncfusion:SfPivotGrid x:Name="PivotGrid1" Layout="NormalTopSummary"
                        OlapDataManager="{Binding OlapDataManager}">
</syncfusion:SfPivotGrid>
this.PivotGrid1.Layout = GridLayout.NormalTopSummary;
Me.PivotGrid1.Layout = GridLayout.NormalTopSummary

Grid-Layouts_img3

No summaries layout

In no summaries layout, the summary cells can be hidden and the child members can be appeared adjacent to the parent member.

<syncfusion:SfPivotGrid x:Name="PivotGrid1" Layout="NoSummaries"
                        OlapDataManager="{Binding OlapDataManager}">
</syncfusion:SfPivotGrid>
this.PivotGrid1.Layout = GridLayout.NoSummaries;
Me.PivotGrid1.Layout = GridLayout.NoSummaries

Grid-Layouts_img4

A demo sample is available in the following location.

{system drive}:\Users\<User Name>\AppData\Local\Syncfusion\EssentialStudio\<Version Number>\Samples\UWP\SampleBrowser\PivotGrid\PivotGrid\View\GridLayout.xaml