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.
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
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 ??
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.
In my dataTable when a row is clicked it gets marked with some color. But then this mark disappears because submit occurs. But i re-render only some other part of the page and not the table, so why does it occur? How can i fix this?
The code:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/templates/mainLayout.xhtml">
<ui:define name="header">
<h1>Persons List</h1>
</ui:define>
<ui:define name="content">
<h:form id="mainForm">
<h:outputStylesheet name="tableStyle.css" library="css" target="body"/>
<h:panelGroup id="personPanel">
<h:outputText value="#{msgs.fName}"/>
<h:inputText value="#{personController.person.firstName}" maxlength="20"/>
<h:outputText value="#{msgs.lName}"/>
<h:inputText value="#{personController.person.lastName}" maxlength="20"/>
<h:outputText value="#{msgs.phone}"/>
<h:inputText value="#{personController.person.phone}" maxlength="20"/>
</h:panelGroup>
<h:commandButton value="#{msgs.save}" >
<f:ajax execute="#form" render="personsTable personPanel" listener="#{personController.savePerson}"/>
</h:commandButton>
<h:dataTable id="personsTable" value="#{personController.persons}" var="bean"
styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" >
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:commandLink value="#{bean.firstName}" >
<f:ajax execute="#this" render="personPanel" >
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:commandLink value="#{bean.lastName}" >
<f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:commandLink value="#{bean.phone}" >
<!-- f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax-->
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
<ui:define name="footer">
<script type="text/javascript">
$(document).ready(function(){
$(".order-table tr").mouseover(function(){
$(this).addClass("over");
});
$(".order-table tr").mouseout(function(){
$(this).removeClass("over");
});
$(".order-table tr").click(function(){
$(".order-table tr").removeClass("choose");
$(this).addClass("choose");
});
});
</script>
</ui:define>
</ui:composition>
You can use firefox and "firebug" plugin to inspect the element in real time to find out what's going on. It could be that something about your update is breaking the inheritance of the style...