I intend to build, using Primefaces and using the tag p:dataTable, something like this:
So the goal is for the second row headers to be twice as tall as the first row headers.
I have this code:
<p:dataTable>
<p:columnGroup type="header">
<p:row>
<p:column colspan="1" rowspan="1" headerText="Header 1" />
<p:column colspan="1" rowspan="1" headerText="Header 2" />
</p:row>
<p:row>
<p:column colspan="1" rowspan="2" headerText="Header 3" />
<p:column colspan="1" rowspan="2" headerText="Header 4" />
</p:row>
</p:columnGroup>
</p:dataTable>
But what I get is this (the headers are with the same height):
Can someone help?
Thank you.
Related
I am using PrimeFaces 3 and my xhtml page is given below.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<h:outputScript name="jquery.js" library="css"></h:outputScript>
</h:head>
<h:body>
<p:panel id="allPaymentMethods" header="Payment Method"
style="font-weight: bold;font-size:14px"
rendered="#{userRegistrationVo.paymentmethod}">
<table width="100%">
<tr>
<td>You can pay<br></br> <p:graphicImage
value="/images/dd.jpg" height="80" width="120" /><br></br>
<p:commandButton id="showEbpDialog" type="button"
value="Via Bank" onclick="ebpDlg.show()" >
</p:commandButton>
</td>
</tr>
</table>
<!-- epayment dialog starts here -->
<br />
<br />
<br />
<!-- epayment dialog ends here -->
<p:dialog widgetVar="ebpDlg" modal="true" width="700" height="500">
<p:panel header="Generate EBP for Bank Payment">
<p:commandButton value="Print" type="button" icon="ui-icon-print">
<p:printer target="generateebp" />
</p:commandButton>
<p:panel id="generateebp">
<table width="100%">
<tr>
<td colspan="3">
<table width="100%">
<tr>
<td></td>
<td>
<!-- <h:commandButton update="generateebp"
action="#{controller.payViaBank}" type="button"
value="Generate EBP No." oncomplete="hideGenerateButton()"
rendered="#{userRegistrationVo.hideButton}" id="ebpButton">
<f:ajax render="generateebp" execute="#this">
</f:ajax>
</h:commandButton> -->
<p:commandButton
value="E-payment" action="#{controller.payViaBank}"
process="#this" update="generateebp">
</p:commandButton>
</td>
</tr>
<tr>
<td></td>
<td align="center" valign="top"><p:graphicImage
value="/images/nepal_logo.png" height="60" width="90" /> <br></br>
<br></br></td>
</tr>
<tr>
<td></td>
<td align="center" valign="top"><h:outputLabel
value="लोक सेवा आयोग" style="font-size:14px;" /></td>
</tr>
<tr>
<td></td>
<td align="center"><h:outputLabel
value="परिक्षा शुल्क तिर्न EBP नम्बर लिनुहोस् । "
style="font-size:14px;" /></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- viewing table -->
<table style="text-align: center" class="ebpTable">
<tr>
<td><h:outputLabel value="Advertisement Code"
style="background-color:#EAF0F8"></h:outputLabel></td>
<td><h:outputLabel value="Total Amount Due"
style="background-color:#EAF0F8"></h:outputLabel></td>
<td><h:outputLabel value="EBP Code"
style="background-color:#EAF0F8"></h:outputLabel></td>
<td><h:outputLabel value="Last Submission Date"
style="background-color:#EAF0F8"></h:outputLabel></td>
</tr>
<tr>
<td><h:outputText value="#{epaymentVo.advertisementcode}" />
</td>
<td><h:outputText value="#{epaymentVo.total}" /></td>
<td><h:outputText value="#{userRegistrationVo.ebpNumber}" />
</td>
<td><h:outputText
value="#{userRegistrationVo.lastApplicationDateNp}" /></td>
</tr>
</table>
<br />
<br />
<p>
मिती
<h:outputLabel
value="#{userRegistrationVo.lastApplicationDateNp}"></h:outputLabel>
गते बैन्किङ समय भित्र भुक्तान गरी सक्नुपर्नेछ। अन्यथा स्वय
उम्मेद्वार जिम्मेवार हुनु पर्ने छ ।
</p>
</p:panel>
</p:panel>
</p:dialog>
<br />
<br />
<br />
<hr />
<p:commandButton process="#this" update="#form" id="returnToAdvtBtn"
value="Back To Advertisement" action="#{controller.returnToAdvt}">
</p:commandButton>
</p:panel>
</h:body>
</f:view>
I am trying to open simple dialog box while I click the button. Now I am using PrimeFaces p:commandButton to achieve it. When I click the "Via Bank" button nothing happens (no dialog box opens). So when I go to the console of the browser, I see:
Uncaught ReferenceError: ebpDlg is not defined
but I have clearly defined ebpDlg dialog box. What am I doing wrong?
You need to add id for your dialog box same as widgetVar.
<p:dialog id="ebpDlg" widgetVar="ebpDlg" modal="true" width="700" height="500">
If calling using widgetVar you need add PF function like PF('ebpDlg').show()
but I think this will work for above version 4.0 .So kindly check your version also.
I am using primefaces p:message tab for displaying error messages in screen. But the error message backgroud is not expanding as per the list of message.
<table width="95%" border="0">
<tr>
<td valign="top" style="width:40%" id="leftTd">
<p:outputLabel value="User Profile"/>
</td>
</tr>
<tr>
<td colspan="3">
<p:messages id="profileMsgs" showSummary="true" showDetail="true" for="userProfileForm:loginIdText"/>
</td>
</tr>
<tr>
<td>
<br/>
</td>
</tr>
<tr valign="top">
<td width="35%">
<table width="100%" border="0">
<tr valign="top">
<td width="30%" align="right">
<h:outputLabel id="loginIdLabel" value="Login Id*:" for="loginIdText"> </h:outputLabel>
</td>
<td width="70%">
<p:inputText id="loginIdText" value="ADMIN"
style="width:90%;"
>
</p:inputText>
</td>
</tr>
<tr valign="top">
<td width="30%" align="right">
<h:outputLabel id="personalIdLabel" value="User/Personal Id*:" for="personalIdText"> </h:outputLabel>
</td>
<td width="70%">
<p:inputText id="personalIdText" value="ADMIN PERSONAL" style="width:90%;"
>
</p:inputText>
</td>
</tr>
</table>
</td>
</tr>
</table>
I am getting below result:
Expected result should be like
This question already has answers here:
Primefaces datatable frozen columns misallignment
(3 answers)
Closed 6 years ago.
I create data table with prime faces 5.2
and I use FrozenHaeader and scrollableHeader.
I read it from
lost header datatable use frozen column primeface
Problem
Header column height not sync between FrozenHaeader and scrollableHeader
follow picture :
Datatable frozen column picture
My code
<p:dataTable var="result" value="#{reportBRBean.listZone2}" id="dataTb" selectionMode="single" selection="#{reportBRBean.selectedZone}"
frozenColumns="3" scrollable="true" scrollWidth="800"
rowIndexVar="rowIndex" rowStyleClass="#{(rowIndex mod 2) eq 0 ? 'even' : 'odd'}" rowKey="#{result.zoneCode}" >
frozenHeader :
<p:columnGroup type="frozenHeader" >
<p:row>
<p:column rowspan="4" width="20" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br1.zone.lb.zone']}" width="140" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.amount.birth.certificate']}" width="110" style="background-color: #00CCCC !important;"/>
</p:row></p:columnGroup>
scrollableHeader :
<p:columnGroup type="scrollableHeader" >
<p:row>
<p:column colspan="10" headerText="#{msg['br2.lb.amount.inform.birth']}" width="900" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.inform.birth.all']}" width="100" style="background-color: #ffcc66 !important;"/>
<p:column colspan="10" headerText="#{msg['br2.lb.amount.noinform.birth']}" width="900" style="background-color: #00CCCC !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.noinform.birth.all']}" width="100" style="background-color: #ffcc66 !important;"/>
</p:row>
<p:row>
<p:column colspan="4" headerText="#{msg['br2.lb.amount.inform.within15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="3" headerText="#{msg['br2.lb.percent.inform.within15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4" headerText="#{msg['br2.lb.amount.inform.over15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.inform.over15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4" headerText="#{msg['br2.lb.amount.noinform.within15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="3" headerText="#{msg['br2.lb.percent.noinform.within15']}" style="background-color: #ffff99 !important;"/>
<p:column colspan="4" headerText="#{msg['br2.lb.amount.noinform.over15']}" style="background-color: #ff99ff !important;"/>
<p:column rowspan="4" headerText="#{msg['br2.lb.percent.noinform.over15']}" style="background-color: #ffff99 !important;"/>
</p:row>
Thank you
I fixed by use javascript.
I call javascript after(oncomplete) data table generates.
<script type="text/javascript">
/*<![CDATA[*/
function synchronizeRowsHeight() {
var $rows = $(document.getElementById('doctorForm:resultDoctorService_frozenThead')).find('tr');
$rows.each(function(index) {
var $row = $(this);
$row.innerHeight($(document.getElementById('doctorForm:resultDoctorService_scrollableThead')).outerHeight());
});
}
// ]]>
</script>
doctorForm:resultDoctorService_frozenThead
"doctorForm" forms ID
"resultDoctorService" data table ID
"frozenThead" columns group type
Modal Popup is not working in VB.net program but instead it displays as gridview & also some improper alignment in IE.
Below is HTML script for Modal popup in asp.net
HTML:
<asp:HiddenField ID="hfHidden" runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:Panel ID="pnlAllocationHistoryDetails" runat="server" Width="100%" Style="display: none;"
CssClass="TextVerdanaNavy8" HorizontalAlign="Center" Height="250px" ScrollBars="Vertical">
<table cellpadding="2" cellspacing="1" class="TextVerdanaNavy8" width="100%">
<tr>
<td style="width: 100%; height: 5%" align="center">
<asp:LinkButton ID="lnkbtnPaidsofarDetailsClose" Font-Bold="true" BackColor="Transparent"
ForeColor="DarkOrange" ToolTip="Close" Text="Close" runat="server"></asp:LinkButton>
</td>
</tr>
<tr>
<td align="center" style="width: 100%; height: 5%">
<asp:GridView ID="gridAllocatedBillDetails" runat="server" AutoGenerateColumns="False"
BorderColor="#999999" HorizontalAlign="Center" BorderStyle="None" BorderWidth="1px"
CellPadding="3" CssClass="TextVerdanaNavy8" GridLines="Vertical" ShowFooter="True"
Visible="True" AllowPaging="False" Width="50%">
<FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
<RowStyle BackColor="#EEEEEE" ForeColor="Black" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" Font-Size="Small" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="Gainsboro" />
<Columns>
<asp:BoundField DataField="DWMBL_WO_Number" HeaderText="Work Order Number">
<ItemStyle HorizontalAlign="left" Width="15%" />
<HeaderStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="DWMBL_Bill_Number" HeaderText="Bill Number">
<ItemStyle HorizontalAlign="left" Width="15%" />
<HeaderStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="DWMBL_Job_Code" HeaderText="Job/Dept Code" FooterText="Total ">
<ItemStyle HorizontalAlign="left" Width="15%" />
<HeaderStyle HorizontalAlign="Center" />
<FooterStyle HorizontalAlign="Right" Font-Bold="true" />
</asp:BoundField>
<asp:BoundField DataField="DWMBL_Amount" HeaderText="Amount">
<ItemStyle CssClass="TextVerdanaNavy8" HorizontalAlign="Right" Width="10%" />
<HeaderStyle HorizontalAlign="Center" />
<FooterStyle HorizontalAlign="Right" Font-Bold="true" />
</asp:BoundField>
</Columns>
</asp:GridView>
</td>
</tr>
<tr>
<td style="width: 100%; height: 5%">
</td>
</tr>
</table>
</asp:Panel>
<cc2:ModalPopupExtender ID="AllocatedDetailsPopup" BehaviorID="pnlAllocationHistoryDetails" runat="server" TargetControlID="hfHidden"
PopupControlID="pnlAllocationHistoryDetails" CancelControlID="lnkbtnPaidsofarDetailsClose"
BackgroundCssClass="modalBackground">
</cc2:ModalPopupExtender>
The below is the VB program for modal show/hide.
VB Coding :
'Show modal popup for Allocated so far details
Protected Sub gridPolicyDetailsView_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewCommandEventArgs) Handles gridPolicyDetailsView.ItemCommand
If e.CommandName = "View" Then
AllocatedDetailsPopup.Show()
End If
End Sub
'Modal Popup hide for Allocated so far details
Protected Sub lnkbtnPaidsofarDetailsClose_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnkbtnPaidsofarDetailsClose.Click
AllocatedDetailsPopup.Hide()
End Sub
Anything like HTML/VB script issue.
Please suggest...
Have you tried using javascript to invoke the modal instead of code behind?
Something like
function showmodalpopup() {
$("#AllocatedDetailsPopup").dialog({
})
I'm using JSF 2.2.6 with Glassfish 4 server and https. I found uncertainly displaying a checkbox type in web browser either Chrome or Firefox. Sometimes it shows, some not. I often found that it occurs on the 1st checkbox.
At the generated html page, I observed it showed "checked"="checked" correctly, but at browser it showed unchecked.
I don't know how to solve this. Thanks.
.xhtml codes:
<h:form id="usersF">
<table class="table table-responsive table-bordered table-striped">
<tr class="success" >
<th class="text-center">#{msgs.Index}</th>
<th class="text-center">#{adminMsgs.Username}</th>
<th class="text-center">#{msgs.Email}</th>
<th class="text-center">#{adminMsgs.Validity}</th>
<th class="text-center">#{adminMsgs.LastLogin}</th>
</tr>
<tbody>
<ui:repeat id="usersTable" value="#{usersManagedBean.dtmdl}" var="users"
varStatus="status">
<tr>
<td class="text-center">#{status.index+usersManagedBean.pagination.currentPage*usersManagedBean.pageSize+1}</td>
<td >
<h:link id="cedit1" value="#{users.username}" outcome="adminUserDetails">
<f:param name="userName" value="#{users.username}"/>
</h:link>
<h:outputText value=" "/>
</td>
<td>#{users.email}</td>
<td class="text-center">
<input type="checkbox" jsf:id="user#{status.index}" jsf:value="#{users.validity}" />
</td>
<td> #{users.lastLoginDate} </td>
</tr>
</ui:repeat>
</tbody>
</table>
...
<h:selectOneMenu id="pageSize" class=" btn" value="#{usersManagedBean.pageSize}">
<f:selectItems id="pageSizeValue" value="#{usersManagedBean.page}" var="pg"
itemLabel="#{pg}"
itemValue="#{pg}"/>
<f:ajax execute="pageSize pageSizeValue" listener="#{usersManagedBean.recreatePageSize}" render="usersF"/>
</h:selectOneMenu>
</h:form>
Generated html code (shown at browser):
<tbody>
<tr>
<td class="text-center">1</td>
<td><a id="usersF:usersTable:0:cedit1" name="usersF:usersTable:0:cedit1" href="/jsfBootstrapMV/admin/adminUserDetails.xhtml?userName=admin">admin</a>
</td>
<td>
</td>
<td class="text-center"><input id="usersF:usersTable:0:user" name="usersF:usersTable:0:user" checked="checked" type="checkbox" />
</td>
<td> Mon May 05 22:12:08 ICT 2014</td>
</tr>
<tr>
<td class="text-center">2</td>
<td><a id="usersF:usersTable:1:cedit1" name="usersF:usersTable:1:cedit1" href="/jsfBootstrapMV/admin/adminUserDetails.xhtml?userName=sarawut">sarawut</a>
</td>
<td>
</td>
<td class="text-center"><input id="usersF:usersTable:1:user" name="usersF:usersTable:1:user" checked="checked" type="checkbox" />
</td>
<td> Tue May 06 19:34:38 ICT 2014
</td>
</tr>
</tbody>