All documentation
Connecting to data source

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 in the report.

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, use the grid.grandTotalsPosition property to specify where the grand totals are displayed. You can 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 options

You can configure more grid options:

See also