get value of a row in datatable myfaces 2.1 - jsf

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

How to add Side header to primefaces datagrid?

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.

Extended Datatable onrowmouseover does not work properly

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.

command button doesn't work in dialog

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.

validating dynamic textbox2 based on entered value in textbox1 in rich table

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.

Records with data on multiple rows on a datatable using faces

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...

Resources