DataGrid

Use this widget to access advanced features of a table.

Operations Hub New Layout Refer to Visuals Tab for more information on the layout of widgets in Configuration Hub.
Operations Hub Classic Layout Refer to About Widgets (Classic)

Datagrid Properties

Field Name Description
BEHAVIOR > Selected Items Changed

BEHAVIOR > Edited Rows Updated

 Use this property to define the action to be taken when a value is modified in the datagrid. For this behavior to work, you must also configure the Add Table Column for the modified value.
Source - Input Use any of these options to provide values from a data source.
  • Select the Query tab. Choose a query and select output fields to view data on the grid. The data grid table displays the output field names as column headers. If Alias is provided for any output field, then the alias name overrides the column header name.
  • Select the Global tab. Choose an output field value that is available as a global parameter.
  • Select the Formula tab. Add a formula that returns columns as output.
Note: Currently we do not support manually passing values to the widget.
Use Raw Format Select the check box to display numbers in raw format.

For example, a numeric value with 5 or more decimal places is shown as it is, and not rounded off.
Number of decimals This option appears if you do not want to display numbers in raw format.

In that case, enter the decimal places (0-7) to consider after the decimal point to format large numbers. Based on the decimals, the value is rounded off to the nearest whole number.

The decimals will apply to all the datagrid columns that contain numeric values.
Height (px) - 0 equals dynamic Set the height in pixels. If set to 0, the datagrid table occupies 100% of its container.
Border, Row and Column Lines Width (px) Set the line width for the datagrid table border, rows, and columns.
Border Color Select a color for the datagrid table border.
Show Borders Select the check box to apply a border to the datagrid table. To remove the border, clear the check box.
Show Column Lines Select the check box to display column gridlines. To remove gridlines, clear the check box.
Show Row Lines Select the check box to display row gridlines. To remove gridlines, clear the check box.
Enable Search Select the check box to add a search field above the datagrid widget to search the entire table.
Allow Grouping Select the check box to allow grouping of columns at runtime.
  • The message Drag a column header here to group by that column is displayed at the top of the table.
  • Select the column you want to group by, drag and drop on the message.
  • You can also group data by multiple columns. Drag and drop columns on the message one after the other to group data accordingly.

To undo grouping, drag the columns back to their previous position.
Allow Filtering Select the check box to allow filtering of data in every column.
At runtime, to filter values:
  1. Select the filter icon from the respective column header.
  2. Select the check box for the data you want to filter out.
  3. Select OK.
Allow Edit Select the check box if you want to modify grid data. An edit option appears at runtime next to each row.

The modified data value must be sent to a target data source. To use the edit option successfully, configure the Add Table Column and Output Target properties.

Changes are written to the target, and not to the input data source. Hence, you may lose edits on refreshing the page.
Allow Export Select the check box to allow exporting data at runtime.
Allow Show/Hide Columns If you select this check box, a column chooser icon appears on top of the datagrid at runtime.

A column chooser dialog appears, wherein you can drag-and-drop the datagrid columns you want to remove from the table. Similarly, you can also add the removed columns back to the table.
Allow Column Filtering If you select this check box, a filter icon appears in every column to filter out datagrid rows.
At runtime, to filter values:
  1. Select the filter icon from the respective column header.
  2. Select the check box for the data you want to filter out.
  3. Select OK.
Pages or scroll If the number of rows exceed page size, then specify whether you want to browse through pages, or scroll through data.
  • Select Pages to divide and display grid data in separate pages. Enter the number of rows to display per page in Page Size.
  • Select Scroll to add a scroll bar to the datagrid.
Rows Use these properties to configure datagrid table rows:
  • Header Alignment: Align the data in the header either left, right, or center. Default alignment is based on the data type, whether numeric or string.
  • Header Font Family: Select a font family for the header text.
  • Header Font Size: Set a font size in pixels for the header text.
  • Header Font Weight: Choose whether the header text should appear as Normal, Bold, or Italic.
  • Header Font Color: Select a font color for the header text.
  • Header Background Color: Select a background color for the table headers.
  • Body Font Family: Select a font family for the body text.
  • Body Font Size: Set a font size in pixels for the body text.
  • Body Font Weight: Choose whether the body text should appear as Normal, Bold, or Italic.
  • Body Font Color: Select a font color for the body text.
  • Body Background Color: Select a background color for the table cell body.
  • Icon or Image size (px): Set the icon/image size in pixels. The default value is 40px.
  • Selection Mode: Single allows to select a single row in the grid. Multiple allows to select multiple rows using a check box. None disables row selection.
Add Animation Use this property to highlight a row when a condition is met. Boolean values are represented with 1 or 0.

This property is similar to Add Cell Animation.
Add Table Column Use this property to customize the datagrid columns. Select +Add Column to show configuring options.
Note: Add only the columns you want to customize. It is not required to add all the columns.

To organize table columns:

  • Use and to rearrange order of columns in the datagrid.
  • To delete a column, select next to it.
Column Use these properties to configure a column:
  • Data Field: Provide the column header name. This value must match the output field name (returned by query).

    If an Alias is configured for the output field for the specific column, then the value must match the alias name.

  • Data Type: Specify the type of data in the column. For example, select Picture if the column contains image URLs and images will be retrieved from the data source.
  • Min Width (px): Set a default minimum width for each column. The column will not decrease beyond this minimum width if the volume of data is less.
  • Alignment: Align the data in the column either left, right, or center. Default alignment is based on the data type, whether numeric or string.
  • Visible: Select/Clear the check box if you want to show/hide the column in the datagrid.
  • Hide Row if Empty: Select the check box to hide any row in the datagrid that contains only empty or null values in its cells. This helps to create more compact and visually appealing data display, particularly when you want to focus on rows with useful information.
  • Show Header Name: Select/Clear the check box to show/hide the header text in the datagrid column header.
  • Allow Filtering: Select/Clear the check box to enable/disable filtering on column.
  • Allow Sorting: Select/Clear the check box to enable/disable sorting by this column.
  • Allow Edit: Select/Clear the check box to enable/disable editing the column data.
  • Enable Summary: Select/Clear the check box to enable/disable showing the summary totals for the column.
  • Summary Type: If you enabled summary, you must select a summary type. The summary type depends on the type of data in the column.
    • sum: Calculates a total for all values in the column.
    • Minimum: The smallest value in the column.
    • Maximum: The largest value in the column.
    • Average: Calculates an average of all values in the column.
    • count: Counts the total number of values present in the column.
Output Target Select + Add Output Target to specify the target data source for column data. At runtime, when column data is selected/modified, the target specified in this property is triggered.
  • Choose a query input value as target. (OR) Add or choose a global value as target.
  • Select Unix timestamp format to represent all time zones at once.
Add Image Use this property to deliver an image when a condition is met. Boolean values are represented with 1 or 0.

Select +Add Image to add a condition. You can add as many conditions as required.

  • Condition: Create a condition for the column data. For example, if column value is > than 150, then update an image.
  • Image or Font Awesome Icon: Select whether you want to load an image, or icons from the Font Awesome Free library.
  • URL or Icon name: For image, enter its URL address. Also ensure that the column Data Type is Picture. For font awesome icon, enter the icon name.
  • Icon Color: Select a color for the icon.
Add Cell Animation Use this property to highlight a cell when a condition is met. Select +Add Cell Animation to add as many conditions as required. Boolean values are represented with 1 or 0.
  • Column: Select a column and create a condition for it. For example, if the value in Column 1 is = to Alarm 1, then trigger these changes.
  • Font Color: Change cell text color to the selected font color.
  • Background Color: Change cell color to the selected background color.
Group By Set the default grouping of data by column.
  • Columns: Select a column for default grouping.
  • Expanded: Select/Clear the check box to expand/collapse data by default.
Sort By Set the default sorting for data grid columns. For example, you can add multiple items to configure default sorting first by column X, then by column Y, etc in an ascending/descending order. The sequence of sorting order appears at runtime indicated by a number.

At runtime:

  • Hold the Shift key and select column headers to sort in a sequential order.
  • Hold the Ctrl key and select column headers to clear any column in a sequence.
Selected Rows Output Specify the target data source for a selected row data. A separated string or array can be written to a global variable.
  1. Choose a query input value as target. (OR) Add or choose a global value as target.
  2. Select the column to which you want to write data, and in which format.
  3. Specify an output separator if format is separated string.
Hidden Select this check box if you want to hide the plug-in. To show the hidden plug-in in Operations Hub new layout, go to Page Visuals and under Action column, select for the hidden plug-in. See Page Visuals Tab.

DataGrid at Runtime

You have the option to export and download the datagrid table data. Select icon that appears at runtime at the top of the table to export the data to an Excel file.