(r21) GridPanel < WebXEO

WebXEO Web>XeoPrimerXeoXwc>GridPanel (revision 21) (raw view)~~EditAttach~~
-- Main.PedroRio - 20 Apr 2010
---+ GridPanel

A GridPanel is a XVW component that's used to display (in a tabular form) a list of items (provided by a data source). It provides built-in mechanisms to sort, group the data, etc. The items in a GridPanel are paginated by default (50 items per page)

Items in the table can be selected and clicked which can in turn trigger specific actions (such as opening a new window when double clicking a given row in the table)

A GridPanel should be used inside a Panel component.

*XML Definition*

A GridPanel is declared as following:
<verbatim><xvw:gridPanel 
 datasource="#{viewBean.dataSource}"
 ...
 otherAttributes
 ...
></verbatim> <pre><verbatim></xvw:gridPanel></verbatim>
</pre>

*Component from which the Grid Panel Extends*

   * None

*Components that Extend Grid Panel*

   * [[WebXEO.XeoList][ List ]]
   * [[WebXEO.XeoBridge][ Bridge ]]
   * <span style="color: #0000ff;"><span style="text-decoration: underline;">[[WebXEO.GridExplorer][ GridExplorer ]] </span></span>

*GridPanel Properties*
| *Property* | *Description* | *Requirement* | *Default Value* | *Type* | *Comments* ||
| [[#dataSource][dataSource]] | The list of items for the GridPanel | required | - | DataListConnector | This property must be binded to the Bean and must return an implementation of the DataList connector. There are aready two default implementations. The XEOObjectListConnector and the XEOBridgeListConnector. ||
| autoExpandColumn | The column that will auto expand to fill available space | optional | - | String | autoExpandColumn='NAME_OF_COLUMN_IN_GRID_PANEL' ||
| pageSize | The number of items that are listed per page (next items are shown in a different page) | optional | 50 | Integer | pageSize='10' -&gt; 10 items per page ||
| rowSelectionMode | Determines how a user can select the rows in the grid panel. Default (ROW) allows the user to select a single row; (MULTI_ROW) allows the user to select multiple row and CELL disables row selection. Users select multiple lines with the _Ctrl_ button | optional | ROW | Enum (ROW, MULTI_ROW, CELL) / EL | rowSelectionMode='CELL' ||
| rowDblClickTarget | The target for the action invoked when a row is double clicked | optional | tab | Enum (blank, self, tab, download, window, top) | ||
| onRowDoubleClick | Defines the method that's invoked when a row of the GridPanel is doubled clicked. | optional | | EL | <p>*Note: It needs to be declared when using rowDblClickTarget.</p> <p>Use it empty (onRowDoubleClick="") to disable the double click.</p> ||
| groupBy | Groups the results by a given column | optional | - | <p>EL / The name of a column of the GridPanel</p> | <p>groupBy='NAME_OF_COLUMN_IN_GRID_PANEL'</p> <p>enableGroupBy="true" has to be declared</p> <p> </p> ||
| enableGroupBy | Whether or not the results in this GridPanel can be grouped (only single column groups can be made at this point) | optional | false | Boolean / EL | enableGroupBy='true' ||
| onSelectionChange | Allows the definition of an action when a row is selected | optional | | EL | ||
| rowClickTarget | The target for the action invoked when a row is clicked | optional | | Enum(blank, self, tab, download, window, top) | ||
| *Property* | *Description* | *Requirement* | *Default Value* | *Type* | *Comments* ||
| onRowClick | Defines the method that's invoked when a row of the GridPanel is clicked. | optional | | EL | *Note: It needs to be declared when using rowClickTarget ||
| enableHeaderMenu | Defines whether or not the header menu appears in the GridPanel. The Header Menu is situated on the top part of the GridPanel and it hosts the Title. | optional | true | Boolean / EL | ||
| enableColumnResize | Whether or not the columns may be resized by the user | optional | true | Boolean / EL | ||
| enableColumnMove | Whether or not the user can re-order columns in the GridPanel | optional | true | Boolean / EL | ||
| enableColumnHide | Whether or not the user can hide Columns in the GridPanel | optional | true | Boolean /EL | ||
| enableColumnFilter | COMPLETE / ERROR DOES NOT WORK | optional | true | Boolean | ||
| enableColumnSort | Whether or not columns can be sorted | optional | true | Boolean / EL | ||
| enableGroupBy | <div id="_mcePaste">Whether or not the results in this GridPanel</div> <div id="_mcePaste">can be grouped (only single column groups can be made at this point)</div> | optional | false | Boolean | *Note: Has to be set to true if groupBy tag is defined ||
| autoHeight | Allows the GridPanel to resize to the space required to show all the data. | optional | false | Boolean | ||
| height | Allows to manually define the height of the GridPanel | optional | 250 | Integer | ||
| *Property* | *Description* | *Requirement* | *Default Value* | *Type* | *Comments* ||
| title | Defines the title of the GridPanel | optional | | String /EL | ||
| sActiveRow | The currently selected row in the GridPanel | optional | | String | ||
| forceColumnsFitWidth | Forces the columns to fit the current available space in the viewer where the GridPanel is defined | optional | true | Boolean | ||
| rowClass | Applies a CSS class to each row. Must return an implementation of the GridRowRenderClass interface | optional | | EL / GridRowRenderClass | ||
| serverActionWaitMode | The message to show when the component is waiting for a server action | optional | "NONE" | EL / String | Value come from the <em>XVWServerActionWaitMode </em>Enumeration ||
| objectAttribute | Binds the data of the GridPanel to an attribute of an object. The attribute must be of type AttributeObjectCollection | optional | | EL / String | ||
| rowUniqueIdentifier | The name of the column used to uniquely identity each row, | Optional | "BOUI" | EL / String | ||
| minHeight | The minimum height for the GridPanel | Optional | 60 | Integer | ||
| currentSortTerms | The current sort terms (can be used for a default sort term), in the form of NAME_COLUMN PIPE ORDER  | Optional | | | <p> </p> <pre>currentSortTerms='NAME_OF_COLUMN_IN_GRID_PANEL'|desc</pre> <p> </p> ||
| enableAggregate | Allows aggregate stats to be rendered on numeric fields (such as MIN, MAX, AVG, SUM) | Optional | false | EL / String | ||
| *Property* | *Description* | *Requirement* | *Default Value* | *Type* | *Comments* ||
| showGroupToolBar | Whether to show the toolbar for Drag and Drop Grouping | Optional | false | Boolean | ||
| enableSelectionAcrossPages | Whether to enable selections to be maintained across pages | Optional | false | Boolean | ||
| filterLookup | | Optional | | | ||
| aggregateFields | <pre><br /></pre> | Optional | | <pre>HashMap&lt;String, ArrayList&lt;String&gt;&gt;</pre> | ||
| objectAttribute | Binds the data of the GridPanel to an attribute of an object | Optional | | String | ||
| advancedFilters | A JSON Object with the filters for the advanced search | Optional | | String | ||
| currentExpandedGroups | | Optional | | String | ||
| layout | | Optional | "fit-parent" | String | ||
| region | | Optional | | String | ||
| autoSaveGridState | | Optional | | String | ||
| *Property* | *Description* | *Requirement* | *Default Value* | *Type* | *Comments* ||
| currentColumnsConfig | | Optional | | String | ||
| autoReloadData | | Optional | | Boolean | ||
| defaultSettings | | Optional | | <pre>HashMap&lt;String,String&gt;</pre> | ||

*Possible Child Components:*
   * ColumnAttribute (to choose which columns should appear in the table)
   * GridNavBar (to choose if a given number of options should be present in the bottom navigational bar of the GridPanel)
   * ToolBar (Each GridPanel has a default toolbar wich can be overriden)

*Property DataSource:<a name="dataSource"></a>*

XEOObjectListConnector: The XEOObjectListConnector receives a boObjectList as an argument of the contructor and can be used to incorporate any list of boObjects in the GridPanel

XEOBridgeListConnector: The XEOBridgeListConnector receives a bridgeHandler as an argument of the constructor and can be used to display a bridge of objects in the GridPanel.

Example: Imagine that we want to display all instances of the system model "Ebo_Perf" in a given GridPanel, the dataSource property of the Bean could be a method like this:
<verbatim>public DataListConnector getDataSource()
{
      String boql = 'select Ebo_Perf';
      boObjectList listOfUsers = boObjectList.list(getEboContext(), boql);
      return new XEOObjectListConnector(listOfUsers);
</verbatim> <pre><verbatim>}</verbatim>
</pre>

*Aggregating Numeric Column Values*

If you want to aggregate numeric columns in a GridPanel you must do the following:

   1 Set the _enableAggregate_ property to _true_
   1 Set the _enableAggregate_ property to _true_ in the _xvw:columnAttribute/xeo:columnAttribute_ component which is to the aggregated to true. The column *must be a numeric type*

_Example XML declaration_

<verbatim><xvw:gridPanel enableGroupBy="true" enableAggregate="true">
    <xvw:columnAttribute dataField="NUMERIC_FIELD" enableAggregate="true" />
</xvw:gridPanel></verbatim>

You can aggregate by four different functions: *Average*, *Minimum*, *Maximum* and *Sum*.

WORK_IN_PROGRESS
Topic revision: r21 - 2013-03-27 - JoaoAires
No permission to view TWiki.WebTopBar
No permission to view TWiki.WebBottomBar