Skip to main content
Version: Next

Grids

Grids are the main component in AWE to show data lists. It is defined by grid and columns:

  • The grid is the container of the data list. It has the query to load and a set of attributes to define the behaviour of the grid.
  • Each column contains the source of the data from the data list, the label of the column and other attributes to manage each column cell.

There is also a group-header tag which is used to show a second level header over a group of column headers.

Grid

XML skeleton

To define a grid or a treegrid in AWE you must follow the next structure:

<grid id="[grid-identifier]" ...>
<column ... ></column>
...
<group-header ...>
<column ...></column>
...
</group-header>
...
<button ... > ... </button>
...
<context-button ...> ... </context button>
...
</grid>

Grid structure

<grid id="[grid-id]" style="[grid-style]" 
multiselect="[grid-is-multiselect]" checkbox-multiselect="[checkbox-multiselectable]" editable="[grid-is-editable]" send-operations="[grid-is-multioperation]" initial-load="[initial-load]" server-action="[server-action]" target-action="[target-action]" max="[elements-per-page] pagination-disabled="[pagination-disabled]"">
...
</grid>

General attributes

AttributeUseTypeDescriptionValues
idRequiredStringGrid identifier. For reference purposes
labelOptionalStringGrid title (For printing only)Note: You can use i18n files (locales)
styleOptionalStringGrid CSS classes
initial-loadOptionalStringServer action call to load the grid data. It only supports query value
server-actionOptionalStringServer action callSee server action list
target-actionOptionalStringTarget to call on the server
maxOptionalIntegerMaximum number of elements to retrieve per page
pagination-disabledOptionalBooleanDisabled the pagination element of gridNote: Default value false
pager-valuesOptionalStringEnable grid pager. Set the value list with the number of rows per pageExample: pager-value="5,25,50,100"
load-allOptionalBooleanLoad all values of the grid and sort and paginate locallyNote: Default value is false
send-allOptionalBooleanSend all values of the grid to the server instead of selected ones. (Selected ones will be sent on .selected parameter)Note: Default value is false
helpOptionalStringHelp text for the gridNote: You can use i18n files (locales)
help-imageOptionalStringHelp image for the gridThis must be a image path
icon-loadingOptionalStringSet the loading iconspinner (default), square, circles, carpet, dots, folding, squarebar, circlebar, cubes, icon, custom, none
row-numbersOptionalBooleanWhether to show row numbers or notDefault value is true
row-heightOptionalIntegerSet the row height in pixels
validate-on-saveOptionalBooleanSet true to validate the selected row when clicking the save buttonDefault value is false

Column structure

<column label="[column-label]" name="[column-name]" sort-field="[sort-field]" align="[text-align]" 
charlength="[column-width-chars]" component="[column-component]" >
<dependency ...> ... </dependency>
...
</column>

Column attributes

AttributeUseTypeDescriptionValues
nameRequiredStringColumn identifier. For reference purposes
sort-fieldOptionalStringSort field to sort by (if not treegrid)
typeOptionalStringField type (for printing purposes)string, integer, float or date
hiddenOptionalBooleanColumn is not visibleDefault value is false
alignOptionalStringColumn is not visibleleft, center or right
widthOptionalIntegerColumn width in pixels or percent.Ex.: width = "10" or width = "20%" Note: You can use '*' value for auto.
sortableOptionalBooleanField is sortable (if not treegrid)Default value is true
movableOptionalBooleanAllows to move column position in the gridDefault value is true
sendableOptionalBooleanColumn data must be sent to the serverDefault value is true
charlengthOptionalIntegerColumn width in chars
labelOptionalStringColumn labelNote: You can use i18n files (locales)
styleOptionalStringColumn css classCss class to apply to the column
componentOptionalStringColumn type (if editable)See components
maxOptionalIntegerMax number of records to retrieve when the column is initialized with target-actionDefault value is 30
visibilityOptionalBooleanInitial visibility of the column componentDefault value is true
frozenOptionalBooleanKeep the column fixed out of the horizontal scroll. WARNING: Don't use this attribute if header has more than one line heightDefault value is false

Note: When a column is editable (it has a component) all attributes of criteria can be used in the column. See criteria attributes for more references.

Column components

ComponentDescription
textText column component. See text criterion
passwordPassword column component. See password criterion
textareaTextarea column component. See textarea criterion
numericNumeric column component. See numeric criterion
dateDate column component. See date criterion
timeTime column component. See time criterion
filtered-dateFiltered date column component. See filtered date criterion
selectSelect column component. See select criterion
suggestSuggest column component. See suggest criterion
select-multipleSelect multiple column component. See select multiple criterion
suggest-multipleSuggest multiple column component. See suggest multiple criterion
checkboxCheckbox column component. See checkbox criterion
colorColor column component. See color criterion
uploaderUploader column component. See uploader criterion
text-viewText view column component. See text view criterion
formatted-textHTML Text column component. See formatted-text component
iconIcon column component. Use it for showing font awesome icons in a column.
imageImage column component. Use it for showing images in a column.
buttonComponent which allows the user to click a button which launches a set of button-action
progressProgress column component. Useful for showing a progress bar in a column. (Work in progress)
sparklineSparkline column component. Useful for showing a sparkline chart in a column. (Work in progress)

Specific row style

When you need set specific style to all cells of one row (ex.: change background color), you can add a new field called _style_ with CSS style name.

<query id="MyQuery" >
<field id="_style_" alias="_style_" variable="styleClass"/>
<variable id="styleClass" type="STRING" value="red"/>
</query>

Specific column components

There are several components developed specifically to be used in grid cells. These components need a special structure on the query which fills them:

<compound alias="specialCell">
<computed alias="value" format="xxx"/>
<computed alias="label" format="xxx" translate="EnumTranslate"/>
</compound>

These are the cells which use the special structure:

Standard cell without components

When you send a compound structure to a standard cell, you can use the following attributes:

AttributeDescription
valueValue which will be sent to the server
labelText which will be shown. You can use i18n files (locales)
titleText to show when you move the mouse over the icon. You can use i18n files (locales)
cell-styleCSS class to format the contents

Text view column component

This component is very useful to show an styled text inside a grid with an icon. The compound attributes to fill this component are the following:

AttributeDescription
valueValue which will be sent to the server
labelText which will be shown. You can use i18n files (locales)
titleText to show when you move the mouse over the icon. You can use i18n files (locales)
iconIcon class. You can check all iconset at icons screen
unitUnit label (shown on the right of the cell). You can use i18n files (locales)
styleCSS class to format the contents

Icon column component

IconColumn

This component is very useful to show an icon inside a grid. The compound attributes to fill this component are the following:

AttributeDescription
valueValue which will be sent to the server
labelText to show when you move the mouse over the icon. You can use i18n files (locales)
titleText to show when you move the mouse over the icon. You can use i18n files (locales)
iconIcon class. You can check all iconset at icons screen
styleCSS class to format the contents

Formatted text column component

This component is used to show HTML code inside a grid. There are two type of HTML tags allowed:

  • <format style="[text class]">: Formatted text.
  • <br>: New line

Image column component

ImageColumn

This component is used to show an image inside a grid. The compound attributes to fill this component are the following:

AttributeDescription
valueValue which will be sent to the server
labelAlternate text. You can use i18n files (locales)
titleText to show when you move the mouse over the icon. You can use i18n files (locales)
imageImage path
styleCSS class to format the contents

Button column component

Button Column

A button column is a component which allows to launch a set of button-action defined on column.

AttributeDescription
valueValue which will be sent to the server
labelText to show in the button. You can use i18n files (locales)
titleText to show when you move the mouse over the button. You can use i18n files (locales)
iconIcon class to show in the button. You can check all iconsets at icons screen
styleCSS class to format the contents

Progress column component

Progress

The progress component is very useful to show the status of a job, or a task.

AttributeDescription
valueValue (in percentage (0-100) of the progress bar
labelText to show in the progress bar (ie percentage)
titleText to show when you move the mouse over the button. You can use i18n files (locales)
styleCSS class to format the contents

Sparkline column component

(Work in progress)

Group header structure

<group-header label="[group-header-label]" name="[group-header-name]">
<column...> ... </column>
...
</group-header>
GroupHeader

Group header attributes

AttributeUseTypeDescriptionValues
nameRequiredStringGroup header identifier. For reference purposes
labelOptionalStringGroup header labelNote: You can use i18n files (locales)

Basic grid

The basic grid is the standard grid without a tree structure. It can be defined as single-select grid, multiselect grid, editable grid or multi-option grid, and combinations between them.

BasicGrid

Basic grid specific attributes

AttributeTypeDescriptionValues
show-totalsBooleanShow a line with totalizersDefault value is false
row-numbersBooleanShow the row numbersDefault value is false

Multiselect grid

MultiselectGrid

Multiselect grid specific attributes

AttributeTypeDescriptionValues
multiselectBooleanAllow selecting more than one lineDefault value is false
checkbox-multiselectBooleanAllow selecting more than one line, but clicking only on the side checkboxesDefault value is false

Tree grid

The tree grid is a grid that can be expanded as a tree. It can be defined as standard tree, loading tree, editable tree or multi-option tree, and combinations between them.

The data structure needs an identifier per row, and also a parent identifier, with no value if the row is a root row (with no parent). The identifier field must be defined on the grid tree-id attribute, and the parent must be defined on the tree-parent attribute.

TreeGrid

Tree grid specific attributes

AttributeTypeDescriptionValues
treegridBooleanSet grid as treegridDefault value is false
tree-idStringDefine identifier fieldDefault value is id
tree-parentStringDefine parent fieldDefault value is parent
tree-leafStringDefine the 'is leaf' fieldDefault value is isLeaf
expand-columnStringName of the column to be expandedMust be a column identifier
initial-levelIntegerInitial level to expandDefault value is 1
icon-expandStringIcon of a branch without expandNote: You can check all iconsets at icons screen
icon-collapseStringIcon of a expanded branchNote: You can check all iconsets at icons screen
icon-leafStringIcon of a leaf branchNote: You can check all iconsets at icons screen

Editable grid

EditableGrid

Editable grid specific attributes

AttributeTypeDescriptionValues
editableBooleanAllow editing the grid rowsDefault value is false

Multioption grid

MultioptionGrid

Note: The multioption grid will send a variable called [GridId]-RowTyp (where [GridId] is the identifier of the grid) containing the action done in each row (INSERT, UPDATE or DELETE actions)

Multioption grid specific attributes

AttributeTypeDescriptionValues
send-operationsBooleanAllow editing the grid rows, but sending only the modified linesDefault value is false

Grid buttons

You can add button elements to perform actions over the grids. For instance, a pair of buttons to insert and delete rows.

GridButtons
<grid id="GrdKeyLst" style="expand" initial-load="query" server-action="data" target-action="AweKeyLst" send-operations="true" editable="true" max="40">
<column label="COLUMN_NAM" name="KeyNam" sort-field="KeyNam" align="left" charlength="20" component="text" validation="required">
<dependency source-type="query" server-action="unique" target-action="AweKeyUni">
<dependency-element id="GrdKeyLst" column="KeyNam" attribute="currentRowValue" />
</dependency>
</column>
...
<button label="BUTTON_NEW" icon="plus-circle" id="ButGrdKeyLstAdd">
<button-action type="add-row" target="GrdKeyLst" silent="true" />
</button>
<button label="BUTTON_DELETE" icon="trash" id="ButGrdKeyLstDel">
<button-action type="delete-row" target="GrdKeyLst" silent="true" />
<dependency target-type="enable" initial="true">
<dependency-element id="GrdKeyLst" attribute="selectedRows" condition="==" value="1" />
</dependency>
</button>
</grid>

Context menu

You can define a context-menu inside the grid to help the user do actions with the selected rows. See context menu.

GridContextMenu

Variables

The grid component sends some specific variables to the server, depending on its status and attributes. Here is the list of variables that can be sent by the grid component:

VariableTypeConditionDescription
[GridName]ArrayAlwaysList of selected lines identifiers
[ColumnName]Arraysend-all="false"List of selected lines column values (for each column)
[ColumnName]Arraysend-all="true"List of all column values (for each column)
[ColumnName].selectedValue/ArrayAlwaysList of selected lines column values (for each column). If there is only one row selected, it will send only the value instead of an array
selectedRowAddressJsonNodeWhen there is only one line selectedJson node with the address of the selected row: view, component and row id
sortArrayAlwaysList of JsonNodes with the grid sort information (id: column id, direction: sort direction)
[GridName].dataJsonNodeAlwaysList of grid extra information (page, max records, sort information, etc)

The multioperation grid sends the variables in a different way than the other grids:

VariableTypeConditionDescription
[GridName]Integermultioperation="true"Number of sent operations
[GridName].RowTypArraymultioperation="true"List of operations required for each column (only for the rows with operations)
[GridName]-idArraymultioperation="true"List of row identifiers for rows with operations
[ColumnName]Arraymultioperation="true"List of column values for rows with operations (for each column)
[ColumnName].selectedValue/ArrayAlwaysList of selected lines column values (for each column). If there is only one row selected, it will send only the value instead of an array
selectedRowAddressJsonNodeWhen there is only one line selectedJson node with the address of the selected row: view, component and row id
sortArrayAlwaysList of JsonNodes with the grid sort information (id: column id, direction: sort direction)
[GridName].dataJsonNodeAlwaysList of grid extra information (page, max records, sort information, etc)

Note: See samples of usages on Service Definition