Grid options

Grid options can be configured through the grid property of the OptionsObject. In this guide, we will show what can be configured on the grid.

Learn how to set options.

Change the grid layout

Flexmonster offers three grid layouts: compact, classic (tabular), and flat. Learn more about every grid type and how to set it in the Changing the grid layout guide.

Show or hide filter controls

To hide or show the report filters area and filter controls in the rows and columns, use the grid.showFilter property:

options: {
  grid: {
    showFilter: false
  }
}

Live example

Note To hide filter controls on the chart view, use the chart.showFilter option.

Show or hide the report filters area

You can manage the visibility of the report filters area separately by configuring the grid.showReportFiltersArea property:

options: {
  grid: {
    showReportFiltersArea: false
  }
}

Live example

Filter controls in rows and columns are not affected by this option.

Show or hide spreadsheet headers

To hide the spreadsheet headers with column and row numbers on the grid, set grid.showHeaders to false: 

options: {
  grid: {
    showHeaders: false
  }
}

Live example

Manage totals

To control where to display subtotals and grand totals on the grid, use grid.showTotals and grid.showGrandTotals accordingly:

options: {
  grid: {
    type: "compact",
    showTotals: "columns",
    showGrandTotals: "off"
  }
}

Live example

You can also manage grand totals and subtotals through the UI. Select the Options () tab on the Toolbar and configure the needed settings in the Grand totals and Subtotals sections.

Manage the position of totals in the flat table

For the flat view, you can specify where the grand totals are displayed. Use the grid.grandTotalsPosition property to place them either at the top or at the bottom of the table:

options: {
  grid: {
    type: "flat",
    grandTotalsPosition: "bottom"
  }
}

Live example

Enable or disable dragging

The grid.dragging option enables or disables the ability to drag fields between rows, columns, and filters or out of the grid:

options: {
  grid: {
    dragging: false
  }
}

Live example

Show or hide field captions

To specify whether the field captions on the grid are visible or not, set the grid.showHierarchyCaptions property:

options: {
  grid: {
    showHierarchyCaptions: false
  }
}

Live example

Other available grid options

You can configure more grid options:

• grid.title
• grid.showHierarchies
• grid.disableExpandAndCollapse
• grid.autoSwitchToCompact
• grid.showAutoCalculationBar

See also

• How to set options
• Chart options
• Component-wide options