Data Grid

A Data Grid is used to display tabled data in a form.

In order to add a Data Grid drag the shape from the Form Toolbox onto the Form and drop it at the desired location.

Sample Data Grid

Properties

This Element utilizes beside the General Element Properties the following properties:

General Parameters

Grid Height	Specify the height of the data grid. You may choose between Standard Custom Stretch (uses the rest of the available space)
Grid Height Factor	Enter the factor by which the data grid should be higher (E.g.: 2 = double)
Min Height	Specify the minimum height, that the data grid should have
Stretch Proportion	Specify the size ratio of the control to other controls with stretch mode

Data Grid Parameters

Columns	Specify the Data Grid Columns with the Data Grid Column Editor
Grid mode	Select the structure of the rows. You may choose between Rectangular Tree
Tree variable	Choose a variable that identifies the child elements
Row Disabled	You may disable specific rows
Selection mode	Specify whether rows of the data grid can be selected
Variable	The name of the variable, where the Data is taken from

Workflow Parameters

Grid Action	You may specify an expression to be executed when an Action button is / Action buttons are pressed
On Drop	You may specify an expression to be executed when you insert content per drag and drop

The Data Grid Column Editor

The Data Grid Column Editor is used, to specify the columns in the Data Grid.

Column Types

IYOPRO provides the following column types:

Simple
A simple column simply shows a text value
Url
An URL column shows a text value as hyper-link. The underlying hyper-link must be specified in the parameter.
Sample: http://OpenEDM.local/OEWebService.asmx/OECallFunctionReturnTextFile?username=&password=&function=OBJ.ANYOBJ.WS.DOWNLOADLINKFILE&data={Binding OBJ_OBJID}
The binding specified in the url may reference another column of the bound data table of the grid. If {Binding Form:Var_Name} is used another form variable can be referenced.
Icon
An Icon column shows a text value as icon. The underlying hyper-link must be specified in the parameter.
Sample: http://OpenEDM.local/OEWebService.asmx/OEGetIcon?iconname={Binding OBJ_ICON}
The binding specified in the url may reference another column of the bound data table of the grid. If {Binding Form:Var_Name} is used another form variable can be referenced.
CheckBox
A CheckBox column shows a bool value as checkbox.
The underlying value will be 1=Checked, 0=Unchecked
ComboBox
A ComboBox column allows the user to choose a value from a given list
Function
A function shows a button with a predefined function. The function name must be specified in the parameter. The following functions are available:

DeleteRow
This function deletes the row where the function has been executed

Action
An Action shows a button which will execute a python script at the backend. This script is defined in Grid Action. The label of the button is the specified parameter or, if none is specified, the default "Action".
After pressing an action button, the dictionary of the line in which the button was pressed receives a new entry with "#ACTION" as key and the parameter as value. If no parameter was specified, the column name is set as value.
Sample: Get the row with "#ACTION" from a data grid with the variable "Data" and an Action button with the parameter "Details"
selected = filter(lambda row: '#ACTION' in row and row['#ACTION'] == 'Details', Form['Data'])

Create new Column

To Create a Column press the Add Button. In the upcoming dialog specify:

Header: The header of the column shown in the Datagrid

Data Binding: The technical name of the column in the underlying value dictionary

Delete Column

Select the column to delete and press the remove button

Change Column Order

Select a column to move and press the Up / Down buttons to rearrange the columns

Change Column Header

To change the header of a column double-click into the Column Header cell of the column and edit the value

Change Column Type

To change the type of a column double-click into the Column Type cell of the column and choose the value

Change Column Access

To change the access mode of a column double-click into the Column Access cell of the column and choose the value

Change Column Data Binding

To change the Data Binding of a column double-click into the Data Binding cell of the column and edit the value

Change Column Parameter

To change the Parameter of a column click the Edit button of the column and enter the value

Change Column Width

To change the width of a column double-click into the Width cell of the column and edit the value

Change Column Width Unit

To change the width unit of a column double-click into the Unit cell of the column and choose the value

(A Data Grid only handles one unit. If you use pixel and percent in the same Data Grid every pixel value will be handled as a percent value)

Change Column Justification

To change the justification of a column double-click into the Justify cell of the column and edit the value

Use the tree mode - an example

This example, based on a family tree, shows how to display data as a child element in tree mode:

Tree variable = child

Without a child element:

form["grid"] = [{"Name": "Jack", "Date of birth":"16.07.1960"}, {"Name": "Paul", "Date of birth":"03.09.1963"}]

With a child element using the tree variable:

form["grid"] = [{"Name": "Jack", "Date of birth":"16.07.1960", "child":[{"Name": "Lily", "Date of birth":"02.04.1992"}]},{"Name": "Paul", "Date of birth":"03.09.1963"}]

It would then look like this in the data grid: