Grid Layout

The pivot grid supports for two different types of layout options with respect to summaries. That is, whether to display the summary data of each pivot item at the top or at the bottom of value cells.

The GridLayout property is used to set the layout options, and this can be defined in both XAML and code-behind.

For XAML, refer to the following code sample.

  • xaml
  • <Grid>
            <syncfusion:PivotGridControl HorizontalAlignment="Left" Name="pivotGrid" VerticalAlignment="Top" GridLayout="TopSummary" ItemSource="{Binding Source={StaticResource data}}">
    
                <syncfusion:PivotGridControl.PivotRows>
                    <syncfusion:PivotItem FieldHeader="Product" FieldMappingName="Product" TotalHeader="Total" />
                    <syncfusion:PivotItem FieldHeader="Date" FieldMappingName="Date" TotalHeader="Total" />
                </syncfusion:PivotGridControl.PivotRows>
                <syncfusion:PivotGridControl.PivotColumns>
                    <syncfusion:PivotItem FieldHeader="Country" FieldMappingName="Country" TotalHeader="Total" />
                    <syncfusion:PivotItem FieldHeader="State" FieldMappingName="State" TotalHeader="Total" />
                </syncfusion:PivotGridControl.PivotColumns>
                <syncfusion:PivotGridControl.PivotCalculations>
                    <syncfusion:PivotComputationInfo CalculationName="Total" FieldName="Amount" Format="C" SummaryType="DoubleTotalSum" />
                    <syncfusion:PivotComputationInfo CalculationName="Total" FieldName="Quantity" SummaryType="Count" />
                </syncfusion:PivotGridControl.PivotCalculations>
    
            </syncfusion:PivotGridControl>
        </Grid>

    For code-behind, refer to the following code sample.

  • c#
  • public partial class MainWindow: Window {
        PivotGridControl pivotGrid = new PivotGridControl();
        public MainWindow() {
            InitializeComponent();
            grid1.Children.Add(pivotGrid);
            pivotGrid.ItemSource = ProductSales.GetSalesData();
            PivotItem m_PivotItem = new PivotItem() {
                FieldHeader = "Product", FieldMappingName = "Product", TotalHeader = "Total"
            };
            PivotItem m_PivotItem1 = new PivotItem() {
                FieldHeader = "Date", FieldMappingName = "Date", TotalHeader = "Total"
            };
            PivotItem n_PivotItem = new PivotItem() {
                FieldHeader = "Country", FieldMappingName = "Country", TotalHeader = "Total"
            };
            PivotItem n_PivotItem1 = new PivotItem() {
                FieldHeader = "State", FieldMappingName = "State", TotalHeader = "Total"
            };
            // Adding PivotItem to PivotRows
            pivotGrid.PivotRows.Add(m_PivotItem);
            pivotGrid.PivotRows.Add(m_PivotItem1);
            // Adding PivotItem to PivotColumns
            pivotGrid.PivotColumns.Add(n_PivotItem);
            pivotGrid.PivotColumns.Add(n_PivotItem1);
            PivotComputationInfo m_PivotComputationInfo = new PivotComputationInfo() {
                CalculationName = "Amount", FieldName = "Amount", Format = "C", SummaryType = SummaryType.DoubleTotalSum
            };
            PivotComputationInfo m_PivotComputationInfo1 = new PivotComputationInfo() {
                CalculationName = "Quantity", FieldName = "Quantity", SummaryType = SummaryType.Count
            };
            pivotGrid.PivotCalculations.Add(m_PivotComputationInfo);
            pivotGrid.PivotCalculations.Add(m_PivotComputationInfo1);
    
            pivotGrid.GridLayout = GridLayout.TopSummary;
        }
    }

    Normal

    Displays the summary data of rows or columns at the end of value cells.

    Displaying the PivotGrid in Normal layout

    Top summary

    Displays the summary data of rows or columns at the beginning of value cells.

    Displaying the PivotGrid in Top summary layout

    Excel-like layout

    Displays the summary cells at the bottom alone and child members that appear below the parent member with some indent space.

    Displaying the PivotGrid in Excel-like layout