❄️✨Ho-ho-holiday offer for new projects! Check out our pricing page.

Get Free Trial

Component-wide options

Component-wide options apply to both the grid and the chart at the same time.

The component-wide options can be configured in the OptionsObject. In this guide, we will show what can be configured on the component.

Watch the video that demonstrates how some of the options work:

Manage layout

To set the overall view of the component (grid, charts, or both), use the viewType property:

options: {
  viewType: "grid_charts"
}

Configure read-only mode

To make the report read-only, set the readOnly option to true:

options: {
  readOnly: true
}

You can also configure a partial read-only mode manually by turning off the features you don’t need:

Here’s an example of how you can configure a read-only mode manually:

options: {
  grid: {
    showFilter: false,
    dragging: false,
    disableExpandAndCollapse: false
  },
  chart: {
    showFilter: false,
    showMeasures: false
  },
  configuratorButton: false,
  drillThrough: false,
  sorting: false
}

Note We also suggest hiding the Toolbar when using the read-only mode.

Manage the Field List

Configure the Field List position

By default, the Field List appears as a pop-up window. To display it on the right side of the component, set the fieldListPosition property to right:

options: {
  fieldListPosition: "right"
}

Manage the Field List behavior after the initialization

When setting up Flexmonster, you can decide how the component should look right after load:

To open the Field List by default, use configuratorActive Live example.
If no slice is specified by default, the component chooses it itself. To show an empty grid instead, disable showDefaultSlice. In this case, the Field List will open automatically after loading Live example.

options: {
  configuratorActive: true,
  showDefaultSlice: false
}

Configure the Field List interface

You can configure the Field List interface with the following options:

To hide the button that toggles the Field List, set the configuratorButton to false Live example.
To specify whether the sigma icon for choosing an aggregation in the Field List is visible, use showAggregations Live example.
To show or hide the button for adding calculated values, configure showCalculatedValuesButton Live example.
To add a search bar for quick field navigation, use showFieldListSearch Live example.

options: {
  configuratorButton: false,
  showAggregations: true,
  showCalculatedValuesButton: false,
  showFieldListSearch: true
}

Configure filters

You can configure both the behavior and appearance of filter pop-up windows. For details, see the Filter by condition and Filter by selection guides.

Format date and time

You can configure how dates and times are displayed in the component. For more information and examples, see the Date and time formatting guide.

Configure the drill-through view

The drill-through view lets users see the underlying raw records that form a summarized cell.

By default, the drill-through view can be opened by double-clicking the cell or using the cell’s context menu. If you want to disable this pop-up window, set the drillThrough option to false:

options: {
  drillThrough: false
}

You can also configure how the drill-through view is displayed:

To specify whether the Field List toggle button is visible in the drill-through view, set the showDrillThroughConfigurator option Live example.
To limit the maximum number of rows returned in the drill-through, configure the drillThroughMaxRows option Live example. This option works only for "api", "microsoft analysis services", and "elasticsearch" data source types.

options: {
  showDrillThroughConfigurator: false,
  drillThroughMaxRows: 1000
}

Manage labels

You can adjust how labels are displayed in the component using the following options:

To make member names case-sensitive, enable the caseSensitiveMembers property Live example.
To show or hide aggregation labels, configure the showAggregationLabels option Live example.
To show captions instead of unique names in the Calculated Value editor, set the useCaptionsInCalculatedValueEditor property.

options: {
  caseSensitiveMembers: true,
  showAggregationLabels: true,
  useCaptionsInCalculatedValueEditor: true
}

Process empty data

You can configure how the component processes empty or missing values using the following options.

To distinguish between null, undefined, and empty string ("") values, use the distinguishNullUndefinedEmpty option:

options: {
  distinguishNullUndefinedEmpty: true
}

To define how the component behaves when the data source itself is empty, use the showEmptyData property. If set to true, an empty grid is displayed. If set to false, the component shows a pop-up error message and triggers an error event:

options: {
  showEmptyData: true
}

To specify where to show members with empty values on the grid and charts, configure the showEmptyValues option:

options: {
  showEmptyValues: "rows"
}

Note Learn about using the showEmptyValues option for multilevel hierarchies for the "api" data source type.

Enable or disable editing

Editing is available only in the drill-through view and the flat form. To allow users to change cell values directly in the component, enable the editing property:

options: {
  editing: true
}

Note Editing in Flexmonster does not affect the original data. However, you can use the datachanged event to track the changes and apply them to your data manually.

Other available options

You can configure more component-wide options:

See also