How to fit height datatable to container?
i want datatable at 100% of layoutUnit container and vertical scroll only rows, not header.
With this code, table fit, but vertical scroll all table (rows and header).
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
<p:layout id="fullPage" fullPage="true" widgetVar="mainLayout">
<p:layoutUnit position="north" size="300" closable="false"
collapsible="true" gutter="0"
style="padding: 0px; border:0px;border-bottom: 1px solid #EF7C00;border-radius: 0px;">
</p:layoutUnit>
<p:layoutUnit position="center" gutter="0"
style="padding: 5px; border:0px;border-radius: 0px;background: #e9eaed;min-width:900px;"
id="centerID">
<p:layout id="layoutCorpoId" style="padding: 0px; border:0px;"
widgetVar="layoutCorpo">
<p:layoutUnit id="layoutCorpoWest" position="west" gutter="5"
resizable="true" size="30%" collapsible="true" closable="false"
styleClass="layoutCorpoWest panelBox">
<h:form id="validateFormId">
<p:dataTable var="elementVal" value="#{testController.players}"
id="dataTableId" rowKey="#{elementVal.playerId}"
rowIndexVar="idx" scrollable="true" resizableColumns="true" scrollHeight="100%">
<p:column headerText="Name">
<h:outputText value="#{elementVal.playerName}" />
</p:column>
<p:column headerText="Position">
<h:outputText value="#{elementVal.playerPosition}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{elementVal.playerAge}" />
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutCorpoCenter" position="center" gutter="0"
collapsible="true" styleClass="layoutCorpoCenter panelBox">
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
<p:layoutUnit gutter="0" id="bottom" position="south" size="300"
collapsible="true" styleClass="">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I add an immage that represents this:
after scroll:
pf 5.3
You can use stickyHeader attribute of p:dataTable for that purpose. See showcase example:
<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>
Related
I have a index.xhtml as a primefaces.
and 2 other pages.xhtml,
I want 2 links in header, when I clicc on this links i still in the same page and content of 2 pages display on the center of pages 'p:layoutUnit position="center"'
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>PrimeFaces</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
<ui:include src="header.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
<p:layoutUnit position="center">
i want 2 other pages.xhtml page be just here
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
I have a layout with layoutUnit west and layoutUnit center, west side have a menu that calls another pages that render in the center side, the problem is that all layout is refreshed(west and center side) when another page rendered in center. I have follow code:
<p:layout style="width: 100%; height: 450px" >
<p:layoutUnit position="west" size="230" collapsible="false" >
<h:form>
<p:menu style="font-size: 14px; width: 95%;height: 420px " >
<p:submenu label="MENU">
<p:menuitem value="Students" icon="ui-icon-arrowthick-1-n" url="pantallas/students.xhtml" />
<p:menuitem value="Teachers" icon="ui-icon-refresh" url="pantallas/teacher.xhtml" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layout1" position="center" >
<h:form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
</p:layout>
And student.xhtml like:
<ui:composition template="../administracion.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<h:head>
<h:outputStylesheet library="css" name="styles2.css"/>
<title>Facelet Title</title>
</h:head>
<h:body>
<p:panel header="Student" style="width: 90%; margin: auto auto">
<h:form id="forma1">
<p:panel style="text-align: center">
<p:inputText placeholder="Students" value="#{datosCT.cct}"/>
<p:commandButton value="buscar" actionListener="#{controlCTAlumnos.traeInfo()}" update="panel1">
<f:ajax listener="#{controlCTAlumnos.mostrarPanel(e)}" render="panel1" />
</p:commandButton>
</p:panel>
</h:form>
</p:panel>
</h:body>
</ui:define>
I saw and tried some many ways to refresh only layoutUnit center but doesn´t work in this case.
can someone help me??
thanks in advance.
You can do the partial update on form component inside your layout unit from your content page.
<p:layoutUnit id="layout1" position="center" >
<h:form id="form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
student.xhtml
<p:commandButton value="buscar" update=":form"/>
every time if an error occurs, I get the following error message in the error page.
This is my page.xhtml :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title>Esprit4Olap</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
.nestedUnit {
border:0px none !important;
}
.ui-layout-center .ui-layout-resizer {
border:1px solid #A8A8A8 !important;
}
.ui-tree-item span {
float:left !important;
}
.ui-tree {
border:0px none !important;
}
.ui-tabs {
border:0px none !important;
}
</style>
</h:head>
<h:body>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
</h:body>
</f:view>
</html>
The error itself, however, is not related to javax.faces.component.UIOutput. It can be just any error in one of the managed beans.
and i got this erros exception:
javax.servlet.ServletException: javax.faces.component.UIOutput cannot be cast to org.primefaces.component.layout.Layout
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606)
Any help is appreciated.
Thanks,
i make it like you told me :
<h:body>
<p:layout>
<p:layoutUnit position="west" size="200" resizable="true" collapsible="true" header="TreeNode">
<h:form>
<p:tree value="#{SchemaMan.shemaBoxses}" var="SchemaMan" selectionMode="Singel" selection="#{SchemaMan.shemaBoxse}" style="width:170px">
<p:treeNode icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="i" icon="ui-icon-mail-closed">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="s" icon="ui-icon-transfer-e-w">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="t" icon="ui-icon-trash">
<h:outputText value="SchemaMan"/>
</p:treeNode>
<p:treeNode type="j" icon="ui-icon-alert">
<h:outputText value="SchemaMan"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
</p:layout>
<p:layout>
<p:layoutUnit position="center">
<p:layoutUnit position="north" size="50%" resizable="true" styleClass="nestedUnit">
<p:tabView>
<p:tab title="Schema">
<h:form>
<p:panelGrid columns="2">
<p:inputText id="Schemaname" required="true" label="SchemaName" size="40" value="#{SchemaMan.nameSchema}" />
<p:inputText id="DescSchema" required="true" label="DescSchema" size="40" value="#{SchemaMan.descSchema}" />
<p:inputText id="RoleSchema" required="true" label="RoleSchema" size="40" value="#{SchemaMan.roleSchema}" />
<p:inputText id="CaptionSchema" required="true" label="CaptionSchema" size="40" value="#{SchemaMan.captionSchema}" />
</p:panelGrid>
<p:commandButton value="Add" type="button" ></p:commandButton>
</h:form>
</p:tab>
</p:tabView>
</p:layoutUnit>
</p:layoutUnit>
</p:layout>
</h:body>
but i get this exception now :
exception
javax.servlet.ServletException: JBAS011048: Failed to construct component instance
javax.faces.webapp.FacesServlet.service(FacesServlet.java:606) !!
You have two p:layout ? Every p:layoutUnit should be inside a whole p:layout. Take into account that you can nest a p:layout inside a p:layoutUnit to make more complex layouts (and of course, every p:layout HAS to have a p:layoutUnit position="center":
<p:layout>
<p:layoutUnit position="west" size="200">
...
</p:layoutUnit>
<p:layoutUnit position="center">
<p:layout>
<p:layoutUnit position="north" size="100">
...
</p:layoutUnit>
<p:layoutUnit position="center">
...
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
...
</p:layout>
Remember that if you use a p:layout for your whole page, you might be better off with p:layout fullPage="true". Cheers!
I have primeface p:panel on jsf file. I apply background color with the following style on the template page (anasayfa.xhtml).
<h:head>
<style type="text/css">
.bos{background-color:red;}
</style>
</h:head>
My Jsf Page with viewscoped backing bean:
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
...
<p:panel styleClass="bos">
...
</p:panel>
</ui:define>
</ui:composition>
When I load page background color is seen for very shortly, then becomes transparent. CTRL+F5 has the same effect.
What is wrong here?
Thanks for helps in advance
jsf page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
<p:panel id="rezerveleriniz">
<h:outputText value="#{rezervasyonBean.bugun.time}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText> : Rezervasyon Saatleri <br/>
<ui:repeat var="r" value="#{rezervasyonBean.kullaniciRezervasyonSaatleri}">
#{r.saatAraligi}<br/>
</ui:repeat>
</p:panel>
<h:form id="aaa">
<p:panel>
<p:panel style="float:left;">
<h:panelGrid columns="1">
<ui:repeat var="rs" value="#{rezervasyonBean.rezervasyonSaatleriListesi}">
**// !!!!!!!!!!!! Problem is here !!!!!!!!**
<p:panel styleClass="#{rezervasyonBean.isRezervasyonOnThisDay(rs) ? 'dolu' : 'bos' }">
#{rs.saatAraligi}
<h:commandButton action="#{rezervasyonBean.sec(rs,'1')}" value="+" update=":rezerveleriniz" disabled="#{rezervasyonBean.isRezervasyonOnThisDay(rs)}" />
</p:panel>
</ui:repeat>
</h:panelGrid>
<h:commandButton action="#{rezervasyonBean.kaydet()}" value="Kaydet" />
</p:panel>
<div style="clear:both;"></div>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Görev Takip Sistemi</title>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 12px !important;
font-family:Arial;
}
.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}
#topPanel {z-index:2 !important; }
#topPanel div{overflow:visible;}
.colStyle_panelGridForGorev{
width:225px;
}
.colStyle_panelGridForProfil{
width:100px;
}
</style>
</h:head>
<body>
<p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>
<h:form>
<p:idleMonitor timeout="900000">
<p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>
</p:idleMonitor>
</h:form>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/images/statusBar.gif" />
</p:dialog>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="topPanel" style="border:0px">
<h:form id="formAnaSayfaToolbar">
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}"
style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
<p:commandButton type="submit" value="Gruplarım"
action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Görevlerim"
action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Kullanıcı İşlemleri"
action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Grup İşlemleri"
action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
<p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />
<p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />
</p:menuButton>
<p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}">
<p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />
<p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />
</p:menuButton>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton type="submit" value="Çıkış" icon="ui-icon-close"
action="#{anasayfaBean.logout}" ajax="false" style="margin-right:200px;"/>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="ortaAlan">
<h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
<h:form style="text-align:center; font-size:13px;">
<h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" id="eastPanel" style="border:0px">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" id="westPanel" style="border:0px">
</p:layoutUnit>
</p:layout>
</body>
</html>
I am using JSF (Mojara) and Primefaces 3.4 in a sample application.
I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).
northheader.xhtml:
<h:body>
<h:form id="headerForm">
<p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>
<p:row>
<p:column width="70">
<p:commandLink onclick="dialogWidgetWar.show();" title="SampleImg">
<p:graphicImage value="../sampleimg.jpg" />
</p:commandLink>
</p:column>
</p:row>
</p:panelGrid>
<p:dialog id="idInfo" modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
<h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
For layout
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
<ui:include src="../northheader.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
<ui:include src="../left.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" size="200">
<ui:insert name="pageContent"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I
add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.
Can anybody help me out here, where is the problem?
Add appendToBody="true" attribute inside p:dialog
<p:dialog id="idInfo" modal="true" appendToBody="true"
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
You're using a p:dialog inside a p:layout. This always led to problems in my past experiences. A solid solution is to place the p:dialog outside of the p:layout. Since you're using ui:define and ui:insert this doesn't seem straight forward, however it's quite simple. Since you can define multiple ui:define elements in one JSF page you can define a "content" and a "dialogs" ui:insert and ui:define.
<p:layout>
<p:layoutUnit ...
<ui:insert name="content"/>
</p:layoutUnit>
</p:layout>
<ui:insert name="dialogs"/>
Try this, this should be work ;
<p:commandLink onclick="PrimeFaces.monitorDownload(hideStatus);" title="SampleImg">
java script ;
<script type="text/javascript">
function showStatus() {
dialogWidgetWar.show();
}
function hideStatus() {
dialogWidgetWar.hide();
}
</script>