Configuring and Formatting Grid

Grid allows you to showcase the ranking relationship by vertical arrangement of items ordered from top to bottom.

How to configure the table data to Grid

NOTE: Before adding the Grid widget to the design layout, make sure to create the data source. You can refer to this section to learn how to create a new data source.

To construct a grid, a minimum requirement of one column is needed. You can visualize both measure, calculated measure, and dimension column data in the grid control. You can also add a column that is hidden from the view by adding the column to the hidden columns section. The data of these columns will be hidden from the view but can be used for filtering other widgets in the dashboard.

The following steps explains data configuration of grid:

Step 1: Creating a grid widget

1. Drag and drop the Grid control icon from the tool box into design panel. You can find control in tool box by search.

2. Resize the widget as required.

Step 2: Configuring data into the widget

1. Click the Properties icon in the configuration panel.

2. The properties panel of the widget will be displayed as shown in the following screenshot. Now, switch to the ASSIGN DATA tab.

3. The data tab will be opened with available columns from the connected data source.

Column section

Bind column by dragging and dropping element from Measures or Dimension section to Columns section.

Image: Visualization of grid widget after configuration.

NOTE: * 1000 records are displayed by default for optimized Grid rendering performance (100 records in mobile view) and then additional rows will be scrolled virtually on demand. NOTE: NOTE: * If any of the Grid columns have conditional formatting, bar template or KPI applied only 100 records will be fetched by default and then scrolled on demand.

Hidden column section

You can drag and drop the elements to Hidden Columns if required. Based on the hidden column elements, the values will be shown in grid widget.

Step 3(Optional): Settings menu options

You can filter, format, and sort the data displayed in the widget from the settings menu options. To open the settings menu, click the settings icon.

Changing the aggregation type

You can change the aggregation type of the measure section from the settings menu as shown in the following screenshot. Refer to this section for more details.

Sorting

You can Sort the data using Sort option under Settings menu list. Click here for the detailed steps.

Filtering data

You can use Filters to change the values by selecting the Filter option. For more details, refer to Measure filter and dimension filter.

Measure formatting

You can format the elements by selecting the Format option. For more details, refer to measure format.

Image: Grid widget after applying the measure formatting

Renaming fields

The grid widget column names can be edited by using the Rename option provided in the settings menu.

Figure: Default column names after widget configuration

1. Click the settings menu icon and select the Rename menu option.

2. The column name can become editable now. Enter the required text and press enter key.

3. Now, the changes will be reflected in the grid widget.

How to format grid widget

You can format the grid for better illustration of the view that you require using the settings available in Properties tab.

General settings

Name

This allows you to set title for this grid widget.

Subtitle

This allow you to set subtitle for this grid widget.

Description

This allows you to set brief explanation about this grid widget.

Basic settings

Allow sorting

You can toggle the interactive sorting of columns in grid control using this option. It is enabled by default.

Fit to content

The columns in the grid can be made to auto size based on the length of the content of the column. This option is not enabled by default.

Allow Text Wrap

This allows you to wrapping whole the text if text length is high.

Horizontal grid lines

You can enable or disable horizontal grid lines in the grid control. This option is enabled by default.

Vertical grid lines

You can enable or disable vertical lines in the grid control. This option is enabled by default.

Show Border

This allows you to enable or disable the border of the grid control. This option is enabled by default.

Enable Alternative Row

This allows you to differentiate alternative rows of the grid by the background color. If you enable this property, alternative rows changes its background color as #F7F7F7 by default, it can be customized from Content Settings section.

Header Settings

This section allows you to format the grid header visibility, color, and font-size.

Show Header

This allows you to enable or disable the grid header. This option is enabled by default.

Foreground

You can customize the header font color. The default color of header font is #2d3748.

Background

You can customize the header background color. The default color of header background is #f3f7fa.

Row Height

You can customize the height of the grid header. The default value is 42 and maximum value is 120.

Auto Font Size

This property picks auto font-size for grid header when it is enabled, otherwise it allows you to choose fixed font-size from Font Size property. This option is enabled by default.

Font Size

You can enable this property by disabling Auto Font Size, it allows you to change font-size of grid header.

Content Settings

This section allows you to format the grid row height, color, and font-size.

Foreground

You can customize the row font color. The default color of row font is #000000.

Background

You can customize the row background color. The default color of row background is #ffffff.

Alternative Foreground

You can customize font color of alternative rows. The default color of alternative row font is #000000. This property can be displayed by enabling Enable Alternative Row.

Alternative Background

You can customize background color of alternative rows. The default color of alternative row background is #f7f7f7. This property can be displayed by enabling Enable Alternative Row.

Row Height

You can customize the height of the grid rows. The default value is 32 and maximum value is 120.

Auto Font Size

This property picks auto font-size for grid rows when it is enabled, otherwise it allows you to choose fixed font-size from Font Size property. This option is enabled by default.

Font Size

You can enable this property by disabling Auto Font Size, it allows you to change font-size of grid rows.

Filter

Allow filter

This allows you to enable a filter box for each column in the grid for easy filtering of data using this option.

Act as master widget

This allows you to define this grid widget as a master widget such that its filter action can be made to listen by other widgets in the dashboard.

Ignore Filter Actions

This allows you to define this grid widget to ignore responding to the filter actions applied on other widgets in dashboard.

Enable hierarchical filtering

Using this option, you can enable or disable hierarchical top N filtering. While applying Top N filter with multiple dimension columns, the data returned can be customized based on whether the filtering need to be done as flat or based on the hierarchy of dimension columns added.

When Hierarchical Filter option is enabled, the Top N will be applied for each individual column separately based on the number set for each column.

Column settings

This section allows you to format grid column based on alignment, width, and KPI customization.

Column Settings

This allows you to set width and align each column of the grid.

If you click the Customize button, the window will render like this.

Header Align - You can align the header of the column by left, right, and center alignment for each column.

Content Align - You can align the content of the column by left, right, and center alignment for each column.

Column Width - You can specify the width for a particular column by entering numeric values in the textbox. To set width to default, clear the entered value from the textbox.

You can add Key Performance Indicator (KPI) columns to grid control by navigating to KPI Expression window by clicking the Add KPI button from property panel at top.

Key Performance Indicator (KPI)

A Key Performance Indicator changes each column color depending on its relation to a target line value.

Creating a KPI Column

1. Click the + button to create a new KPI column.

2. It will open the KPI Expression dialog.

3. From the KPI Expression dialog, you can specify name of the KPI and the column whose values need to be considered as actual value and the column that need to be considered as target.

4. The value type can be set based on which the KPI will be calculated. The following value types are available:

   • Actual Variation (Default)
   • Actual Value
   • Percentage of variation
   • Percentage of target
   • Value and Percentage

5. The result can be set to showcase the result as gain or loss based on which the value will be visualized. You can choose the type as value or graphical bar to showcase the data in the column.

KPI column measure filtering

The KPI column can be filtered based on the measure values bind to the KPI. You can set measure filter by clicking the filter icon button, which will open the Measure Filter dialog from where you can specify the column and the condition for filtering the data showcased.

KPI Column measure formatting

The values showcased in KPI column can be formatted as any other measure column. You can open the Measure Formatting dialog box by clicking the format KPI column button. This allows you to handle different formatting options such as display type, representation, decimal places, and currency culture to the respective KPI column added.

Editing the saved KPI column

You can Edit KPI column by clicking the Edit KPI column icon.

Deleting a KPI column

You can delete KPI column by clicking the Delete KPI column.

This action cannot be undone.

Formatting

You can define the column value represented as text, bar, or condition-based coloring. This lists out the columns, which are added to the grid widget.

For each of those columns, the value representation can be configured using the options displayed at the right side.

Value

Select value as display type to get the column values represented as it is.

Bar

This property allows you to configure the color, shape, and range of progress bar from the Bar Settings dialog.

To customize the progress bar, open the Bar Settings dialog by selecting the Bar radio button from the Formatting section.

Dialog can be opened by selecting the Bar radio button for initial configuration, thereafter, click the Customize button.

Hide Bar Text Text of the progress bar can be able to enable or disable. By default, the text is enabled for the progress bar.

Bar Text The Progress bar text color can be changed by using this property.

Positive Bar The Progress bar background color for positive values can be changed.

Negative Bar The Progress bar background color for negative values can be changed.

Bar Style This property allows you to change bar shape. The dropdown contains two shapes Cylinder and Rectangle.

Minimum The minimum property renders the progress bar from the given value. It contains two modes in the dropdown to configure the minimum value,

Lowest Value - It takes the default minimum value to render the progress bar.

Customize - Selecting this property will enable the text box. Users can be able to customize the minimum value, by entering a numeric value in the text box.

Maximum The maximum property renders the progress bar up to the given value. It contains two modes in the dropdown to configure the maximum value,

Highest Value - It takes the default maximum value to render the progress bar.

Customize - Selecting this property will enable the text box. Users can be able to customize the maximum value, by entering a numeric value in the text box.

Click the OK button to apply the changes to the grid.

Advance setting

Select Advance setting to configure conditions and apply color to the cells based on that. Click here for more details.

Link

To configure the linking to URL or dashboard with the widget using its settings. For more details, refer to Linking.

Container appearance

This allows you to customize the widget container appearance and widget title’s properties, and provides options to enable or disable the widget exporting options. For more detailed information, refer to container appearance properties.

How to apply conditional formatting in grid

In case, if you have the requirement to highlight any data based on some conditions, you might be required to enable the advanced formatting option.

How to enable advanced formatting

In the properties pane, under the Formatting section, click the Advanced Setting radio button.

This will open the Conditional Formatting dialog.

Color types

Gradient: You can customize the cell background color of the grid columns using the gradient based conditional formatting. This is the default mode.

Rule based: This allows you to customize the cell color and the text style of the grid columns.

Gradient mode

Based on field

You can choose the field from the Based-On section to apply the conditions from the highlighted drop-down.

Summary type

You can select the summary type for the selected measure field.

Low, mid, and high values

You can define your range by entering the low, mid, and high values.

NOTE: It is optional, if no value is entered, then the ranges will be auto calculated based on the minimum and maximum values from the data source.

Rule bases mode

Value type

The value type drop-down allows you to choose whether to apply the direct value (specific number like three goals, order ID 10248) or percentage (values above 30% or 50 %).

Condition name

You can give a meaningful name to the applied conditions using the highlighted text box.

Condition type

Choose the condition for measure field from the highlighted conditions.

If you have selected the dimension as a based-on field and want to use text condition, the following text-based conditions are available.

NOTE: The text-based condition type will be enabled only when the dimension selected is used as the based-on field.

Value

Enter the condition value.

Font style

Allows you to choose the title font style. (Bold, Italic, Underline, and Superscript).

Case sensitivity

For the dimensions, case sensitive option is provided to choose whether the entered value is case sensitive or not.

Colors and icons

Select the checkbox provided near the options to customize the properties, similarly click the font style icons for applying them as shown in the following screenshot.

Figure: Applying the conditional formatting to highlight the stock availability based on ordered count and available count.

Figure: Grid widget the applied customization