# richfaces datatable



## traysa (17. Nov 2008)

hallo zusammen,

ich schlage mich grad mit richfaces herum und versuche eine tabelle zu bauen bei der man u.a. eine zeile durch mausklick auswählen kann und sich durch einen weiteren klick auf einen ajax-commandButton den datensatz der hinter der ausgewählten zeile steckt mit einem modalpanel anzeigen lassen kann.
die arbeit mit rich:scrollableDataTable hab ich bereits aufgegeben, da ich damit einige probleme hatte. deshalb hab ich mir selbst einen scroller um mein datatable gebaut.


```
<h:panelGroup>
```
Tabellen Header:

```
<div class="header-border">
			<rich:dataTable id="Headers" styleClass="headerTable">
				<rich:column id="DateHeader" headerClass="table-dateCol">
					<f:facet name="header">
						<h:outputText value="Datum"/>
					</f:facet>
				</rich:column>
				<rich:column id="DescriptionHeader">
					<f:facet name="header">
						<h:outputText value="Beschreibung" />
					</f:facet>
				</rich:column>
			</rich:dataTable>
		</div>
```
Scoller und Tabelleninhalt:

```
<div class="scroller">					
			<rich:dataTable id="Table" styleClass="tableContent"
				rowClasses="#{myBean.rowClasses}" columnClasses="table-dateCol,none"
				binding="#{myBean.table}" 
				var="element"
				value="#{myBean.resultList}">
				
				<a4j:support event="onRowClick" action="#{myBean.takeSelection}"/>
				
				<rich:column id="Date" sortBy="#{element.date}" sortOrder="DESCENDING">
					<h:outputText value="#{element.date}"/>
				</rich:column>
				<rich:column id="Description">
					<h:outputText value="#{element.description}" />
				</rich:column>
			</rich:dataTable >
		</div>
	</h:panelGroup>
```
Ajax CommanButtons:

```
<rich:spacer height="10px"/>

	<h:panelGroup>
		<h:panelGrid columns="4" style="float:right;" >
			<h:column>
				<a4j:commandButton value="Show Detail" styleClass="tableButtons" reRender="detailTable"
					oncomplete="javascript:Richfaces.showModalPanel('detailPanel');"/>
			</h:column>
			<h:column>
				<a4j:commandButton value="Edit" styleClass="tableButtons" reRender="editTable"
					oncomplete="javascript:Richfaces.showModalPanel('editPanel');"/>
			</h:column>
			<h:column>
				<a4j:commandButton value="New" styleClass="tableButtons" reRender="newTable"
					action="#{myBean.emptyData}" 
					oncomplete="javascript:Richfaces.showModalPanel('newPanel');"/>
			</h:column>
			<h:column>
				<a4j:commandButton value="Delete" styleClass="tableButtons" 
					reRender="table" action="#{myBean.deleteData}" />
			</h:column>
		</h:panelGrid>
	</h:panelGroup>

</h:panelGrid>
```


In my BackingBean:

```
//Colors the selection and saves it
	public String takeSelection(){
		if (table.isRowAvailable()){

			this.setSelection((Data)table.getRowData());
			
			Integer row = table.getRowIndex();
			rowClasses = "";
			for (int i = 0; i < table.getRowCount(); i++) {
				if (i == row){
					rowClasses = rowClasses + "selectedRow,";
				} else {
					rowClasses = rowClasses + "none,";	
				}
			}		
		} else System.out.println("No row available!!");
		return null;
    	}
```


Modal Panel (show detail):

```
<rich:modalPanel id="detailPanel" autosized="true" >
   	<f:facet name="header">
   		<h:outputText value="Selected Rows"></h:outputText>
	</f:facet>
	<f:facet name="controls">
		<h:graphicImage id="hidelink" value="/resources/images/exit.gif" styleClass="exitButton"
onclick="javascript:Richfaces.hideModalPanel('detailPanel')"/>
	</f:facet>
	<h:form>
		<h:panelGroup layout="block" style=" width:300px;height:100px;overflow:auto;">
			<rich:dataTable
	    			id="detailTable"
	    			var="selectedItem" 
	    			value="#{myBean.selection}">
				<rich:column id="date">
					<f:facet name="header">
						<h:outputText value="Datum" />
	           			</f:facet>
	           			<h:outputText value="#{selectedItem.date}" />
				</rich:column>
	       			<rich:column id="description">
					<f:facet name="header">
						<h:outputText value="Beschreibung" />
	           			</f:facet>
	           			<h:outputText value="#{selectedItem.description}" />
	       			</rich:column>
			</rich:dataTable>
		</h:panelGroup>
	</h:form>
</rich:modalPanel>
```


----------



## traysa (17. Nov 2008)

...Fortsetzung:

myBean ist in der faces-config als request eingetragen. die situation ist nun, dass ich zwar einzelne reihen anklicken kann und diese auch farblich hinterlegt werden, allerdings kann er sich die selection nicht merken, da durch den request scope myBean immer wieder neu erstellt wird (sowohl beim reihe anklicken als auch bei buttonklick). ich wollte es auch mit einem hiddenItem versuchen, habe es aber nicht hinbekommen.

vielleicht hatte jemand ja mal das gleiche problem und kann mir weiterhelfen.

mit freundlichen grüßen, traysa


----------



## starfish0r (1. Dez 2008)

Wie du schon geschrieben hast, ist deine myBean mit dem scope "request" definiert. Demnach wird die Bean bei jeder Kommunikation mit dem Server, also mit jedem Klick, neu erstellt und du kannst dir keine Werte in dieser Bean "merken".

Die Loesung erscheint mir gerade relativ simpel:
Stelle das scope-Attribut in der Bean-Definition auf "session".
Dann existiert die selbe Instanz der Bean bei jeder Anfrage, die vom selben Benutzer (vom selben Browser auf dem selben Rechner) kommt. Somit kannst du dir die selection merken.
MfG


----------



## traysa (19. Dez 2008)

danke für die antwort. 
leider krieg ich mit der scope-umstellung ein problem an anderer stelle...
inzwischen habe ich es aber nach meinen vorstellungen hinbekommen. jetzt ist nur noch der new-button bei mir ein ajax button, die anderen buttons sind normale buttons.

tschüss ^^


----------

