DataGrid

Use this widget to access advanced features of a table.

The datagrid widget is available under INTEGRATION > DISPLAY. When designing application pages, drag-and-drop DataGrid to a container.

The following list of properties are specific to this widget. For common properties, refer to Page Components.

Table 1. DataGrid Properties
Property Description
BEHAVIOR > Selected Items Changed 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.
BEHAVIOR > Edited Rows Updated
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.
Height (px) - 0 equals dynamic Set the height in pixels. If set to 0, the datagrid table occupies 100% of its container.
Background Color Select a color to apply as a background color to the datagrid.
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 and open the filter from the respective column header.
  2. Select the check box for the values you want to use for filtering data.
  3. Select OK to apply the filter to the column.
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.
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 Font Size: Set the column header text font size in pixels.
  • Header Font Color: Select a font color for the column header text.
  • Body Font Size: Set the font size for text in the datagrid.
  • Body Font Color: Set the font color for text in the datagrid.
  • 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 Item 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.
  • Visible: Select/Clear the check box if you want to show/hide the column in the datagrid.
  • 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.
Output Target 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.

Add as many conditions as required. Each item here refers to a separate condition.

  • 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. 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.

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.