.default('img/Grid.png')})
## XML skeleton
To define a **grid** or a **treegrid** in AWE you must follow the next structure:
```xml
.default('img/IconColumn.png')})
This component is very useful to show an icon inside a grid. The **compound attributes** to fill this component are the following:
| Attribute | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------|
| value | Value which will be sent to the server |
| label | Text to show when you move the mouse over the icon. You can use [i18n](i18n-internationalization.md) files (locales) |
| title | Text to show when you move the mouse over the icon. You can use [i18n](i18n-internationalization.md) files (locales) |
| icon | Icon class. You can check all iconset at [FontAwesome](http://fontawesome.io/icons/) |
| style | CSS 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:
* ``: New line #### Image column component
.default('img/ImageColumn.png')})
This component is used to show an image inside a grid. The **compound attributes** to fill this component are the following:
| Attribute | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------|
| value | Value which will be sent to the server |
| label | Alternate text. You can use [i18n](i18n-internationalization.md) files (locales) |
| title | Text to show when you move the mouse over the icon. You can use [i18n](i18n-internationalization.md) files (locales) |
| image | Image path |
| style | CSS class to format the contents |
#### Button column component
.default('img/DialogColumn.png')})
A button column is a component which allows to launch a set of `button-action` defined on column.
| Attribute | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------|
| value | Value which will be sent to the server |
| label | Text to show in the button. You can use [i18n](i18n-internationalization.md) files (locales) |
| title | Text to show when you move the mouse over the button. You can use [i18n](i18n-internationalization.md) files (locales) |
| icon | Icon class to show in the button. You can check all iconset at [FontAwesome](http://fontawesome.io/icons/) |
| style | CSS class to format the contents |
#### Progress column component
.default('img/Progress.png')})
The progress component is very useful to show the status of a job, or a task.
| Attribute | Description |
| ----------- | ------------------------------------------------------------------------------------------------------------|
| value | Value (in percentage (0-100) of the progress bar |
| label | Text to show in the progress bar (ie percentage) |
| title | Text to show when you move the mouse over the button. You can use [i18n](i18n-internationalization.md) files (locales) |
| style | CSS class to format the contents |
#### Sparkline column component
(Work in progress)
## Group header structure
```xml
.default('img/GroupHeader.png')})
### Group header attributes
| Attribute | Use | Type | Description | Values |
| ----------- | ------------ |-----------|-----------------------------|----------------------------------------------------|
| name | **Required** | String | Group header identifier. For reference purposes | |
| label | Optional | String | Group header label | **Note:** You can use [i18n](i18n-internationalization.md) 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.
.default('img/BasicGrid.png')})
### Basic grid specific attributes
| Attribute | Type | Description | Values |
| ------------- | ---------- | --------------------------- | --------------------------- |
| show-totals | Boolean | Show a line with totalizers | Default value is `false` |
| row-numbers | Boolean | Show the row numbers | Default value is `false` |
## Multiselect grid
.default('img/MultiselectGrid.png')})
### Multiselect grid specific attributes
| Attribute | Type | Description | Values |
| ------------- | ---------- | ---------------------------------- | --------------------------- |
| multiselect | Boolean | Allow selecting more than one line | Default value is `false` |
| checkbox-multiselect | Boolean | Allow selecting more than one line, but clicking **only** on the side checkboxes | Default 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.
.default('img/TreeGrid.png')})
### Tree grid specific attributes
| Attribute | Type | Description | Values |
| ------------- | ---------- | --------------------------- | --------------------------- |
| treegrid | Boolean | Set grid as treegrid | Default value is `false` |
| tree-id | String | Define identifier field | Default value is `id` |
| tree-parent | String | Define parent field | Default value is `parent` |
| tree-leaf | String | Define the 'is leaf' field | Default value is `isLeaf` |
| expand-column | String | Name of the column to be expanded | Must be a column identifier |
| initial-level | Integer | Initial level to expand | Default value is `1` |
| icon-expand | String | Icon of a branch without expand | **Note:** You can check all iconset at [FontAwesome](http://fontawesome.io/icons/) |
| icon-collapse | String | Icon of a expanded branch | **Note:** You can check all iconset at [FontAwesome](http://fontawesome.io/icons/) |
| icon-leaf | String | Icon of a leaf branch | **Note:** You can check all iconset at [FontAwesome](http://fontawesome.io/icons/) |
## Editable grid
.default('img/EditableGrid.png')})
### Editable grid specific attributes
| Attribute | Type | Description | Values |
| ------------- | -------- | ---------------------------------- | --------------------------- |
| editable | Boolean | Allow editing the grid rows | Default value is `false` |
## Multioption grid
.default('img/MultioptionGrid.png')})
> **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
| Attribute | Type | Description | Values |
| --------------- | -------- | ---------------------------------------------------------------- | ------------------------ |
| send-operations | Boolean | Allow editing the grid rows, but sending only the modified lines | Default 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.
.default('img/GridButtons.png')})
```xml
.default('img/GridContextMenu.png')})
## 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:
| Variable | Type | Condition | Description |
| ----------------- | -------- | ------------- | ------------------------------------------------------ |
| _[GridName]_ | Array | Always | List of selected lines identifiers |
| _[ColumnName]_ | Array | `send-all="false"` | List of selected lines column values (for each column) |
| _[ColumnName]_ | Array | `send-all="true"` | List of all column values (for each column) |
| _[ColumnName]_.selected | Value/Array | Always | List 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 |
| selectedRowAddress | JsonNode | When there is only one line selected | Json node with the `address` of the selected row: view, component and row id |
| sort | Array | Always | List of JsonNodes with the grid sort information (`id`: column id, `direction`: sort direction) |
| _[GridName]_.data | JsonNode | Always | List of grid extra information (page, max records, sort information, etc) |
The multioperation grid sends the variables in a different way than the other grids:
| Variable | Type | Condition | Description |
| ----------------- | -------- | ------------------- | ------------------------------------------------------ |
| _[GridName]_ | Integer | `multioperation="true"` | Number of sent operations |
| _[GridName]_.RowTyp | Array | `multioperation="true"` | List of operations required for each column (only for the rows with operations) |
| _[GridName]_-id | Array | `multioperation="true"` | List of row identifiers for rows with operations |
| _[ColumnName]_ | Array | `multioperation="true"` | List of column values for rows with operations (for each column) |
| _[ColumnName]_.selected | Value/Array | Always | List 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 |
| selectedRowAddress | JsonNode | When there is only one line selected | Json node with the `address` of the selected row: view, component and row id |
| sort | Array | Always | List of JsonNodes with the grid sort information (`id`: column id, `direction`: sort direction) |
| _[GridName]_.data | JsonNode | Always | List of grid extra information (page, max records, sort information, etc) |
> **Note:** See samples of usages on [Service Definition](service-definition.md#load-beans-from-parameters)