jsf:
<rich:dataTable id="files" styleClass="table" headerClass="header"
value="#{file}" var="fileRecord" rendered="#{file.rowCount>0}"
rowClasses="even,odd" onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
<rich:column>
precondition:
have zebra styled table with white and gray colored rows
steps:
1. mouse hover on row,it's hovered ok
2. mouse out and it becomes white
postcondition:
table lost its "zebraness"
It's occurred bevcause of #{a4jSkin.tableBackgroundColor} evaluated to white color.
How to preserve zebra styling?
Thank you for any assistance.
should be changed to:
#{a4jSkin.rowBackgroundColor}
<rich:dataTable id="files" styleClass="table" headerClass="header"
value="#{file}" var="fileRecord" rendered="#{file.rowCount lt 0}"
rowClasses="even,odd"
onRowMouseOver="tableRowColor=this.style.backgroundColor;
this.style.backgroundColor='#dedede'"
onRowMouseOut="this.style.backgroundColor=tableRowColor">
<rich:column>
Related
I would like to display a text area which is used in two modes :
A modification mode, using p:editor
A visualization mode, where only text area is visible.
Which component would be the best choice for this visualization mode ? I have tried with :
p : editor : I don’t want the toolbar to be visible. It seems it is not possible to hide it.
p:outputTextarea : html tags generated by p:editor are visible in the textarea
h: outputText : rendering is a little different from that of p:editor and above all, as there is no vertical scroll bar, the text overflows its container.
I have also tried with p:outputTextarea for both editing and visualization modes, but I would be interessed in further tools available in p:editor.
Any idea ?
<p:panel id="panelDG">
<p:dataGrid id="pdatagrid1" layout="grid" value="#{ib.bloc.groups}" var="group" columns="#{ib.bloc.groupsSize}" rowIndexVar="status">
<!-- other components -->
<p:panel styleClass="panel-textarea">
<s:account>
<p:editor id="editor1" value="#{ib.textArea1}" rendered="#{status == 0}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<p:editor id="editor2" value="#{ib.textArea2}" rendered="#{status == 1}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<p:editor id="editor3" value="#{ib.textArea3}" rendered="#{status == 2}" maxlength="4000" controls="bold italic underline strikethrough bullets outdent indent alignleft center alignright justify undo redo" />
<h:panelGrid >
<p:commandButton value="Save" action="#{ib.modifyGroupText(group)}" icon="ui-icon-disk" />
</h:panelGrid>
</s:account>
<s:guest>
<h:outputText value="#{group.textArea}" escape="false"></h:outputText>
</s:guest>
</p:panel>
</p:dataGrid>
</p:panel
.panel-textarea{
height: 500px;
}
If you want to hide the toolbar of <p:editor> because a user don't have editing permissions you can simply use css.
Facelet
<p:editor styleClass="#{!login.editAccess ? 'hideToolbar' : ''}" disabled="#{!login.editAccess}" ... />
CSS
.hideToolbar .ui-editor-toolbar {
display: none;
}
Oh, I had not seen the .ui-editor-toolbar class !
Otherwise, to avoid text overflow when using h:outputText :
.h-outputText{
display:block !important;
overflow-y: auto !important;
height: 400px !important;
}
Thanks for all answers
I have written a code to generate a datatable. The datatable column contains a radio button field. All is fine with the data table, but there comes a border in the radio button field.
the code snippet is as follows:
<p:column id="statuscolumn" headerText="#{prop['tum.userdatatable.status']}" filterBy="#{user.activeStatus}"
filterOptions="#{userListController.statusOptions}" sortBy="#{user.activeStatus}" style="border-style: none !important;">
<p:selectOneRadio value="#{user.activeStatus}">
<f:selectItem itemLabel="Active" itemValue="true"/>
<f:selectItem itemLabel="Inactive" itemValue="false"/>
<p:ajax listener="#{userListController.changeStatus}"/>
<f:attribute name="user" value="#{user}"/>
</p:selectOneRadio>
</p:column>
How to remove the borders arround the radio button field in the data table column field.
Please Help!
Thanks for help in advance.
I've inserted a Primefaces Slider on my page with very basic settings, the problem is once I click on its button, it doesn't stop moving with mouse. it doesn't a matter where in the page the mouse pointer is. The Slider button follows the mouse position to right or left. does any body an idea how to solve the problem?
<h:outputLabel styleClass="form-label-top-right" for="area">Area:
<h:outputText id="output" value="#{formbean.selectedArea}"/> Km
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:outputLabel>
I think it is the way you used h:outputLabel to contain these other tags not allowing the mouseup event to bubble up. Use a h:panelGrid with four columns instead.
For example:
<h:panelGrid columns="4">
<h:outputLabel styleClass="form-label-top-right" for="output" value="Area:" />
<h:panelGroup>
<h:outputText id="output" value="#{formbean.selectedArea}"/>
<h:outputText value="Km"/>
</h:panelGroup>
<h:inputHidden id="area" value="#{formbean.selectedArea}" />
<p:slider animate="true" display="output" minValue="0" maxValue="15" step="3" id="areaSlider" for="area" style="margin-top:6px; cursor: pointer" />
</h:panelGrid>
Problem resolved. It was the "FireQuery" Plugin for FireFox which caused the problem. uninstalling that
I have List<Product> products in my backEnd Bean which contains about 70 items.
I need to show it as 3 X 4 table with option to navigate between pages "next", "Previous" and option to click on page number.
How can it be done? I have no problem to use Datagrid, but how to combine it with paging?
Update:
I did the following:
<h:form>
<rich:dataGrid value="#{productBean.products}" var="product" columns="4" id="productsList">
<h:outputText value="#{product.sku}"/>
<f:facet name="footer">
</f:facet>
</rich:dataGrid>
<rich:dataScroller for="productsList" maxPages="10"/>
</h:form>
but my problem is that now I have a table with 4 columns and 18 rows.
how Can change it to 3 rows per page?
Put the <rich:dataScroller> in any of the <f:facet> of the <rich:dataGrid> .
For example:
<rich:dataGrid>
........................
........................
<f:facet name="footer">
<rich:dataScroller/>
</f:facet>
</rich:dataGrid>
Then , the paging control is at the bottom of the data grid.
Note that the real tag looks like this:
<rich:dataScroller />
(Big S, if someone copy paste the previous example will get error!)
i am trying to make image and text display at same line by using JSF tag. is there any way to do that? oringinal code is like following but image and text always displays in 2 lines.
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</rich:modalPanel>
You can try this
<rich:modalPanel id="Busy" autosized="true" zindex="2000">
<h:panelGrid columns="2">
<h:outputText value="Submitting..."></h:outputText>
<h:graphicImage value="images/loading.gif" />
</h:panelGrid>
</rich:modalPanel>
The will arrange all its child elements in a table, containing the specified number of columns (2 in this case).
h:panelGrid
The best solution is to define the line directly in the CSS properties:
<h:outputText value="Submitting..." styleClass="loading"/>
and in your CSS:
.loading {
background-image: url('images/loading.gif');
}
then, you will have to adapt your CSS class to display correctly your image.