I have a datatable and I want to show a rich tooltip while hovering over a column in table.
<t:column id="nameColumn">
<a4j:outputPanel layout="block">
<rich:toolTip direction="bottom-right" showDelay="300"
layout="block">
<a4j:actionparam name="index" value="#{child.index}"
assignTo="#{tableBean.currentTableRowIndex}" />
<h:outputText value="#{tableBean.currentTableRowIndex}"/>
</rich:toolTip>
<h:outputText value="#{child.name}" id="childName"
styleClass="gridCell" >
</h:outputText>
</a4j:outputPanel>
</t:column>
If I use mode="ajax" nothing is appearing in tooltip. Actually it should display the row number. It would be very nice if you could help me. This issue is in v3.3.3
Pls ensure that your code is inside a form tag
Related
I want to show a list of key-value pairs in a datatable, where each pair is one row, inside an overlay panel. When a key-value pair is clicked, i want to update a <p:inputText>-Element, which is OUTSIDE the overlaypanel with the key-value of the selected row and simultaniously close the overlaypanel.
I just migrated from PF 4.0 to PF 6.1 and now im facing the issue, that whenever i use an update-attirbute inside the overlay panel, it appears to be empty and no content is shown.
here is an code example:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="car"
value="#{dtBasicView.cars}">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
<p:ajax
event="rowSelect"
update=":form:inputPvId,:form:myTable"
onsuccess="PF('overlayPV').hide()" />
</p:dataTable>
Previously it worked that way. All I changed is the way the Widget gets called from "overlayPV".hide()" to "PF('overlayPV').hide()" as the official Migration Guide suggested. If out cancel out the update=":form:inputPvId,:form:myTable" line in the ajax call, the content is shown properly.
Am I doing somethign wrong? My research showed, that other people also had trouble with the overlaypanel and the ajax update. However, i found no suitable solution for my problem.
I tried using the "onRowClick"-Attribute of the datable along with the widgetHide call like this:
<p:dataTable
onRowClick="PF('overlayPV').hide()" />
and it worked fine, however i could not figure out how to update the <p:inputText>-Element with the choosen value. I had to refresh the page to show the new value. I would be happy if someone suggested a solution for this. Thanks in advance.
I finally resolved the issue.
My initial problem was, that whenever an element inside the <p:overlayPanel> included the "update" attribute, the overlayPanel did not render any content and appeared empty.
i solved my issue with the <p:remoteCommand>-Tag, which I placed OUTSIDE of the overlayPanel as my example Code below shows:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="myTable"
value="#{dtBasicView.cars}"
onRowClick="remoteCommand()">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
<p:remoteCommand
name="remoteCommand"
update="inputPvId, myTable"
onsuccess="PF('overlayPV').hide()"/>
Note the onRowClick-Attribute of my dataTable which call the remoteCommand outside of te overlayPanel. The remoteCommand than updates all my Elements that need to be updated and also closes the overlayPanel.
I have p:dataTable, inside column I have a panelGrid where i want the value of the ouputText on the click of the panelGrid without page refresh. The code is something like:
<p:column headerText="5/5" style="width:40px; font-size:9pt;">
<p:panelGrid>
<p:ajax event="click" listener="#{myBean.showSelectedValue(row)}" update=":mainForm"/>
<h:outputText value="#{row.value1}" />
</p:panelGrid>
</p:column>
</p:dataTable>
<h:panelGrid id="ForecastChartTab">
<h:outputText id="value1" value="#{myBean.showValue.value1}" />
</h:panelGrid>
This is working, but the value is seen only on page refresh...! is something wrong here? :(
If you need to update the table, you can use the following
update="#([id$=dtTableId])"
If you need to update the output text you need use the following
update="#([id$= value1])"
With this type of format #([id$= value1]), you can update another component out of the behavior of others.
I am trying to get a primefaces checkbox datatable to select multiple rows and pass those values to the bean. I have an ajax event for rowSelect and that works fine, but the ajax for rowSelectCheckbox never fires and it is as if my checkboxes are 'unclickable'. When selecting a row the rowSelect ajax event fires and highlights the entire row and checks the checkbox. However, I am unable to check any other checkboxes off so it is obvious only the rowSelect ajax works and not the rowSelectCheckbox. Here is code:
<p:dataTable id="content-table"
var="obj"
value="#{releaseNotes.contentList}"
rows="5"
paginator="true"
style="width:100%"
selectionMode="multiple"
selection="#{releaseNotes.selectedContent}"
rowKey="#{obj.hashCode()}"
paginatorPosition="bottom"
rendered="#{releaseNotes.showContentTable}">
<p:ajax event="rowSelect" listener="#{releaseNotes.selectListenerCode}" update=":grids :buttons" immediate="true"/>
<p:ajax event="rowSelectCheckbox" listener="#{releaseNotes.checkBoxListener}" update=":grids :buttons" immediate="true" />
<f:facet name="header">Content</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<c:forEach items="#{releaseNotes.columnNames}" var="columnName">
<p:column headerText="#{columnName.toLowerCase().replace('_', ' ')}"
filterBy="#{obj.get(columnName)}" filterMatchMode="contains">
<h:outputText value="#{obj.get(columnName)}"/>
</p:column>
</c:forEach>
</p:dataTable>
Thanks in advance, my first post so I apologize if I missed some etiquette for the code formatting or anything like that, just let me know I will not take offense....
I have been searching for a while to find a solution for DataTable live scroll problem after sorting by a column.
First I found that "the columns" should have fixed width:
http://code.google.com/p/primefaces/issues/detail?id=1333
Then I found that scrollRows should be used instead of rows
http://code.google.com/p/primefaces/issues/detail?id=1236
Although I have made those changes, I couldn't manage to put live scroll after sorting by a column.
Can anyone help me please?
Thanks & Regards.
<p:dataTable id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}" var="item"
value="#{SimulationResultProductBean.simulationSummaryDetailList}"
scrollable="true"
scrollRows="25"
scrollHeight="350"
liveScroll="true"
resizableColumns="true"
style="border-bottom:1px solid #427CC7; overflow:scroll;position: relative;max-width: 100%;overflow-x: hidden"
rowStyleClass="#{(SimulationResultProductBean.collapseSuperCode and item.gam) ? 'row' : null}"
selection="#{SimulationResultProductBean.selectedSimulationDetail}" selectionMode="multiple"
rowKey="#{item.id}">
<f:facet name="header">
...
</f:facet>
<p:column sortBy="#{item.productCode}" width="40"
rendered="#{DynamicSimulationTableBean.columnRenderedMap['productCode']}">
<f:facet name="header">
<h:outputLabel value="#{msgs.code}"/>
</f:facet>
<h:outputText value="#{item.productCode}" >
<f:convertNumber type="number" integerOnly="true" groupingUsed="false"/>
</h:outputText>
</p:column>
<p:column sortBy="#{item.productName}" style="width:100px"
rendered="#{DynamicSimulationTableBean.columnRenderedMap['productName']}">
<f:facet name="header">
<h:outputLabel value="#{msgs.description}"/>
</f:facet>
</p:column>
//Other columns with fixed widths...
Maybe it is too late to answer, but I would like to share a solution that I have implemented because I didn't find any code that resolves the problem using primefaces 5.2.
<p:dataTable id="entitiesTable" ...widgetVar="wtable" scrollRows="3" scrollable="true" liveScroll="true"... >
<p:ajax event="filter" update="entitiesTable" oncomplete="resetScrollPos();" />
<p:ajax event="sort" update="entitiesTable" oncomplete="resetScrollPos();" />
</p:dataTable>
<script type="text/javascript">
function resetScrollPos(){
PF('wtable').scrollOffset=0;
PF('wtable').scrollBody.scrollTop(1);
PF('wtable').allLoadedLiveScroll = false;
}
</script>
The key is set de param allLoadedLiveScroll to false in order to obtain all data again after a filter response or a sort action. Ajax events are configured to reset the parms of the dataTable scroll widget.
Hope this helps to somebody with the same issue.
I found a LAZY solution with a reminder on the top of the datatable:
<script>
function liveScroll(){
simulationProductDt. scrollOffset = 25;
}
</script>
<!-- UPDATE scrollOffset value in the liveScroll method when scrollRows is changed!-->
<p:dataTable id="simulationProductDtId" emptyMessage="#{msgs.notFoundSimulationDetail}"
scrollable="true" scrollRows="25" scrollHeight="350" liveScroll="true"
...other properties
<p:ajax event="sort" update="simulationProductDtId" onstart="liveScroll()" onerror="alert('ERROR!')" />
</p:dataTable>
Hope this helps to somebody.
SerhatTR's anwser nailed it, almost. :)
The client side scrollOffset needs to be reset on liveScroll tables before sorting.
As its mentioned in accepted answer scrollOffset is a property on client side Datatable widget object i.e, widgetVar not found on id.
<p:dataTable id="tableId" widgetVar="tableWidget" >
<p:ajax event="sort" update="tableId" onstart="resetScrollPos()" />
...
</p:dataTable>
<script type="text/javascript">
fucntion resetScrollPos(){
tableWidget.scrollOffset = 25;
}
</script>
Check your primefaces version, datatable in primefaces seems to be a very unstable component.
I am using version 3.4 with sorted columns but I never tried to make a live scroll. I use the page scroll.
Check your browser too, Internet Explorer is quite unstable.
In my p:datatable, there is a column named Resolution, consisting of a check box and text. If the box is checked, the text is Resolved, If the box is not checked, then text is Unresolved. I also have a filter box defined for this column so only Resolved or Unresolved entries are shown.
If I filter on Resolved, then uncheck the box, the entry is now Unresolved, but it is still showing up. It shouldn't, because it no longer satisfies the filter. My question is how do I force filter() to execute after the last f:ajax render ?
Here is my code snipet:
<p:dataTable id="measurementHistoryTableId"
value="#{measurements.measurementHistoryList}"
var="meas3"
dynamic="true">
<p:column id="resolutionColumn"
filterBy="#{meas3.resolution}"
filterOptions="#{measurements.measurementHistoryOptions}"
sortBy="#{meas3.resolution}" >
<f:facet name="header">
<h:outputText value="#{msgs.MeasurementResolution}" />
</f:facet>
<h:selectBooleanCheckbox value="#{meas3.resolved}" >
<f:ajax event="click" execute="#all" render="resolutionId #this" />
</h:selectBooleanCheckbox>
<h:outputText id="resolutionId" value="#{meas3.resolution}" />
</p:column>
</p:dataTable>
I tried render=#all, but that didn't help. render=#form gives me jQuery.datepicker undefined. I tried to add 'onclick=widget_measurementHistoryTableId.filter()' to the 'h:selectBooleanCheckbox' , but it causes the filter to fire before the 'f:ajax' is executed.
Thanks for any help you could give me.
Binh
I don't know how primefaces filtering works but, if the onclick=widget_measurementHistoryTableId.filter() works and you jsut want it to be fired after the ajax event, you can do it like this:
<f:ajax event="click" execute="#all" render="resolutionId #this"
onevent="reapplyFilter"/>
And then define the reapplyFilter js function:
function reapplyFilter(e) {
if (e.status == 'success') {
widget_measurementHistoryTableId.filter();
}
}