I am working on a xhtml file that has inputtexts, commandlinks and data table. Part of the content of the file would be something like this:
<div>
<h:inputText value="#{MyBean.inputval}" />
<p:commandLink value="Button A" action="#{MyBean.actionA}" />
<p:commandLink value="Button B" action="#{MyBean.actionB}" />
</div>
<p:dataTable value="#{MyBean.dataList}" var="data">
<p:columnGroup type="header">
<p:row>
<p:column headerText="headerA" selectionMode="multiple" rowspan="2" />
<p:column headerText="headerB" />
</p:row>
<p:row>
<p:column headerText="headerB2" />
</p:row>
</p:columnGroup>
// This column is the source of the problem
<p:column selectionMode="multiple" />
<p:column><h:outputText value="#{data.get('hb')}" /><br/>
<h:outputText value="#{data.get('hb2')}" />
</p:column>
</p:dataTable>
The above works fine if I remove the selectionMode="multiple" on the part of the dataTable, I have pointed out via a comment. The issue is none of my commandlinks work. I get no errors whatsoever, nothing just happens.
However, if I removed the selectionMode="multiple", all of my commandlinks work but the checkbox on the table header that will select all checkboxes is disabled.
My question is how can I make both work? What am I doing wrong? Please help
Your p:column in the header cant have a headerText because this is a special primefaces function. You want to check the header checkbox for all subrows be selected. just adpot the same style as used in the showcase.
Related
I want to add one row(hard coding) in the beginning of both columns. Can someone help me on how to implement it?
I am new to JSF so unable to get it.
<p:dataTable var="DataTableValue" value="#{showTableBean.list}">
<p:column headerText="Attribute" >
<h:outputText value="#{DataTableValue.attribute}" />
</p:column>
<p:column headerText="Vehicle Data">
<h:outputText value="#{DataTableValue.value}" />
</p:column>
</p:dataTable>
I'm doing project in primefaces. I included the data table and sort order. when I click the icon it will not working.
I tried the below code:
<p:dataTable var="car" value="#{dtSortView.cars1}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
</p:dataTable>
You need to wrap your p:dataTable inside h:form tag.
<h:form id="carForm">
<p:dataTable var="car" value="#{dtSortView.cars1}">
<p:column headerText="Id" sortBy="#{car.id}">
<h:outputText value="#{car.id}" />
</p:column>
</p:dataTable>
</h:form>
You can check this from here .
Hope it helps.
I have a <p:dataTable > which is updated from a button and is also filled. The data is displayed correctly. But the PROBLEM is that when I click/select any row, NO RESPONSE; previously while being clicked, the row was highlighted, now-> no highlight. I have done this type of design many times but this time the <p:dataTable> is behaving weirdly. I cannot find the root of problem.
My XHTML snippet for table is :
<p:dataTable id="tblSales" rowIndexVar="rowsn"
paginator="true" value="#{invSaleMB.dummyList}"
var="saleObj" selectionMode="single"
selection="#{invSaleMB.dummySaleObj}"
rowKey="#{saleObj.item.itemTypeId}">
<p:column headerText="#">
<h:outputLabel value="#{rowsn+1}" />
</p:column>
<p:column headerText="Name">
<h:outputLabel value="#{saleObj.item.itemTypeName}" />
</p:column>
<p:column headerText="Count">
<h:outputLabel value="#{saleObj.count}" />
</p:column>
<p:column headerText="Unit Price">
<h:outputLabel value="#{saleObj.unitPrice}" />
</p:column>
<p:column headerText="Total Price">
<h:outputLabel value="#{saleObj.total}" />
</p:column>
</p:dataTable>
My backing bean is #ViewScoped.
And another component which is not responding to an update trigger is <pe:inputNumber> and value for this component is 'double'. I changed the <pe:inputNumber> to <p:inputText> and worked well and displayed accurate data.
<pe:inputNumber id="totalCost" disabled="true" value="#{invSaleMB.totCost}" />
The datatable and pe:inputNumber are on same form.
What have you changed between "before" (was working) and "now" (not working)?. You are sure "#{saleObj.item.itemTypeId}" is unique for each element of the table? More code of the page could be useful.
For pe:inputNumber to work remember to include xmlns:pe="http://primefaces.org/ui/extensions" in your html tag.
Given the code below (taken from the PrimeFaces ShowCase), what is the best way to change the functionality so that the text in the second column - <h:outputText value="#{car.id}" /> - acts as a link to expand/contract the row (rather than the <p:rowToggler> image)?
Not sure how easy this is/should be, but I'm pretty new to PrimeFaces and unsure of how this could be done. I've looked through the documentation and the PrimeFaces ShowCase), (and played with similar code for a few hours), but I've been unable to get it done.
ShowCase code:
<h:form>
<p:dataTable var="car" value="#{dtBasicView.cars}">
<f:facet name="header">
Expand rows to see detailed information
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column headerText="Id">
<h:outputText value="#{car.id}" /> <!-- This text needs to be a link that expands the row -->
</p:column>
<p:column headerText="Year">
<h:outputText value="#{car.year}" />
</p:column>
<p:rowExpansion>
<p:panelGrid columns="2" columnClasses="label,value" style="width:300px">
<f:facet name="header">
<p:graphicImage name="demo/images/car/#{car.brand}-big.gif"/>
</f:facet>
<h:outputText value="Id:" />
<h:outputText value="#{car.id}" />
<h:outputText value="Year" />
<h:outputText value="#{car.year}" />
<h:outputText value="Color:" />
<h:outputText value="#{car.color}" style="color:#{car.color}"/>
<h:outputText value="Price" />
<h:outputText value="$#{car.price}" />
</p:panelGrid>
</p:rowExpansion>
</p:dataTable>
</h:form>
Edit - Found a simple solution, but not sure it's the most elegant. Any reason not to use this?
<p:column style="display:none !important">
<p:rowToggler />
</p:column>
<p:column>
<h:outputLink value="#">#{car.id}</h:outputLink>
</p:column>`
The default PrimeFaces configuration doesn't allow for anything else than a <p:rowToggler /> to toggle a <p:rowExpansion>.
One solution could be using some custom JS functions to add/remove CSS classes on generated HTML elements.
The other solution can be found here : http://forum.primefaces.org/viewtopic.php?f=3&t=11308&p=55114#p55114. It's about modifying PrimeFaces sources to match your needs.
There is a easy way to do that. Create a link in a div and modify the class of the div with "ui-row-toggler" which you can get from rowToggler html source. e.g.
<div class="ui-row-toggler">Test</div>
The reason you can do that is because if you check the html source for primefaces row toggler, you can find it is
<div class="ui-row-toggler ui-icon ui-icon-circle-triangle-e"></div>
So the only thing you need to do is putting the same class to your customized div which has a link inside.
Hello guys I have a problem with my datatable I want to filter it, but if i put something into the text field nothing is shown and also if i clear the input also nothing.
It is possible if i have more than one statment in a column?
So I use primefaces 3.5 and jsf 2.1
Here is the code and if you need more code post an comment. thx
<p:dataTable id="inboxTable" var="task" value="#{taskboxBean.taskboxInboxList}" paginator="true"
widgetVar="inboxTable" rows="10" selection="#{taskboxBean.selectedTaskbox}"
selectionMode="single" rowKey="#{task.ID}" emptyMessage="" paginatorPosition="bottom"
filteredValue="#{taskboxBean.inboxList}">
<p:ajax event="rowSelect" update=":contentForm, :postForm:tabViewPosts:inboxTable"
listener="#{taskboxBean.onTaskboxRowSelect}" />
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Suchen:" />
<p:inputText id="globalFilter" onkeyup="inboxTable.filter()"
style="margin-left:5px;width:150px" />
</p:outputPanel>
</f:facet>
<p:column headerText="Post">
<h:outputText
value="#{task.FROM_USER.FIRST_NAME} #{task.FROM_USER.LAST_NAME} (#{task.FROM_USER.EMAIL})" />
<div align="right">
<h:panelGroup rendered="#{!task.IS_SEEN}" class="fa fa-envelope fa-2x" />
<h:panelGroup rendered="#{task.IS_SEEN}" class="fa fa-envelope-o fa-2x" />
</div>
<h:outputText value="#{task.TASKTYPE.NAME}" />
<br />
<h:outputText value="#{task.CREATE_TIMESTAMP}" />
</p:column>
</p:dataTable>
It is not explicitely written in documentation, but as mentioned on PrimeFaces forum, you need to declare filterBy attribute on columns you want to make searchable via global filter.
It is also suggested here to add filterStyle="display:none" to columns if you don't want a filter to be visible on individual columns.
The example from documentation has filterBy:
<p:dataTable var="car" value="#{carBean.cars}"
filteredValue="#{carBean.filteredCars}" widgetVar="carsTable">
<f:facet name="header">
<p:outputPanel>
<h:outputText value="Search all fields:" />
<h:inputText id="globalFilter" onkeyup="carsTable.filter()" />
</p:outputPanel>
</f:facet>
<p:column filterBy="#{car.model}" headerText="Model" filterMatchMode="contains">
<h:outputText value="#{car.model}" />
</p:column>
</p:dataTable>
however, as typical for PrimeFaces documentation, it's not written that it won't work without filterBy.
You must add getter and setter of your taskboxInboxList in the taskboxBean class. But it filters just the first statement placed in the column.