I used scrollableDateTable for scrolling data without hide headers, after populating the data in dataTable shows an extra column. How to hide the extra column or remove that column in scrollableDataTable.
Here is my code:
<rich:scrollableDataTable value="#{GameZoneBean.challenge}" var="challenge" rowClasses="gridEvenRow,gridOddRow" headerClass="gridheader" height="110" width="310">
<rich:column width="120px" sortable="false">
<f:facet name="header">
<h:outputText value="Start Time"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.startTimeStamp}"></h:outputText>
</rich:column>
<rich:column width="80px" sortable="false">
<f:facet name="header">
<h:outputText value="Game Status"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.gameStatus}"></h:outputText>
</rich:column>
<rich:column width="40px" sortable="false">
<f:facet name="header">
<h:outputText value="Home"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.homeTeam}"></h:outputText>
</rich:column>
<rich:column width="40px" sortable="false">
<f:facet name="header">
<h:outputText value="Away"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.awayTeam}"></h:outputText>
</rich:column>
</rich:scrollableDataTable>
After increase the width of scrollableDataTable the extra column is not displayed.
<rich:scrollableDataTable value="#{GameZoneBean.challenge}" var="challenge"
rowClasses="gridEvenRow,gridOddRow" headerClass="gridheader" height="110" width="285">
<rich:column width="120px" sortable="false">
<f:facet name="header">
<h:outputText value="Start Time"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.startTimeStamp}"></h:outputText>
</rich:column>
<rich:column width="80px" sortable="false">
<f:facet name="header">
<h:outputText value="Game Status"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.gameStatus}"></h:outputText>
</rich:column>
<rich:column width="40px" sortable="false">
<f:facet name="header">
<h:outputText value="Home"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.homeTeam}"></h:outputText>
</rich:column>
<rich:column width="40px" sortable="false">
<f:facet name="header">
<h:outputText value="Away"></h:outputText>
</f:facet>
<h:outputText value="#{challenge.awayTeam}"></h:outputText>
</rich:column>
</rich:scrollableDataTable>
the reason for showing extra column:
This column is used to fill table space when overall width of columns is not enough to cover table space. When columns are resized, they are taking space from this extra column.
So, set width for the first & second columns to the appropriate values.
In general this extracolumn used for resizing functionality.
Related
I'm trying to change the css of a basic panelgrid.
Basically I want the text of the right column on the right. This doesn't work
<p:panelGrid columns="2" style="height: 220px;width:100%;">
<f:facet name="header">
<h:outputText value="Car" />
</f:facet>
<h:outputText value="Colour:" />
<h:outputText style="text-align: right;" value="blue" />
<h:outputText value="Brand:" />
<h:outputText style="text-align: right;" value="Ferrari" />
</p:panelGrid>
Is there any way to change it ?
I've a p:dataTable, I want to change the default color just of a header, is it possible ?
<f:facet name="header">
List of Fone
</f:facet>
Here my entire code:
<p:dataTable var="fone" value="#{fonePersistBean.listInfofone}" paginator="true" rows="10"
id="table" rowStyleClass="odd-row, even-row">
<f:facet name="header">
Lista de fones
</f:facet>
<p:column headerText="Tipo" sortBy="#{fone.contact}">
<h:outputText value="#{fone.contact}" />
</p:column>
<p:column headerText="DDD" sortBy="#{fone.ddd}">
<h:outputText value="#{fone.nuDdd}" />
</p:column>
<p:column >
<h:commandLink action="#{foneBean.searchFone(fone)}" >
<i class="cus-find"></i>
</h:commandLink>
</p:column>
</p:dataTable>
Thanks in advance !
Try CSS using .ui-datatable-header if you wish to change all dataTables. For specific tables, you can use a styleClass attribute for the specific dataTable
This is my JSF project. I want to add to scrollbar on datatable but I can't. How can I add scrollbars?
<h:dataTable value="#{oneribean.listele()}"
rows="5" border="0"
var="pateta"
class="listele1">
<h:column>
<f:facet name="header">
<big><b> ÖNERİ </b> </big>
</f:facet>
<h:outputText value="#{pateta.aciklama}"/>
</h:column>
<h:column>
<f:facet name="header">
<big><b> DERS </b> </big>
</f:facet>
<h:outputText value="#{pateta.ders}"/>
</h:column>
<h:column>
<f:facet name="header">
<big><b> BÖLÜM </b> </big>
</f:facet>
<h:outputText value="#{pateta.bolum}"/>
</h:column>
</h:dataTable>
Use PrimeFaces data table component <p:dataTable> to achieve this
<p:dataTable var="yourVar"
value="#{bean.YourList}"
scrollable="true" scrollHeight="150">
//list your columns here.
</p:dataTable>
check this.
Problem in icons layout and positions in rtl.
Previous page icon should be swapped with next page icon as the direction in rtl is the opposite of ltr.
<p:dataTable id="dataTable" var="myRequest" widgetVar="requestsTable" value="#{searchRequestsBB.model}" rows="10" paginator="true"
paginatorPosition="bottom" rowsPerPageTemplate="10,50,100" selectionMode="single" selection="#{searchRequestsBB.selectedRequest}" rowKey="#{myRequest.id}" emptyMessage="#{langu['EMPTY_DATA_TABLE']}" lazy="true" resizableColumns="true">
<p:ajax event="rowSelect" update=":content:detailsBtn, :content:detailsDlg" />
<p:column sortBy="#{myRequest.id}" headerText="#{langu['REQUEST_NUMBER']}" >
<h:outputText value="#{myRequest.id}" />
</p:column>
<p:column sortBy="#{myRequest.requestDate}" headerText="#{langu['REQUEST_DATE']}" >
<h:outputText value="#{myRequest.requestDate}">
<f:convertDateTime pattern="#{tripconf['datePatternShow']}" timeZone="Africa/Cairo"/>
</h:outputText>
</p:column>
<p:column sortBy="#{myRequest.vehicleLicenseNumber}" headerText="#{langu['VEHICLE_LICENSE_NUMBER']}">
<h:outputText value="#{myRequest.vehicleLicenseNumber}" />
</p:column>
<p:column sortBy="#{myRequest.chassisNumber}" headerText="#{langu['CHASSIS_NUMBER']}">
<h:outputText value="#{myRequest.chassisNumber}" />
</p:column>
<p:column sortBy="#{myRequest.nationality.name}" headerText="#{langu['NATIONALITY']}">
<f:facet name="filter">
<p:selectOneMenu onchange="PF('requestsTable').filter()" effect="drop" >
<f:selectItem itemLabel="#{langu['ALL']}" itemValue="#{null}"/>
<f:selectItems value="#{searchRequestsBB.countries}" var="country" itemLabel="#{country.name}" itemValue="#{country.id}"/>
</p:selectOneMenu>
</f:facet>
<h:outputText value="#{myRequest.nationality.name}" />
</p:column>
<p:column sortBy="#{myRequest.totalDues}" headerText="#{langu['TOTAL_DUES']}">
<h:outputText value="#{myRequest.totalDues}" />
</p:column>
<p:column sortBy="#{myRequest.requestStatus}" headerText="#{langu['status']}">
<p:progressBar value="#{myRequest.requestStatus*25}" labelTemplate="{value}%" displayOnly="true"/>
</p:column></p:dataTable>
Note that my application supports rtl languages and ltr also.
Any ideas of how to solve ??
We are implementing primefaces tooltip on datatable.
But tooltip postining is away from the datable row.
<p:tooltip targetPosition="bottomLeft" Delay="0" showDelay="0">
<h:outputText value="#{label.lockTime}"
style="font-weight:bold" />
<h:outputText value=": #{cert.lockTime}" />
<p:spacer width="1" height="10" />
<h:outputText value="#{cert.label} " style="font-weight:bold" />
<h:outputText value=": #{cert.userDetails}" />
</p:tooltip>
You try this
<p:tooltip />
<p:dataTable var="var" ........>
<p:column headerText="Market" >
<h:outputText value=" #{var.market}" title=" #{var.market}"
style="display:block;">
</h:outputText>
</p:column>
<p:column headerText="Value" >
<h:outputText value=" #{var.value}" title=" #{var.value}"
style="display:block;">
</h:outputText>
</p:column>
</p:dataTable>
I hope It will work.