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 GEDataGrid 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
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.
Note: At runtime, consider these limitations for searching data:
  • Partial search is allowed only for string data type.
  • To search for numeric, boolean, or datetime values, enter the complete value to find a match.
  • Complete datetime string search does not work for current date format.
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.
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.
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.

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. If an Alias is configured for the output field for the specific column, then the alias name overrides the value specified in this field.
  • 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.
Output Target Specify the target global data for the colum 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.

DataGrid at Runtime