Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Durrab Khan
Liferay Prime Faces dataTable issue
August 9, 2012 11:20 AM
Answer

Durrab Khan

Rank: New Member

Posts: 13

Join Date: May 11, 2012

Recent Posts

I have a portal which I am displaying in the control panel

That portal has a Prime Faces dataTable component which is displayed under xhtml.

The problem: Primefaces dataTable is not covering the whole page with 100% width and height and if I have more columns then it increases the page size horizontally which is not good.

  1<?xml version="1.0" encoding="UTF-8"?>
  2<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:aui="http://liferay.com/faces/aui"
  3    xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:f="http://java.sun.com/jsf/core"
  4    xmlns:h="http://java.sun.com/jsf/html" xmlns:bridge="http://liferay.com/faces/bridge"
  5    xmlns:p="http://primefaces.org/ui" xmlns:example-cc="http://java.sun.com/jsf/composite/example-cc"
  6    xmlns:ui="http://java.sun.com/jsf/facelets">
  7   
  8   
  9    <p:ajaxStatus style="width:16px;height:16px;" id="ajaxStatusPanel" align="center"> 
 10    <f:facet name="start"> 
 11        <h:graphicImage value="../images/preloader.gif" /> 
 12    </f:facet> 
 13      
 14    <f:facet name="complete"> 
 15        <h:outputText value="Done....." /> 
 16    </f:facet> 
 17    </p:ajaxStatus>
 18   
 19    <h:form id="form">
 20   
 21    <p:dataTable var="customerAdmin" value="#{mastercardCustomerAdmin.lazyModel}" paginator="true" rows="10"
 22                     paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
 23                     rowsPerPageTemplate="5,10,15,25,50" selectionMode="single" 
 24                     id="customerAdminTable" lazy="true" resizableColumns="true"
 25                     binding="#{mastercardCustomerAdmin.dataTable}" global="true" style="width:100%;height:100%">
 26                     
 27            <p:column headerText="Customer ID"  sortBy="#{customerAdmin.ID_CUSTOMER}" filterBy="#{customerAdmin.ID_CUSTOMER}">
 28                <h:outputText value="#{customerAdmin.ID_CUSTOMER}" />
 29            </p:column>
 30   
 31            <p:column headerText="Agent Name"  sortBy="#{customerAdmin.NAME_AGENT}" filterBy="#{customerAdmin.NAME_AGENT}">
 32                <h:outputText value="#{customerAdmin.NAME_AGENT}" />
 33            </p:column>
 34   
 35            <p:column headerText="First Name"  sortBy="#{customerAdmin.FIRST_NAME}" filterBy="#{customerAdmin.FIRST_NAME}">
 36                <h:outputText value="#{customerAdmin.FIRST_NAME}" />
 37            </p:column>
 38   
 39             <p:column headerText="Last Name"  sortBy="#{customerAdmin.LAST_NAME}" filterBy="#{customerAdmin.LAST_NAME}">
 40                <h:outputText value="#{customerAdmin.LAST_NAME}" />
 41            </p:column>
 42            
 43             <p:column headerText="Gender"  sortBy="#{customerAdmin.GENDER}" filterBy="#{customerAdmin.GENDER}">
 44                <h:outputText value="#{customerAdmin.GENDER}" />
 45            </p:column>
 46            
 47            <p:column headerText="DOB"  sortBy="#{customerAdmin.BIRTH_DATE}" filterBy="#{customerAdmin.BIRTH_DATE}">
 48                <h:outputText value="#{customerAdmin.BIRTH_DATE}" />
 49            </p:column>
 50            
 51            <p:column headerText="Email"  sortBy="#{customerAdmin.EMAIL}" filterBy="#{customerAdmin.EMAIL}">
 52                <h:outputText value="#{customerAdmin.EMAIL}" />
 53            </p:column>
 54            
 55            <p:column headerText="Postal Code" sortBy="#{customerAdmin.POST_CODE}" filterBy="#{customerAdmin.POST_CODE}">
 56                <h:outputText value="#{customerAdmin.POST_CODE}" />
 57            </p:column>
 58            
 59            <p:column headerText="Country"  sortBy="#{customerAdmin.NAME_COUNTRY}" filterBy="#{customerAdmin.NAME_COUNTRY}">
 60                <h:outputText value="#{customerAdmin.NAME_COUNTRY}" />
 61            </p:column>
 62            
 63            <p:column headerText="City"  sortBy="#{customerAdmin.CITY}" filterBy="#{customerAdmin.CITY}">
 64                <h:outputText value="#{customerAdmin.CITY}" />
 65            </p:column>
 66            
 67            <p:column headerText="Address"  sortBy="#{customerAdmin.ADDRESS}" filterBy="#{customerAdmin.ADDRESS}">
 68                <h:outputText value="#{customerAdmin.ADDRESS}" />
 69            </p:column>
 70            
 71            <p:column headerText="Mobile"  sortBy="#{customerAdmin.MOBILE_NUMBER}" filterBy="#{customerAdmin.MOBILE_NUMBER}">
 72                <h:outputText value="#{customerAdmin.MOBILE_NUMBER}" />
 73            </p:column>
 74            
 75            <p:column headerText="Phone" style="width:25%" sortBy="#{customerAdmin.PHONE_NUMBER}" filterBy="#{customerAdmin.PHONE_NUMBER}">
 76                <h:outputText value="#{customerAdmin.PHONE_NUMBER}" />
 77            </p:column>
 78            
 79            <p:column headerText="Doc Ser"  sortBy="#{customerAdmin.DOC_SER}" filterBy="#{customerAdmin.DOC_SER}">
 80                <h:outputText value="#{customerAdmin.DOC_SER}" />
 81            </p:column>
 82            
 83            <p:column headerText="Doc No"  sortBy="#{customerAdmin.DOC_NUM}" filterBy="#{customerAdmin.DOC_NUM}">
 84                <h:outputText value="#{customerAdmin.DOC_NUM}" />
 85            </p:column>
 86            
 87            <p:column headerText="Doc Who"  sortBy="#{customerAdmin.DOC_WHO}" filterBy="#{customerAdmin.DOC_WHO}">
 88                <h:outputText value="#{customerAdmin.DOC_WHO}" />
 89            </p:column>
 90            
 91            <p:column headerText="Doc Date"  sortBy="#{customerAdmin.DOC_DATE}" filterBy="#{customerAdmin.DOC_DATE}">
 92                <h:outputText value="#{customerAdmin.DOC_DATE}" />
 93            </p:column>
 94            
 95            <p:column headerText="Status" sortBy="#{customerAdmin.STATUS}" filterBy="#{customerAdmin.STATUS}">
 96                <h:outputText value="#{customerAdmin.STATUS}" />
 97            </p:column>
 98            
 99            <p:column headerText="CID"  sortBy="#{customerAdmin.ID_CUST}" filterBy="#{customerAdmin.ID_CUST}">
100                <h:outputText value="#{customerAdmin.ID_CUST}" />
101            </p:column>
102            
103            <p:column headerText="Create Date" sortBy="#{customerAdmin.DATE_CREATE}" filterBy="#{customerAdmin.DATE_CREATE}">
104                <h:outputText value="#{customerAdmin.DATE_CREATE}" />
105            </p:column>
106            
107            <p:column headerText="Update Date" sortBy="#{customerAdmin.DATE_UPDATE}" filterBy="#{customerAdmin.DATE_UPDATE}">
108                <h:outputText value="#{customerAdmin.DATE_UPDATE}" />
109            </p:column>
110            
111          </p:dataTable>
112                   
113        </h:form>   
114            
115    </ui:composition>



Whereas Primefaces dataTable is working pretty good in the sample you can see if you resize your browser then the dataTable also resize pretty well

PrimeFaces dataTable Sample


I need an urgent help

Thanks
Antoine Comble
RE: Liferay Prime Faces dataTable issue
October 25, 2012 3:25 AM
Answer

Antoine Comble

Rank: Regular Member

Posts: 205

Join Date: September 7, 2012

Recent Posts

Hi,

Try to add width="X%" in each p:column tag where X is an integer.
If you add all X, you must have 100.