ComponentsGrid Component

Description

The componentsGrid Component is a grid component. It can be compared to the grid found in the list part of the modern file explorer. It allows sorts, resizing, contextual menus ...

The componentsGrid Component is an evolution of dataGrid component. This component is a component container, it allows to:

  • Put components in cells
  • Edit values in cells

The componentsGrid Component has the following capabilities :

  • IAdditionalInformationEventCapability
  • ISelectionEventCapability
  • ISelectableCapability
  • ISelectionCardinalityCapability
  • ISelectedValuesCapability
  • IClientSelectionFullStateCapability
  • IAdditionalInformationEventCapability
  • IAdditionalInformationValuesCapability
  • IClientAdditionalInformationFullStateCapability
  • IAdditionalInformationCardinalityCapability
  • IDoubleClickEventCapability
  • ILoadEventCapability
  • IRequiredCapability
  • IBorderCapability
  • IRowStyleClassCapability
  • IShowValueCapability
  • IEmptyDataMessageCapability
  • IMenuCapability
  • IScrollableCapability
  • IPreferencesSettings
  • IPagedCapability
  • IHeaderVisibilityCapability
  • IGridComponent
  • IOrderedChildrenCapability
  • ISortedChildrenCapability
  • IComponentValueTypeCapability
  • ISelectionRangeComponent
  • ISortedComponentsCapability
  • IAdditionalInformationRangeComponent


The default componentsGrid renderer is link to the f_componentsGrid javascript class. f_componentsGrid extends f_grid


Table of component style classes:

Style Name Description
f_componentsGrid Defines styles for the wrapper DIV element. Contains f_grid styles.
Nota Bene: The componentGrid component time to display is significantly longer than the dataGrid component.

Screen Shot

Syntax

<v:componentsGrid 
		id="leTableau2" 
		selectable="true" 
		width="750" height="400"
		value="#{gridBean.rows}" 
		var="row" 
		rows="8"
		lookId="pe_grid"
		styleClass="pe_grid_table">
	<v:componentsColumn text="" width="30">
		<v:checkButton /> 
	</v:componentsColumn>
	<v:componentsColumn text="Intitul� de colonne" sortListener="server" width="212" >
		<table><tr><td>
			<v:comboGrid
					width="170" 
					popupWidth="180"
					popupHeight="130"
					valueColumnId="key"
					headerVisible="false"
					searchFieldVisible="false"
					popupStyleClass="pe_combo1_popup"	
					styleClass="pe_combo1" 
					gridStyleClass="pe_combo1_grid" 
					valueFormat="{label}"
					var="row" 
					selectedValue="#{comboBean.selectedValue}" 
					value="#{comboBean.values}" >
				<v:comboColumn 
					id="key"
					visible="false" 
					value="#{row.key}" />							
				<v:comboColumn 
					id="label"
					width="160" 
					value="#{row.name}" />							
			</v:comboGrid>
		</td><td>
			<v:imageButton imageURL="images/question.gif"/>
		</td></tr></table>
	</v:componentsColumn>
	<v:componentsColumn text="Label" sortListener="server" width="140" >
		<table>
			<tr>
				<td>
					<v:checkButton text="label" />
				</td>
				<td>
					<v:checkButton text="label" />
				</td>
			</tr>
			<tr>
				<td>
					<v:checkButton text="label" />
				</td>
				<td>
					<v:checkButton text="label" />
				</td>
			</tr>
		</table>
	</v:componentsColumn>
	<v:componentsColumn text="Label" width="212" >
		<v:textEntry value="#{valueBean.value}" />
		<v:imageButton imageURL="images/loupe.gif" marginLeft="10px" />
	</v:componentsColumn>								
	<v:componentsColumn text="Label" sortListener="server" width="116" >								
		<v:textEntry value="#{valueBean.value}" />
	</v:componentsColumn>
	<v:componentsColumn text="Label" width="116" >
		<v:textEntry value="#{valueBean.value}" />
	</v:componentsColumn>
	<v:componentsColumn text="Label" width="116" >
		<v:textEntry value="#{valueBean.value}" />
	</v:componentsColumn>
</v:componentsGrid>

Instructions