I have a in my ui file which has switchType set to ajax. It has 4 tabs. The problem is when I click on tab1 , it loads data of tab1. But, when I click on tab2, it loads data of tab1 and tab2. When tab3 is clicked, it loads data of tab1, tab2 and tab3. And so on. How can I avoid this behaviour? It should load the data of only the tab which is selected(or clicked on) and not all the tabs before it.
I use richfaces 4 and JSF 2.0
Below is the code :
<rich:tabPanel status="loadingMask" id="tabPanelTest" switchType="ajax" style="height:80%;width:100%;padding-top:5px">
<a4j:ajax event="itemchange" render="tabPanelTest" />
<rich:tab header="Tab 1" id="TAB 1">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab1view">
<ui:include src="tab-1-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 2" id="TAB 2">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab2view">
<ui:include src="components/tab-2-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 3" id="TAB 3">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab3view">
<ui:include src="tab-3-file.xhtml"/>
</h:panelGroup>
</rich:tab>
<rich:tab header="Tab 4" id="TAB 4">
<h:panelGroup layout="block" style="height:100%;width:100%;" id="tab4view">
<ui:include src="tab-4-file.xhtml"/>
</h:panelGroup>
</rich:tab>
</rich:tabPanel>
Related
I have a primefaces dataTable which is both select-able (single selection) and has draggable rows. I also need to select a row via a button (apart from being able to select the row itself). My view code is:
<p:dataTable id="itemTable" widgetVar="itemTable"
var="item" draggableRows="true"
value="#{routesModelBean.itemList}" selectionMode="single"
selection="#{routesModelBean.selectedItem}"
rowKey="#{item.id}" rowIndexVar="rowId">
<p:column style="width:32px;text-align: center">
<p:commandButton icon="ui-icon-search"
onclick="PF('itemTable').unselectAllRows();PF('itemTable').selectRow(#{rowId},false);" type="button">
</p:commandButton>
</p:column>
The problem seems to be the "rowIndexVar". For example, if i have two items in my list and i swap them by dragging, then clicking the button of one item will result in selecting the other.
Edit: Primefaces version is 6.0
When reordering the rows you should update the table too. Use the following
<p:ajax event="rowReorder" listener="YOUR_LISTENER" update=":itemTable" />
I am working with PrimeFaces 5. The row selection is enabled and I want to embed a commandLink in one of the columns. When I click on the commandLink, I show a dialog, but I do not want the row to be selected. Is this possible (currently both events happen, the dialog is shown and the row is selected)?
<p:dataTable id="tableData" widgetVar="tableData" var="p"
value="#{bean.list}" ...
selection="#{bean.selectedItem}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{actionBean.onSelect}"
update="#form" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();" />
<p:column headerText="Title" ...>
<p:commandLink id="clickableTitle" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();PF('detailsDialog').show()">
<h:outputText value="#{p.title}" styleClass="link"/>
</p:commandLink>
</p:column>
I have a popupPanel:
<rich:popupPanel id="popup" modal="false" autosized="true" resizeable="false">
<f:facet name="header">
<h:outputText value="Simple popup panel" />
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popup')}.hide(); return false;">
X
</h:outputLink>
</f:facet>
<p>Any content might be inside this panel.</p>
<p>
The popup panel is open and closed from the javascript function of component client side object. The following code
hide this panel:
<f:verbatim>#</f:verbatim>{rich:component('popup')}.hide()
</p>
</rich:popupPanel>
I´m using this example:
Simple popup example
I want to change the color, the default color is blue, I want to change this color to Red or Green, is it possible ?
If it is relevant, i´m using richfaces 4.
Thanks in advance !
Add This css :
.rf-pp-hdr{
background: red;
}
I am using p:spacer in my xhtml file to create some empty space in the left side of the Panel Grid, and right side I have two buttons. The alignment works fine for the resolution (1366 X 768 screens). But if the page is opened on a screen with a resolution 1280 X 1024 using IE 10 browser, the left side space increases and the right side buttons goes out of the view and a horizontal scroll bar appears. I don't want users to scroll to see the buttons. Sample code is given below.
<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null">
<p:tab title="#{j.department} - #{j.userCount}">
<p:panelGrid columns="2">
<p:column>
<p:spacer width="1050" height="5" />
</p:column>
<p:column>
How to put the space that will adjust based on the resolution ?
Using PrimeFaces 4.0.
I wouldn't recommend using p:spacer for that particular case. Instead, you can play with styles to achieve what you want to do. This will work:
Use this style (put it wherever you have your css):
<style type="text/css">
.grid{width: 100%;}
.column1{width: 100%;}
.column2{}
</style>
And use it in the styleClass and columnClasses attributes of the p:panelGrid like this:
<p:accordionPanel value="#{dataBean.userList}" var="j" activeIndex="null">
<p:tab title="#{j.department} - #{j.userCount}">
<p:panelGrid columns="2" styleClass="grid" columnClasses="column1,column2">
<p:column></p:column>
<p:column>
<p:commandButton value="hi"/>
<p:commandButton value="bye"/>
</p:column>
</p:panelGrid>
</p:tab>
</p:accordionPanel>
This way your first column will take all the available space leaving your second column with the buttons aligned to the right, and not depending on the resolution.
I am trying to print multiple tabs but want to exclude some.
I tried the following:
<p:printer target="tabs:tab0,tabs:tab2" />
and
<p:printer target="tabs:tab0" />
<p:printer target="tabs:tab2" />
Neither worked.
I played somewhat around it and it works only for a specific tab if the tab is visible. You can thus definitely not specify multiple tabs. You might want to post an issue report about that to PrimeFaces, although solving that would be relatively hard.
As of now, to get it to work for a specific tab, you'd need to toggle the desired tab visible in the button's onclick handler before print action is performed. You can use the select() function of the <p:tabView> widget for this wherein you pass the zero-based tab index.
Here's a kickoff example.
<h:form id="form">
<p:tabView id="tabs" widgetVar="tabs">
<p:tab id="tab1" title="tab1">tab1</p:tab>
<p:tab id="tab2" title="tab2">tab2</p:tab>
<p:tab id="tab3" title="tab3">tab3</p:tab>
</p:tabView>
<p:commandButton type="button" icon="ui-icon-print" value="Print tab2" onclick="tabs.select(1)">
<p:printer target="tabs:tab2" />
</p:commandButton>
</h:form>