myfaces 1.2 I have a datatable in myfaces2.1 and displaying a check box against each row of the datatable now if I select a (or multiple) checkbox(es) against the rows I want to get the row data in managed bean and want to pass those particular values into a different screen can anyone help me in getting the particular checked row values passing to managed bean..?
<h:column>
<h:selectBooleanCheckbox value="#{myResourcesDetails.chkBxVal}" binding="#{myResourcesDetails.selectedValue(actionEvent)}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="tblHdr0" value="Employee Id" style="font-family: arial; font-size: 12px; color: blue"/>
</f:facet>
<h:commandLink id="emNo" value="#{resList.empNo}" onclick="fn_openResDetails(#{resList.empNo});" style="font-family: verdana; font-size: 12px; color: olive"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="tblHdr1" value="Resource Name" style="font-family: arial; font-size: 12px; color: blue"/>
</f:facet>
<h:outputText value="#{resList.resName}" style="font-family: verdana; font-size: 12px; color: olive"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="tblHdr3" value="Project Name" style="font-family: arial; font-size: 12px; color: blue"/>
</f:facet>
<h:outputText value="#{resList.projName}" style="font-family: verdana; font-size: 12px; color: olive"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText id="tblHdr4" value="Manager Id" style="font-family: arial; font-size: 12px; color: blue"/>
</f:facet>
<h:outputText value="#{resList.manager}" style="font-family: verdana; font-size: 12px; color: olive"/>
</h:column>
</h:dataTable>
Add chkBxVal field to your Object that inside resList
Try
and change
<h:selectBooleanCheckbox value="#{myResourcesDetails.chkBxVal}"
binding="#{myResourcesDetails.selectedValue(actionEvent)}"/>
into
<h:selectBooleanCheckbox value="#{resList.chkBxVal}"/>
Than when submitting to data to the server loop over the values in your List and look at the chkBxVal value in each of your Objects in the list...
Related
I am trying to create following datagrid with primefaces
Please can anyone suggest which data component can work to get the above table.
You can use a panelGrid with your own styling:
<p:panelGrid>
<f:facet name="header">
<p:row>
<p:column>HEADING1</p:column>
<p:column>HEADING2</p:column>
<p:column>HEADING3</p:column>
<p:column>HEADING4</p:column>
<p:column>HEADING5</p:column>
<p:column>HEADING6</p:column>
<p:column>HEADING7</p:column>
<p:column>HEADING8</p:column>
</p:row>
</f:facet>
<p:row>
<p:column styleClass="firstcolumn">TITLE1</p:column>
<p:column/> <p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
<p:row>
<p:column styleClass="firstcolumn">TITLE2</p:column>
<p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
<p:row>
<p:column styleClass="firstcolumn">TITLE3</p:column>
<p:column/><p:column/><p:column/><p:column/><p:column/><p:column/><p:column/>
</p:row>
</p:panelGrid>
<style>
.ui-panelgrid-even, .ui-panelgrid-odd{
border: 1px solid #ffffff;
background:#88B147;
}
.ui-panelgrid-header .ui-widget-header{
background: #0C52CB;
font-weight: normal;
border: 1px solid #ffffff;
}
.ui-panelgrid .firstcolumn{
background: #8BC1FF;
color: #000000;
}
</style>
If you are showing data which is in a list on your bean it might be more appropriate with a dataTable though. But this you can style also, use firebug or similar to find the styles you need to overwrite.
I am trying to highlight the rows of a table when mouse is over. Here is the code:
<div style="position: relative; top: 120px; left: 300px">
<h:panelGrid columns="2">
<h:form>
<rich:extendedDataTable onrowmouseover ="this.style.backgroundColor='yellow'"
onrowmouseout="this.style.backgroundColor='white'" value="#{moneyTransferManager.allAccounts}" var="accounts"
selection="#{extTableSelectionBean.selection}" id="table" frozenColumns="2"
style="height:170px; width:484px;">
<a4j:ajax execute="#form" event="selectionchange" listener="#{extTableSelectionBean.selectionListener}"
render=":res"/>
<f:facet name="header">
<h:outputText value="Hesaplarım"/>
</f:facet>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Hesap Numarası"/>
</f:facet>
<h:outputText value="#{accounts.accountNumber}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Para Birimi"/>
</f:facet>
<h:outputText value="#{accounts.accountCurrency}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="IBAN"/>
</f:facet>
<h:outputText value="#{accounts.iban}"/>
</rich:column>
<rich:column width="120px;">
<f:facet name="header">
<h:outputText value="Bakiye"/>
</f:facet>
<h:outputText value="#{accounts.balance}"/>
</rich:column>
</rich:extendedDataTable>
</h:form>
<a4j:outputPanel id="res">
<rich:panel header="Seçilen Hesap:" rendered="#{not empty extTableSelectionBean.selectionItems}">
<rich:list type="unordered" value="#{extTableSelectionBean.selectionItems}" var="sel">
<h:outputText value="#{sel.accountCurrency} - #{sel.iban} - #{sel.balance}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
<rich:panel styleClass="top">
<div style="position: relative; left: -3px; top: 23px">
<h:outputText style=" font-size: 12px; font-weight: bold; " value="Yapmak istediğiniz işlem .."></h:outputText>
</div>
<h:form>
<div style="position: relative; left: 160px; top: -3px">
<rich:select value="#{transactionManager.selection}" defaultLabel="Bir işlem seçin...">
<f:selectItem itemValue="0" itemLabel="Hesap Hareketlerini Listele" />
</rich:select>
</div>
<div style="position: relative; left: 380px; top: -22px">
<h:commandButton action="#{transactionManager.accountActivity()}" value="Devam" style="color: #000000; font-weight: bold; width: 70px; height: 21px; background-color: grey; -moz-border-radius: 0px; -webkit-border-radius: 15px;"></h:commandButton>
</div>
</h:form>
</rich:panel>
</h:panelGrid>
</div>
The problem is, only columns 1-2 together or 3-4 together are highlighted like this:
Can anyone tell me the problem? Thanks
This is being caused by the frozenColumns attribute. Remove it if you want all the rows to be selected.
I have a map layout with markers in my jsf page. When I click on a marker I can retrieve all info about that point through my database. As I click on a marker a dialog is shown up. Here is my layout unit:
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<p:growl id="growl" showDetail="true"/>
<p:gmap center="41.067445,29.047749" zoom="11" type="HYBRID" model="#{mapTrial.simpleModel}" style="width:100%;height:100%" streetView="true">
<p:ajax event="overlaySelect" listener="#{mapTrial.onMarkerSelect}" update="growl" partialSubmit="true" immediate="true"/>
<p:gmapInfoWindow rendered="true">
<h:form id="form">
<p:tabView id="tabView" dynamic="false" cache="true" orientation="top" effect="blind" style="font-size: 10px;font-weight: bold;">
<p:tab id="tab1" title="Proje Bilgileri">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Proje Adı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectName}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Detayı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectExp}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Koordinatları: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectCoordLat}, #{mapTrial.projectCoordLong}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İlçe: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.district}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sektör: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.sector}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İş Durumu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.workStatus}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.assistant}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İhale Adı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.bidName}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Firma: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.company}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İhale Bedeli: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.bidCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Ödenen Hak Ediş Tutarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.costPaid}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="SÜRE BİLGİSİ" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Başlangıç Tarihi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.startDate}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İşin Süresi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.processTime}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Bitiş Tarihi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.endDate}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab2" title="Teknik Bilgiler">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Ada/Parsel: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.parcel}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Plan Durumu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.planStatus}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yolun Genişliği: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.roadWidth}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yolun Uzunluğu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.roadLength}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Toplam Alan: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.totalArea}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İlave Bilgi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.extraInfo}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Teklif Birim Fiyat: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.unitOffer}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Yapım Yaklaşık Maliyeti: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.approxCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Proje Maliyeti: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.projectCost}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Dosya Kodu: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.fileNu}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab3" title="Proje Teşkilatı">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Şef: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.chef}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.arch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.strEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.landArch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.elecEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Jeoloji Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.geoEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Makine Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.machEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Harita Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mapEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Şehir Plancısı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.planEng}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İHALE ÖNCESİ TAKİP" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Sorumlu Müd. Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.assistantBefore}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Sorumlu Müh./Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.engArch}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="UYGULAMACI KONTROL TEŞKİLATI" style="font-weight: bold; font-size: 13px; float: right; font-style: italic"/><p:separator />
<h:outputText value="Müdür Yard.: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mudYard}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Mimar: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.mim}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="İnşaat Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.ins}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Peyzaj Mimarı: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.peyz}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Elektrik Mühendisi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.elek}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab id="tab4" title="Firma Bilgisi">
<h:panelGrid columns="2" cellpadding="3">
<h:outputText value="Yetkili Kişi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compResp}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Görevi: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compResJob}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Telefon: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compTel}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="Adres: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compAddress}" style="font-weight: bold; font-size: 13px;"/>
<h:outputText value="E-Posta: " style="font-size: 13px;"/>
<h:outputText value="#{mapTrial.compMail}" style="font-weight: bold; font-size: 13px;"/>
</h:panelGrid>
</p:tab>
<p:tab title="Yorumlar">
<p:commandButton value="Yorum Ekle" id="addCom" onclick="comDialog.show();" style="font-size: 11px;font-weight: bold;">
<p:dialog header="Yorum Ekle" widgetVar="comDialog" resizable="true" showEffect="explode" hideEffect="explode" appendToBody="true" modal="true" closable="true">
<p:inputTextarea rows="6" cols="33" />
<br />
<p:commandButton value="Ekle" action="#{mapTrial.saveComm}" immediate="true" style="font-size: 12px;font-weight: bold;"/>
<p:commandButton value="Vazgeç" async="true" onclick="comDialog.hide();" style="font-size: 12px;font-weight: bold;"/>
</p:dialog>
</p:commandButton>
</p:tab>
<p:tab title="Dosyalar">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage value="/images/pdf.png" />
<h:outputText value=""/>
</h:panelGrid>
</p:tab>
<p:tab title="Resimler">
<h:panelGrid columns="2" cellpadding="10">
<p:graphicImage value="/images/pdf.png" />
<h:outputText value=""/>
</h:panelGrid>
</p:tab>
</p:tabView>
<br />
<center>
<h:outputText value="Toplam Proje Sayısı: #{mapTrial.total}" style="font-size: 13px; color: red"/>
</center>
</h:form>
</p:gmapInfoWindow>
</p:gmap>
</p:layoutUnit>
My problem here is with that part:
<p:tab title="Yorumlar">
<p:commandButton value="Add Comment" id="addCom" onclick="comDialog.show();" style="font-size: 11px;font-weight: bold;">
<p:dialog header="Add Comment" widgetVar="comDialog" resizable="true" showEffect="explode" hideEffect="explode" appendToBody="true" modal="true" closable="true">
<p:inputTextarea rows="6" cols="33" />
<br />
<p:commandButton value="Add" action="#{mapTrial.saveComm}" immediate="true" style="font-size: 12px;font-weight: bold;"/>
<p:commandButton value="Cancel" async="true" onclick="comDialog.hide();" style="font-size: 12px;font-weight: bold;"/>
</p:dialog>
</p:commandButton>
</p:tab>
When I open the tab and click on the button it shows the add comment dialog. But as dialog is shown and the add button is clicked, simply nothing happens. I tried it with removing appendToBody and model attributes but that time it doesn't show comment dialog even.
How can I achieve this?
Move the <p:dialog> outside the <h:form> and add a <h:form> inside it.
<h:form>
<!-- JSF code... -->
<p:tab>
<!-- more JSF code... -->
<!-- the button that gives you problems -->
<!-- the p:dialog doesn't go inside the button =\ -->
<p:commandButton value="Add Comment" id="addCom" onclick="comDialog.show();"
style="font-size: 11px;font-weight: bold;">
</p:commandButton>
</p:tab>
<!-- more and more JSF code... -->
<h:form>
<!-- the dialog goes here -->
<p:dialog header="Add Comment" widgetVar="comDialog" resizable="true"
showEffect="explode" hideEffect="explode" appendToBody="true" modal="true"
closable="true">
<!--the p:dialog must have its own h:form -->
<h:form>
<p:inputTextarea rows="6" cols="33" />
<br />
<p:commandButton value="Add" action="#{mapTrial.saveComm}" immediate="true"
style="font-size: 12px;font-weight: bold;"/>
<p:commandButton value="Cancel" async="true" onclick="comDialog.hide();"
style="font-size: 12px;font-weight: bold;"/>
</h:form>
</p:dialog>
Next time, please don't post a code wall, instead provide a SSCCE in order to analyze your problem. We don't need to read all the code in order to find the problem.
I am creating components dynamically using rich:dataTable and the components in each row are checkbox, text1, text2. I am able to create/delete rows. I added validators for text1 and text2.
I need to validate text2 based on chars enetered in text1. Suppose in text1 component if 3 is entered then in text2 component I need to allow max 3 chars. And this need to be done for all the dynamically generated rows for the entire table.
<rich:dataTable id ="outtable" value="#{bean.Items}" var="row">
<rich:column>
<f:facet name="header">
<h:outputText id="selectrow" value="select" style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;" />
</f:facet>
<h:selectBooleanCheckbox value="#{row.selected}" />
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText size="15" value="Bean Value"
style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;"/>
</f:facet>
<s:decorate id="valueDecoration" template="layout/edit.xhtml">
<h:inputText size="8" maxlength="4" value="#{row.beanValue}" required="true" >
<f:validator validatorId="beanValueValidator"/>
<s:validate/>
<a:support event="onblur" reRender="valueDecoration" bypassUpdates="false" ajaxSingle="true"/>
</h:inputText>
</s:decorate>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="Bean Data"
style="font-weight: bold; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px;"/>
</f:facet>
<s:decorate id="dataDecoration" template="layout/edit.xhtml">
<h:inputText size="30" maxlength="40" value="#{row.beanData}" required="true">
<f:validator validatorId="beanDataValidator"/>
<s:validate/>
<a:support event="onblur" reRender="dataDecoration" bypassUpdates="false" ajaxSingle="true" />
</h:inputText>
</s:decorate>
</rich:column>
<f:facet name="footer">
<h:panelGroup>
<h:commandButton value="Add Row" action="#{bean.add}" />
<h:commandButton value="Delete Selected" action="#{bean.remove}" />
</h:panelGroup>
</f:facet>
</rich:dataTable>
How can I achieve this?
Give richfaces 3.3 Graph Validator (4.x) a try.
In JSF is it possible to have a datatable displays records as follows?
[Name ][Last Name][Age]
1. John Doe 20
Extra info on record 1
2. John Smith 20
Extra info on record 2
Thank you
I'm sure there are a number of ways you could do this.
If you don't mind nesting tables, you can use the panelGrid tag and CSS.
View:
<f:view>
<h:dataTable value="#{peopleBean.people}" var="row">
<h:column id="column1">
<f:facet name="header">
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="First Name" />
<h:outputText value="Last Name" />
<h:outputText value="Age" />
</h:panelGrid>
</f:facet>
<h:panelGrid columns="3" columnClasses="cell,cell,age">
<h:outputText value="#{row.firstname}" />
<h:outputText value="#{row.lastname}" />
<h:outputText value="#{row.age}" />
</h:panelGrid>
<h:outputText styleClass="extra" value="#{row.extraInfo}" />
</h:column>
</h:dataTable>
</f:view>
Stylesheet:
TABLE {
width: 100%;
}
TABLE TR TD {
text-align: left;
}
.cell {
width: 40%;
}
.age {
width: 20%;
}
.extra {
background-color: silver;
padding: 4px;
display: block;
width: 100%;
}
Third libraries, such as RichFaces, allow you to do that with the principle of subTable.
You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...