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.

NewItem494
Figure 1. Example Data Grid

Properties

In addition to the General Element Properties, this element utilizes the following properties:

NewItem1031

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.

NewItem754

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.
Example:

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.
Example:

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.
Example:
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:

NewItem497

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:

NewItem1066