Using varStatus of ui:repeat is helpful to identify the odd and even rows if I display all the records in the list that is mapped to ui:repeat.
However, how do I handle a situation if I choose to display only specific records in the arraylist mapped to ui:repeat ? i.e. say for example that I display a table of students who have only scored more than 75% but my list that is mapped to ui:repeat contains the entire list of students. In this case, alternate row coloring does not work as some times consecutive rows have the same row color assigned to them. Is there an efficient workaround for this ?
Is there a similar feature like rowClasses that h:dataTable uses for ui:repeat?
You can do this by using css condition:
<style type="text/css">
.test1{
display:none;
}
.test2{
display:block;
}
</style>
<ui:repeat value="#{tabview.students}" var="dt">
<div class="#{(dt.scored gt 75) ?'test1':'test2'}">#{dt.model}</div>
</ui:repeat>
For the Odd/Even, you can use the varStatus
<ui:repeat var="item" value="#{myBean.myList}" varStatus="status">
<div class="some-class ${status.even ? 'row-even' : 'row-odd'}"> ... </div>
</ui:repeat>
CSS
.row-even {
background-color: floralwhite;
}
.row-odd {
background-color: gainsboro;
}
Related
Version :
Apache MyFaces 2.1.14
RichFaces 4.3.5
Issue:
We are migrating from jsf 1.2 to jsf 2.
I have raised a similar question here regarding style sheets.
The issue is the same style (as per answer in above question ) is not taking effect in anothet rich:dataTable component .
Finally , the built-in richfaces style sheet worked as shown in below code.
The generated html code for table header is shown also where rf-dt-shdr-c (built-in style sheet changing which solved the issue) comes into picture.
So the issue is :
Why is generated html different for the same rich:dataTable components with same styles.
The only change added in this rich:dataTable to that from others is the sorting behaviour like shown in below code :
Code :
<!-- rich faces built in style (worked )-->
.rf-dt-shdr-c{
background-image:url(../images/heading-bg.gif) !important;
background-position: left top !important;
background-color: #FFFFFF !important;
white-space:nowrap !important;
}
<!-- header class (not working ) -->
.headerClass1 {
background-image:url(../images/heading.gif);
background-color: #FFFFFF;
background-position:top left;
background-repeat:repeat-x;
}
<!-- rich dataTable with column sorting using a4j:commandLink in header -->
<rich:dataTable value="#{bean.data}" var="val" styleClass="adminTable1" headerClass="headerClass1" rows="#{bean.rowsPerPage}" rowClasses="oddRow,evenRow" render="requests" index="index">
<c:forEach items="#{items}" var="column">
<rich:column sortBy="" sortOrder="">
<f:facet name="header">
<a4j:commandLink/>
</f:facet>
</rich:column>
</c:forEach>
</rich:dataTable>
<!-- html generated for table header part for this question (rf-dt-hdr richDataTableHeader1 is missing here whereas rf-dt-shdr-c comes into play ) -->
<thead class="rf-dt-thd" id="sampleForm:req:th">
<tr class="rf-dt-shdr" id="sampleForm:req:ch">
<th class="rf-dt-shdr-c" id="sampleForm:req:j_id_1d_1_w_1" scope="col">
<!-- html generated for other rich:dataTables , -->
<thead class="rf-dt-thd" id="profForm:app:th">
<tr class="rf-dt-hdr richDataTableHeader1 rf-dt-hdr-fst" id="profForm:app:0">
<th class="rf-dt-hdr-c" id="profForm:app:j_id_67">
You are trying to set headerClass for a table that has no header defined. Your should set the header class on columns since those are the elements with a header.
I have a form in which there is a selectbox, and a inputtext field with default red color.
I want to change color of inputtextfield when that checkbox is selected.
How can I do that?
I am trying to achieve in this way, but unable to get change color.
pojo:
private Boolean changeColor=false;
private boolean sign1;
public void ChangeColorEvent(){
System.out.println("inside color change event");
changeColor=true;
sign1=true;
}
<h:outputText value="understood and Signed?: " />
<p:selectBooleanCheckbox label="Yes" value="#{patient.sign1}" >
<p:ajax update="hppa1" listener="#{patient.ChangeColorEvent}" />
</p:selectBooleanCheckbox>
<h:panelGroup>
<p:inputText id="hppa" size="5" style="color:White;background:Red;" rendered="#{!patient.changeColor}" />
<p:inputText id="hppa1" size="5" rendered="#{patient.changeColor}" style="color:White;background:Green;"/>
</h:panelGroup>
You can use the approach suggested by Daniel. Or a slightly different version would be this
<p:inputText id="hppa1" size="5" style="#{patient.changeColor eq true ? 'color:White;background:Green;' : 'color:White;background:Red;'}"/>
Saves you unnecessary markup and processing!
UPDATE: btw, you can very well handle these events in Javascript if you do not need any server side reflection of the sign1 boolean flag
Alternative approach with jQuery using styleClass as #Daniel mentioned would be like this :
Define style classes in your css:
.red {
background-color: red;
}
.blue{
background-color: blue;
}
Have just one p:inputText (your approach with switching between two of them is really wrong) and add a styleClass="red" to it.
<p:inputText id="inputID" styleClass="red"/>
Then define this function :
<script type="text/javascript">
function changeColor(param){
if (jQuery("[id*="+param+"]").hasClass('red')){
jQuery("[id*="+param+"]").removeClass('red');
jQuery("[id*="+param+"]").addClass('blue');
}
else {
jQuery("[id*="+param+"]").removeClass('blue');
jQuery("[id*="+param+"]").addClass('red');
}
};
</script>
And use it in p:selectBooleanCheckbox:
<p:selectBooleanCheckbox onchange="changeColor('inputID')"/>
Note 1: [id*="+param+"] in jQuery is because primefaces adds ids to your element (p:inputText) depending on what wraps it (eg. form, dataTable, ...). With [id*="+param+"] you can basically escape these added ids and find your desired inputText.
Note 2: If you want to work only with red class you can use :
function changeColor(param){
jQuery("[id*="+param+"]".toggleClass('red'));
};
EDIT: This approach has no problem with initial stage which you mentioned in comment to #NikhilPatil answer.
for start add id to your <h:panelGroup id="myWrapper">
and change the p:ajax to this <p:ajax update="myWrapper" ....
You can't update elements that are not rendered... read this Similar issue
Or , an alternative solution (since you are using primefaces) is to change your <h:panelGroup> into <p:outputPanel id="panel" autoUpdate="true"> and leave alll the rest the way it was
Output panel is a container element with several use cases, this example uses an autoUpdate outputPanel to update a component page which doesn't exist on page initially and rendered based on a condition.
Output Panel
But the way you are trying to change color is completely wrong... instead of hiding and displaying the element you should modify the css attributes of ONE element...
define 2 css classes like this
.classOne{
color:White;
background:Red;
}
.classTwo{
color:White;
background:Green;
}
.classThree{
color:White;
background:Blue;
}
and change the styleClass="" of your <p:inputText id="hppa1"
like this
<p:inputText id="hppa1" styleClass="#{patient.className}".....
add String changeColor to your bean + getter/setter and change its values from classOne to classTwo ....
Basically I'm making a repeatable section and I want to have the checked state of all checkboxes pre-supplied by an array.
<div style="height: 100%; border: 1px solid grey; overflow-y: scroll;" id="AssociatedUsers" data-bind="foreach: AllUserList">
<input type='checkbox' class='cSupUser' style="width:20px;margin:2px" value="$data" data-bind='checked: supplierUsers' /><span data-bind='text: $data.Text'></span><br />
</div>
But obviously value="$data" is just returning the string "$data". I've decided to start working on a solution where I just map the array with json strings when I save and load the related data, but this adds complication and feels like a hack, so I was wondering if there is a better way to handle this situation. I would also prefer supplierUsers could just be mapped directly to the viewModel, because I'm going to be generating the response to the server from the viewModel, but it seems like observableArrays don't work for that parameter.
I'm only 3 days into using knockout framework, any help/suggestions are appreciated.
The way i've dealt with this is to use the attr binding for each checkbox. E.G.
<input type="checkbox" data-bind="checked : supplierUsers, attr : { value : $data}" />
I have a data table which has two images per column, one that is displayed and also a hidden image that is not. The idea is to dislpay the hidden image on top of the other image if an attribute #{person.isLocked} result set is set to 'T'. My code has a div and within that div has two div's, one for the main image and then one for the image that will be overlayed. (Code below) The image that is to be overlayed has a style attribute display: none; . I need somehow to check to see if the #{person.isLocked} equals 'T', if so then I need to change the css to display:block; else leave it be.
<p:dataGrid var="person" value="myBean.people">
<p:column>
<h:panelGird style="margin-left:auto; margin-right:auto;">
<div>
<div style="position:absolute; z-index:1;">
<p:graphicImage value="image?id=#{person.id}" cache="false"/>
</div>
<div style="position:absolute; z-index:100; display: none;">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
</div>
</h:panelGrad>
</p:column>
</p:dataGrid>
The only solution I have come up with is instead of storing 'T' or 'F' in the database as #{person.isLocked}, store the css attribute instead, so I would store 'block' or 'none' and then call the person attribute in the style like so.
<div style="position:absolute: z-index:100; display: #{person.isLocked}">
<p:graphicImage value="./images/lock.png" cache="true"/>
</div>
This seems like a bad design though. I don't want to manipulate the data in my database just for display purposes. Has anyone found a different way of doing this?
I've never used Primefaces, but you could try
<ui:fragment rendered="#{person.isLocked}">
<!-- your div here -->
</ui fragment>
We add Struts errors and messages using ActionSupport.addActionError(...) and addActionMessage(...) and then output the results using <actionerror class="x"/> and <actionmessage class="x"/>.
When these tags output the messages they output in the form: <ul><li><span class="x">msg</span></li></ul>
As you can see you can specify the css class (in this example 'x') to apply formatting. Problem is that we want to apply the margin-top and margin-bottom css properties and you can't use these properties (I gather) with <span> elements - only with <div> elements.
So is there anyway you can get these Struts tags to output error/message using a <div> instead of a <span>?
Thanks.
Update:
As per the answer/workaround below, I just enclosed the struts tag within a div:
<div class="error-status">
<s:actionerror cssClass="error"/>
<s:actionmessage cssClass="status" />
</div>
The error-status CSS class set the properties on the LI:
.error-status LI { MARGIN-TOP: 5px; MARGIN-BOTTOM: 5px; display: block; }
.error { COLOR: red }
.status { color: #0066CC }
You can apply margin to spans if you also apply display:block.
But the optimal solution is to apply margin to the li elements.