Configuring Data Grids
1. Overview |
Data grids display data in rows and columns.
STEP 1: Create a Grid type report part.
STEP 2: Drag and drop required data fields into the Columns section.
STEP 3: Customize the look and feel of your grid using the Report Part Properties tab on the right.
For example, you may wish to set a border and background color for your table.
The available properties are listed in 7 sections.
General Info
Table
Columns
Rows
Headers
Grouping
View
2. Common Grid Properties |
2.1 Define border
STEP 1: Click the gear icon (⚙) to open the Border Settings pop-up.
STEP 2: Select pre-defined border styles:
None (default)
Outside
Inside
All
STEP 3: Or click specific border style buttons in the preview section.
STEP 4: Select a line pattern: Solid (default), Dot, or Dash.
STEP 5: Select a border color and thickness (pixels).
STEP 6: Click OK to close the pop-up.
2.2 Set the background and alternative background color
STEP 1: Click the Background Color option and select a color.
STEP 2: To apply alternating row or column colors, select Alternative Background Color.
Options:
None: No alternative background color applied.
Rows: Apply to rows.
Columns: Apply to columns.
Rows and Columns: Apply to both rows and columns.
2.3 Column width and word wrap
STEP 1: Set the column width in pixels.
STEP 2: Turn column word wrap on or off.
2.4 Header formatting
Choose a header font face and font size.
3. Adding Column Groups |
You can group a set of columns by applying the same Column Group name to them as shown.
4. Passing a parameter to a custom URL |
STEP 1: Select the field to make clickable.
STEP 2: Click the Custom URL option in the Field Properties panel.
STEP 3: In the pop-up, enter the URL and parameter in the required format.
Example: Make the project’s Location name clickable to open Google search results.
Example: https://www.google.com/search?q=%7B%5BLocation%5D%7D
5. Embedding Javascript |
STEP 1: Select the field to enable JavaScript.
STEP 2: Click the Embedded JavaScript option in the Field Properties panel.
STEP 3: In the pop-up, enter your JavaScript code.
Example: Display a simple alert when the user clicks the field name.