Tooltip for each row in data table - jsf-2

This questions screams to be a duplicate of JSF 2.0 + Primefaces 2.x: Tooltip for datatable row but since this old question has NO working/satisfying solution for me and there's no way (?) to get attention back to it I opened this new one.
It's very simple:
I have a dataTable (with JSF-standard or with primefaces) and I'd like to add a different tooltip for EACH row (not just for one field in it!).
What I tried so far:
<pe:tooltip value="This is row number #{rowIndex}"
for="#(#table1 tr[role=row][data-ri=#{rowIndex}])"
atPosition="top center" myPosition="bottom center"
shared="true" />
where #table1is the ID of my data table . This came to my mind because of this.
And both solutions from JSF 2.0 + Primefaces 2.x: Tooltip for datatable row : the first solutions works, but only for ONE field / id and not for the whole row. The second solution won't work at all for me.
And I'm 100% sure that both - primefaces & primefaces extensions - are working for me, I tested it.

I've done some test and this approach works perfectly:
<p:dataTable var="entry" value="#{....}" styleClass="myTable" rowIndex="rowIndex">
<p:column headerText="Header 1">
<h:outputText value="#{entry.value1}" />
</p:column>
<p:column headerText="Header 2">
<h:outputText value="#{entry.value2}" />
<pe:tooltip value="This is row number #{rowIndex}" forSelector=".myTable tr[role=row][data-ri=#{rowIndex}]"
shared="true" atPosition="top center" myPosition="bottom center" showDelay="500" />
</p:column>
</p:dataTable>
Note that in order to the data-ri attribute to be placed on datatable rows, you need the to add the attribute rowIndex (rowIndex="rowIndex").
It also worked with
<p:tooltip for="#(.myTable tr[role=row][data-ri=#{rowIndex}])" value="This is row number #{rowIndex}" />

You can also do it without using primefaces extensions. This example code works for me with primefaces 5.2.
Be aware that in primefaces 5.2 the p:dataTable attibute is rowIndexVar and not rowIndex as in the example above.
<h:form id="idform">
<p:dataTable var="komp"
id="idDataTable"
value="#{kompselect.listKomponenten}"
rowIndexVar="rowIndex"
selection="#{kompselect.selectedKomponente}"
rowKey="#{komp.name}">
<p:column>
<h:outputText id="otSelKomponente" value="#{komp.name}" />
<p:tooltip rendered="#{komp.displayToolTip}"
for="idForm:iddataTable:#{rowIndex}:otSelKomponente"
value="this is my Tooltip"/>
</p:column>
</p:dataTable>

according to this commment https://stackoverflow.com/a/13327334/4851983 (thaks BalusC )
Let primefaces link the objects automatically. I could show a tooltip for a textArea Primefaces 3.5 , as is show below
<p:dataTable id="commentsTable"
value="#{historyReq.commentsFromReq}" var="comment"
emptyMessage="#{localeMsg.roles_table_empty}"
rows="10"
styleClass="myTable"
rowIndexVar="rowIndex">
<p:column headerText="HEADER A">
<h:outputText value="#{bean.valorA}" />
</p:column>
<p:column headerText="#{HEADER B}">
<p:inputTextarea id="txtArea" cols="45" rows="1"
value="#{bean.valorB}"
readonly="true"
disabled="false"
autoResize="false">
<f:converter converterId="commentsConverter" />
</p:inputTextarea>
<p:tooltip for="txtArea" value="This is row number #{rowIndex}" />
</p:column>

Related

Primefaces datatable pagination resets filter

I'm using a p:datatable with filters and pagination. Both work fine individually, but if I filter first then move to the second page of results, the filter is removed and I'm seeing the second page of the original data set. Here's what my table looks like :
<p:dataTable value="#{bean.products}" var="product"
paginator="true" paginatorPosition="bottom" rows="5"
filteredValue="#{bean.filteredProducts}"
rowKey="#{product.prdctId}">
<p:ajax event="sort" skipChildren="false" />
<p:column headerText="Description" filterBy="#{product.description}" filterMatchMode="contains"
sortBy="#{product.prdctId}">
<h:outputText value="#{product.description}" />
</p:column>
(other columns)
</p:dataTable>
Any ideas?
Using Primefaces 5.2, JSF 2.0.3
Edit : After searching a bit more, I found another post dealing with the same issue, but it was never answered.
<p:dataTable value="#{bean.products}" var="product"
paginator="true" paginatorPosition="bottom" rows="5"
filteredValue="#{bean.filteredProducts}"
rowKey="#{product.prdctId}">
<p:ajax event="sort" skipChildren="false" />
<p:column headerText="Description" filterBy="#{product.description}" filterMatchMode="contains"
sortBy="#{product.prdctId}">
<h:outputText value="#{product.description}" />
</p:column>
(other columns)
Add in your datatable: widgetVar="productTable"
in your button add this: oncomplete="PF('productTable').clearFilters();"

Icefaces dataExporter does not display value of a column

I am using Icefaces 3.3 and ice:dataExporter to export excel format of a datatable but it doesn't load any values in the excel sheet. It shows only the header of each column. I figured that the panelGroup wrapped around the column value is causing the issue. Is there a way to fix the issue without removing the panelGroup?
<ice:dataExporter includeColumns="2,3,4,5,6,7,8,9" label="Export to Excel" id="iceDataExp_id_2" styleClass="iceDataExp" for="carTable" type="excel"/>
<ice:dataTable id="carTable" value="#{carBean.carList}" var="car">
...<!-- Column 0 -->
...<!-- Column 1 -->
<!--Column 2 -->
<ice:column rowspan="2">
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<ice:panelGroup contextValue="#{car.Id}"
menuPopup=":::myPopupmenu">
<ice:outputText value="#{car.carName}" />
</ice:panelGroup>
</ice:column>
....
</ice:dataTable>
Not that I know of...
As a workaround, you could just replace it with a link "export". That link would be a commandLink inside the column that will trigger the export.
Even if this is quite an old question. I just had the same problem and found this workaround:
<ice:column rowspan="2">
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<ice:panelGroup contextValue="#{car.Id}"
menuPopup=":::myPopupmenu"
value="">
<ice:outputText value="#{car.carName}" />
</ice:panelGroup>
</ice:column>
The trick seems to be set an empty string as value for the panelGroup.

I can't update from within a facet

I'm using primefaces 3.3 with JSF 2.1. In the code below, I have a primeFaces dataTable that contains rows of data drawn from the database which is correctly activated from a tree component on the left part of my page. The dataTable displays and behaves correctly. I have a delete functionality that calls "update" which refreshes my dataTable and reflects my changes after the database was updated. My problem is with with f:facet (id="header"). Contained in that facet is a commandLink that creates a new row in my dataTable. It works in the sense that my database is correctly updated. The dataTable is not refreshed after this. In order to refresh my dataTable, I have to click on another node in my tree component (on the left of the page) and then return to the original treeNode to see my dataTable perfectly updated. What can I add to my code to update the dataTable dynamically?
Unfortunately, I can't add all my permutations that I've tried here - I've spent a long time on this problem - and your inputs will be greatly appreciated!
<h:form id="formRight" >
<p:dataTable var="material" value="#{entityCrudTreeBean.materialList}" id="materials" editable="true" paginator="true" rows="10" sortBy="#{material.name}">
<p:ajax event="rowEdit" listener="#{entityCrudTreeBean.onEditRow}"/>
<f:facet id="header" name="header">
In-Cell Material Editing
<br />
<p:commandLink id="create" value="Add new material" action="#{entityCrudTreeBean.createNewMaterial}" update=":formRight"/>
</f:facet>
<p:column headerText="Name" style="width:125px">
<p:cellEditor>
...
</p:cellEditor>
</p:column>
<p:column headerText="Options" style="width:10px" >
<p:rowEditor />
<p:commandLink id="delete" action="#{entityCrudTreeBean.deleteRow(material)}" update=":formRight">
<h:graphicImage value="#{resource['icons:Delete-icon.png']}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
edit:
changing the line to
<p:commandLink id="create" value="Add new material" action="#{entityCrudTreeBean.createNewMaterial}" update=":formRight:materials"/>
doesn't work either
edit:
changing to :
<f:facet id="header" name="header">
In-Cell Material Editing
<br />
<p:commandLink id="create" value="Add new material" ajax="true" process="#this" action="#{entityCrudTreeBean.createNewMaterial}" update="#form"/>
</f:facet>
doesn't solve the problem either.
I had a similar issue as you a while back.
My working code looks like:
<f:facet name="header">Product List
<p:commandLink id="create" value="Add new product" ajax="true" process="#this"
action="#{modelBean.save}" update="#form"/>
</f:facet>
Stephen, you're on the right track!
It was solved in a simpler way: I updated my dataTable list in managed bean - which I did for the delete but not for the insert. Massive oversight there.
This code works:
<p:commandLink id="create" value="Add new material" action="#{entityCrudTreeBean.createNewMaterial}" update=":formRight"/>
Tip for people after me: Primefaces 3.3 has a known issue concerning updating within the dataTable. You need to wrap the dataTable with another component like a layout of a form. Calling update on the wrapper works.
According to the primefaces blog from Aug 15, this has been fixed in 3.4.RC1. But they changed the tree components. I'll wait for the 3.4 final release before upgrading.

Create table columns dynamically in JSF

I'm working on dashboard application where I have to retrieve a set of records and display in dynamic tables boxes. Page frame length is fixed. now of columns and rows can be initialized. It should look like this sample:
Currently I'm using data table to display but it prints all the data in one column. How would I change my code to above pattern?
<o:dataTable id="tabBlSearch" var="item"
onkeyup="handleLeftRightArrowOnDataTable('frmDashBoard:tabBlSearch')"
value="#{bLDashBoardAction.listBondLoc}">
<o:column style="width: 20px;">
<h:outputText value="#{item.awb}" />
</o:column>
</o:dataTable>
You can achieve this with standard JSF components using a <h:panelGrid> wherein <c:forEach> is been used to generate the cells during the view build time. The <ui:repeat> won't work as that runs during view render time.
<h:panelGrid columns="5">
<c:forEach items="#{bean.items}" var="item">
<h:panelGroup>
<h:outputText value="#{item.value}" />
</h:panelGroup>
</c:forEach>
</h:panelGrid>
As to component libraries, I don't see anything in OpenFaces' showcase, but PrimeFaces has a <p:dataGrid> for exactly this purpose, even with pagination support.
<p:dataGrid columns="5" value="#{bean.items}" var="item">
<p:column>
<h:outputText value="#{item.value}" />
</p:column>
</p:dataGrid>

Getting the filtered list in datatable

I am trying to filter a datatable using filter field in the column and get the filtered list (which populates datatable) and update another component (Toplam TL Teminati and Toplam Dolar Teminati) according to the filtered list's values in my page.
Is there anyway to do this in Primefaces 2.2.1 and JSF 2? If not can you rec commend a workaround for this case?
Thanks in advance.
To give you an example of how I achieved custom filter logic in my Primefaces 2.2.1 dataTable, I am giving you a scaled version of my code.
<p:dataTable value="#{listBeans.beans}" var="bean" dynamic="true" paginator="true" rows="20" paginatorPosition="bottom"
emptyMessage="No Beans" loadingMessage="Loading. . ." selectionMode="single" selection="#{listBeans.selectedBean}"
id="beanList" widgetVar="beanTable">
<f:facet name="header">
<h:panelGrid columns="4">
<h:outputText value="Bean List" />
<p:outputPanel>
<h:outputText value="Year Filter: " />
<h:selectOneMenu value="#{listBeans.yearFilter}"
onchange="yearFilterBtn.jq.click(); refreshFilters();">
<f:selectItems value="#{listBeans.years}" />
</h:selectOneMenu>
<p:commandButton id="yearFilterBtn" widgetVar="yearFilterBtn" action="#{listBeans.filterYears}"
update="listBeansForm:beanList" style="display:none;" />
</p:outputPanel>
<p:outputPanel>
<h:outputText value="Filter By Beanchild: " />
<p:inputText value="#{listBeans.beanchildFilter}" style="width: 150px; margin-right: 4px;" />
<!-- refreshFilters forces the visitor filter to refresh the selection if column filters are selected. -->
<p:commandButton oncomplete="refreshFilters();" value="Filter"
action="#{listBeans.filterBeanchildren}" update="listBeansForm:beanList" />
</p:outputPanel>
<p:commandButton value="Export to XLS" ajax="false">
<p:dataExporter target="beanList" type="xls" fileName="BeanReport"
excludeColumns="0,5,6" postProcessor="#{listBeans.postProcessExcelReport}" />
</p:commandButton>
</h:panelGrid>
</f:facet>
<p:column style="width:16px">
<p:rowToggler />
</p:column>
<p:column filterStyleClass="filtertag" filterBy="#{bean.beanDateDisplay}" filterMatchMode="startsWith">
....
</p:dataTable>
Without really going into too much detail about the managed bean code, the actions of the command button are essentially passing filter arguments to my BO layer that requery the database for the new list of beans. The explicit update of the dataTable component is needed to refresh the data.
You will notice that on the explicit Beanchild Filter button that is not hidden, I have an oncomplete attribute that references a javascript function called refreshFilters(). I can't remember exactly the problem I had, but I think it is a bug in the 2.2.1 version of Primefaces when a column filter value exists and an asynchronous update occurs within the dataTable itself. Here is the javascript function:
function refreshFilters() {
var filters = jQuery('.filtertag');
var uppedOnce = false;
filters.each(function(idx) {
var curEl = jQuery(this);
if (curEl.val() != '') {
curEl.keyup();
uppedOnce = true;
}
});
if (!uppedOnce) {
jQuery(filters[0]).keyup();
}
}
You can see here that I am locating every DOM element that has the class filtertag, which would be the column filters. I am saying that if a value exists in that field after the server action is complete, then I am manually triggering a keyup event as this will "refilter" the column with the previous value from before.
I am not sure if it is necessary in later versions of Primefaces, I am not even sure it is necessary now, so I suggest trying to do this without the Javascript workaround and if you run into problems cooridnating the two then you can consider using the Javascript.

Resources