Advanced Layout Demo

This example contains 6 layouts of different kinds:

  1. Simple Layout: a basic layout but which includes a Calculated Column (Avg Item Cost) and a FreeText Column (Comments)
  2. Col Widths Layout: a layout where 2 columns (OrderId and Comments) are given wider initial widths.
  3. Sorting Layout: a layout which contains 2 sorted columns (ShipName and ShipVia), the latter of which also has a Custom Sort.
  4. Grouping Layout: which groups on the Employee and Ship Country columns
  5. Pivoting Layout which defines the following pivoting definition:
    • Pivot on the ShipVia column (the PivotColumns property) - note that we automatically uses the Custom Sort defined for that this column.
    • Group on the Employee column (the RowGroupedColumns property)
    • Show aggregation totals for the InvoicedCost (sum) and ItemCost (avg) columns (the AggregationColumns property)
  6. Advanced Layout: bit of everything

Note: we have set groupIncludeTotalFooter to true in GridOptions so that it always appears (even when grid is not row grouped) and added these aggregations: 'ItemCost', 'InvoicedCost': sum, 'ItemCount': avg

Generating dummy data, please wait ...