TWiki> WebXEO Web>XeoPrimerXeoXwc>GridPanel (revision 18)EditAttach
Tags:
create new tag
, view all tags
-- 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:

<xvw:gridPanel 
 datasource="#{viewBean.dataSource}"
 ...
 otherAttributes
 ...
>
</xvw:gridPanel>

Component from which the Grid Panel Extends

  • None

Components that Extend Grid Panel

GridPanel Properties

Property Description Requirement Default Value Type Example
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 / EL 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' -> 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) rowSelectionMode='CELL'
rowDblClickTarget The target for the action invoked when a row is double clicked optional tab Enum (self, tab, download, window, top)  
onRowDoubleClick Defines the method that's invoked when a row of the GridPanel is doubled clicked. optional   EL

*Note: It needs to be declared when using rowDblClickTarget.

Use it empty (onRowDoubleClick="") to disable the double click.

groupBy Groups the results by a given column optional - The name of a column of the GridPanel

groupBy='NAME_OF_COLUMN_IN_GRID_PANEL'

enableGroupBy="true" has to be declared

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 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(self, tab, download, window)  
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  
enableColumnResize Whether or not the columns may be resized by the user optional true Boolean  
enableColumnMove Whether or not the user can re-order columns in the GridPanel optional true Boolean  
enableColumnHide Whether or not the user can hide Columns in the GridPanel optional true Boolean  
enableColumnFilter COMPLETE / ERROR DOES NOT WORK optional true Boolean  
enableColumnSort Whether or not columns can be sorted optional true Boolean  
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 *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  
title Defines the title of the GridPanel optional   String  
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 XVWServerActionWaitMode 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, Required "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_COLUM PIPE ORDER, see example Optional    

enableAggregate Allows aggregate stats to be rendered on numeric fields (such as MIN, MAX, AVG, SUM) Optional false EL / String    
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    

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:

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:

public DataListConnector getDataSource()
{
      String boql = 'select Ebo_Perf';
      boObjectList listOfUsers = boObjectList.list(getEboContext(), boql);
      return new XEOObjectListConnector(listOfUsers);
}

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
  2. 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

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

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

Edit | Attach | Print version | History: r23 | r20 < r19 < r18 < r17 | Backlinks | Raw View | Raw edit | More topic actions...
Topic revision: r18 - 2012-07-24 - PedroRio
 

No permission to view TWiki.WebTopBar

This site is powered by the TWiki collaboration platform Powered by Perl

No permission to view TWiki.WebBottomBar