Data Grid

Alternative Grid type. Supports formatting, conditional highlighting, sorting, grouping, and search. It also supports Excel downloads sparkline charts within cells and has a different look and feel than the basic grid type.

Display & Formatting

Field	Interpretation
Title Font Color	Set the title font color of the widget
Title Font Size	The default title font size is 14px.
Font size	To set the size of the font
Font color	To set the color of the font
Grid line thickness	Grid line thickness value
Cell Padding	Padding of cell content
Data Format	Formatting for one or more fields
Auto Scale (Sizing)	This turns the proportions of the grid from absolute sizing to a variable based on the size of the container.  This will make the font sizes, row, and column height/widths based on the container, not an absolute pixel size. It ensures that anybody viewing the grid can see the same regardless of screen size. For example, if one screen size displays 5 records, the same 5 records will show in a smaller screen size, and the ratio of the column widths will be the same. The footer size ratio may also need to be adjusted.

Column and Header Settings

Field	Interpretation
Header Background Color	Defaults to dark blue
Header Font Color	Defaults to black
Header Height	Height of header
Minimum Column Width	To enable horizontal scroll instead of fitting the grid into the viewport
Column Ordering	Column Ordering
Hide Column	To hide the column from the grid
Reset Column Width	Reset each column width to the default
Disable Click to Sort	When checked, the grid does not sort when the user clicks on a column
Merge cells with same values	When checked, it merges the cells that have the same value
Column Lines	When checked, it shows the column's vertical divider lines

 

Column/Header Formatting Options:

The conditional formatting on columns is based on the values in the grid.

Users can customize the columns by applying the desired options to click on the ellipsis icon (three-dot) on each column of your datagrid.

 

Sort

Ascending: Select this to sort the column data from the lowest value to the highest.

Descending: Select this to sort the column data from the highest value to the lowest.

Default: Select to reset by default

 

Align Header

Left: Select this to align the column header on the left side

Right: Select this to align the column header on the right side

Center: Select this to align the column header on the center

 

Align

Left: Select this to align the column data on the left side

Right: Select this to align the column data on the right side

Center: Select this to align the column data on the center

 

Format

Format cells: This allows you to format each column by - Number - Currency - Date - Percentage - HTML - Array

Conditional Formatting: This allows you to customize each column on the datagrid to highlight it differently based on your selection. You can also set the gradient color by applying the code values. Read more here. Apply the following options: Condition, Value, Cell Color, Font Color, and Row Level. For example, If you want to sort the ‘Employment Status’ column by any status or color specifically, you can apply these conditions to the ‘Employment Status’ column and filter and highlight the column based on your interest. Additionally, you can add multiple conditions based on your interest by clicking on the “+” icon.

Text Wrap: Select this to continue on the text on the next line within the same text box or if it should overflow outside the box.

Users can set the Gradient condition type for the data grid for a gradient effect on the data grid graph. There is an option to set the minimum and maximum gradient values, which also accepts an auto-defined value. Users can also set the minimum, middle, and max colors and font colors. The row level checkbox can be checked to apply the formatting for the row.

 

Row Settings

Field	Interpretation
Color of Odd Rows	Default to white
Color of Even Rows	Default to white
Row Height	The height of each row in the grid

Aggregation and Grouping

Field	Interpretation
Aggregation	Aggregation for group
Grouping	Grouping by some parameters
Aggregation on top	Check to show aggregation on top

Widget Menu

Field	Interpretation
Show Title	Show Title on Widget
Analyze	Show Analyze menu
Alerts	Show Alert icon
Filters	Show Filter icon
Drilldowns	Show Drilldowns menu
Query	Show Query menu
Data/Export	Show Data/Export menu
Data Diagram	Show Data Diagram
Share	Show Share menu
Refresh	Show Refresh menu
Maximize	Show Maximize menu
Remove from Dashboard	Show Remove from the Dashboard menu

Advanced Configuration

Field	Interpretation
Scroll Limit	Scroll paging; default is 1000 records
Internal Sparkline Charts	Allows you to create charts within cells to see trends
Change Dataset	Change to a different dataset
On Click Event Handler	Define custom javascript behavior when a point is clicked

Creating Sparklines: To create a sparkline within a chart, your data must first be in array format.

If your data is not in array format, you can use the ARRAY() function in Cloud9QL. You can add an array function via Settings > Data Transformation > Add Function.

In the examples below, we have illustrated adding the array formats for six different visualizations, including line, area, bar, spine, and more.

Line Visualization: Click the +Add Function button to add an array format for a line visualization.

Area Visualization: Click the +Add Function button to add an array format for an area visualization.

Bar Visualization: Click the +Add Function button to add an array format for a bar visualization.

Spline Visualization: Click the +Add Function button to add an array format for spline visualization.

Spline Area Visualization: Click the +Add Function button to add an array format for spline area visualization.

Pie Visualization: Click the +Add Function button to add an array format for a pie visualization.

Once your data is in array format, you can turn your data into sparklines via settings.