DataGrid Component

Description

The dataGrid 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 dataGrid Component has the following capabilities :

  • ISelectionEventCapability
  • ISelectableCapability
  • ISelectionCardinalityCapability
  • ISelectedValuesCapability
  • IDragEventCapability
  • IDraggableCapability
  • IDropEventCapability
  • IDropCompleteEventCapability
  • IDroppableCapability
  • ICheckEventCapability
  • ICheckableCapability
  • ICheckCardinalityCapability
  • ICheckedValuesCapability
  • IAdditionalInformationEventCapability
  • IAdditionalInformationValuesCapability
  • IClientAdditionalInformationFullStateCapability
  • IAdditionalInformationCardinalityCapability
  • IDoubleClickEventCapability
  • ILoadEventCapability
  • IRequiredCapability
  • IRowStyleClassCapability
  • IEmptyDataMessageCapability
  • IReadOnlyCapability
  • IDisabledCapability
  • IMenuCapability
  • IScrollableCapability
  • IFilterCapability
  • IShowValueCapability
  • IPreferencesSettings
  • IPagedCapability
  • IClientSelectionFullStateCapability
  • IClientCheckFullStateCapability
  • IHeaderVisibilityCapability
  • ICursorProvider
  • IGridComponent
  • IDroppableGridComponent
  • IOrderedChildrenCapability
  • ISortedChildrenCapability
  • IComponentValueTypeCapability
  • ISelectionRangeComponent
  • ICheckRangeComponent
  • ISortedComponentsCapability
  • IAdditionalInformationRangeComponent
  • IDraggableGridComponent


The default dataGridComponent renderer is link to the f_dataGrid javascript class. f_dataGrid extends f_grid, fa_readOnly, fa_checkManager, fa_droppable, fa_draggable, fa_autoOpen


Table of component style classes:

Style Name Description
f_dataGrid Defines styles for the wrapper DIV element.
f_grid_dataTitle_scroll Defines styles for the wrapper DIV element for the header of colums.
f_grid_dataBody_scroll Defines styles for the wrapper DIV element for the body.
f_grid_sortManager Defines styles for the wrapper DIV element for the pop-up od the sort manager.
Nota Bene: The dataGrid component is a data container but not a Component container. Cells can contain text or images. A row can hold a check box or radio button.

Screen Shot


Syntax

<v:dataGrid 
		id="directoryGrid" 
		selectable="true" 
		selectionCardinality="zeromany"
		var="row" 
		value="#{main.cards}" 
		doubleClickListener="directoryGrid_dblClick(event)"
		selectionListener="directoryGrid_select(event)"
		focusListener="main_gridFocus(event)"
		keyDownListener="main_gridKey(event)"
		width="100%"
		height="220"
		rowValueColumnId="col_key"
		rows="10">
	<v:dataColumn 
		id="col_key" 
		visible="false" 
		converter="cardId"
		value="#{row}">
	</v:dataColumn>
	<v:dataColumn 
		defaultCellImageURL="images/card.gif"
		id="col_display" 
		width="128" 
		text="${messages.main_display}" 
		resizable="true" 
		sortListener="alphaIgnoreCase"
		converter="cardDisplay"
		value="#{row}">
	</v:dataColumn>
	<v:dataColumn 
		id="col_mail" 
		width="256" 
		text="${messages.main_mail}" 
		resizable="true" 
		sortListener="alphaIgnoreCase"
		value="#{row.email}">
	</v:dataColumn>
	<v:dataColumn 
		id="col_phone" 
		width="128" 
		text="${messages.main_phone}" 
		resizable="true" 
		sortListener="alphaIgnoreCase"
		value="#{row.workAddress.phone}">
	</v:dataColumn>
	<v:dataColumn 
		id="col_mobile" 
		visible="false" 
		width="128" 
		resizable="true" 
		text="${messages.mobile}" 
		value="#{row.workAddress.mobile}">
	</v:dataColumn>
	<v:dataColumn 
		id="col_organization" 
		width="128" 
		text="${messages.main_organization}" 
		resizable="true" 
		sortListener="alphaIgnoreCase"
		value="#{row.workAddress.organization}">
	</v:dataColumn>
	<v:dataColumn 
		id="col_title" 
		width="128" 
		hiddenMode="client" 
		text="${messages.main_title}" 
		resizable="true" 
		sortListener="alphaIgnoreCase"
		value="#{row.workAddress.title}">
	</v:dataColumn>
	<v:menu menuId="#row"
		selectionListener="main_gridMenuSelect(event)"
		menuListener="main_gridMenu(event)">
		<v:menuItem 
			itemLabel="${messages.main_listPopup_edit}" 
			accessKey="${messages.main_listPopupKey_edit}" 
			acceleratorKey="${messages.main_accelerator_edit}" 
			itemValue="edit" />
		<v:menuSeparator />
		<v:menuItem 
			itemLabel="${messages.main_listPopup_mailto}" 
			accessKey="${messages.main_listPopupKey_mailto}"
			acceleratorKey="${messages.main_accelerator_mailto}" 
			itemValue="mailto" />
		<v:menuItem 
			itemLabel="${messages.main_listPopup_chat}" 
			accessKey="${messages.main_listPopupKey_chat}" 
			itemValue="chat" />
		<v:menuItem 
			itemLabel="${messages.main_listPopup_export}" 
			accessKey="${messages.main_listPopupKey_export}" >
			<v:menuItem 
				itemLabel="${messages.main_listPopup_exportVCARD}" 
				accessKey="${messages.main_listPopupKey_exportVCARD}" 
				itemValue="exportVCARD" />
			<v:menuItem 
				itemLabel="${messages.main_listPopup_exportLDIF}" 
				accessKey="${messages.main_listPopupKey_exportLDIF}" 
				itemValue="exportLDIF" />
		</v:menuItem>
		<v:menuSeparator />
		<v:menuItem 
			itemLabel="${messages.main_listPopup_delete}" 
			accessKey="${messages.main_listPopupKey_delete}" 
			imageURL="images/delete16.gif"
			hoverImageURL="hover::"
			selectedImageURL="selected::"
			disabledImageURL="disabled::"
			acceleratorKey="delete" 										
			itemValue="delete" />
	</v:menu>
</v:dataGrid>

Instructions