I have JSF data table and only one column has column header.
I need to hide the column with header text based on the condition and when I do that the entire header row shrinks because the other columns don't have header text.
To prevent this, I need to set 'empty' string and I tried a few tricks but nothing seem to work.
<p:dataTable ....>
<p:column headerText=" " >
How do I set empty string headerText attribute?
Thx in advance.
Depending on your Primefaces version you could use this code to force the creation of the html element
<p:dataTable ....>
<p:column headerText=" " >
With early version this should create the div but make it very small, so you can add css style to adjust to your wish, something like
.ui-datatable thead th {
min-height: xx px;
min-width: yy px;
}
I think you can solve your problem event with only the second part, so only with css.
Related
I'm using PrimeFaces v.5 with this version a new component is released that ColumnToggler, when view is rendered, refreshed all checkbox are checked as a default operation.
What I need to do is;
to uncheck some columns when I initialize the view,
make p:columnToggler remember checked and unchecked options when a refresh operation occurs on p:dataTable
In Primefaces 5.2 you can set the p:column visible attribute to false
<p:column ... visible="false">
You can ofcourse use EL in the visible attribute by colum index (reordering becomes more difficult)
<p:column ... visible="#{visibilityModel.visibleList[1]}">
It hides the column at the beginning depending on the return value and you can show/hide the column through the columnToggler checkbox
By using the ajax toggle event
<p:ajax event="toggle" listener="#{viewBean.onToggle}" />
You can update the state of the visibilityModel server side
public void onToggle(ToggleEvent e) {
list.set((Integer) e.getData(), e.getVisibility() == Visibility.VISIBLE);
}
See this PrimeFaces blog entry for full example to actually keep/store the state of the visibility server side so it can be reused later
The best solution depends on the PrimeFaces version you are using.
PrimeFaces >= 5.2
See the other answer in this question.
workaround for < 5.2
You need to solve the first problem manually by overriding Primefaces' own ColumnToggler.prototype.render() function
first add styleClass="not-show-at-start" to your column that you want to insvisibe at start to access in javascript render() function;
<!--This column will not be shown at start-->
<p:column headerText="Cloumn to hide initially" width="70" styleClass="not-show-at-start">
<h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>
<!--This column will be shown at start-->
<p:column headerText="Column to show initially" width="70">
<h:outputText value="#{entityVar.nmProcessOwner}" />
</p:column>
secondy create a javascript file and paste code below in it, this function will re assign render function of ColumnToggler
PrimeFaces.widget.ColumnToggler.prototype.render = function() {
//variable for creating id referance for each checkbox in ColumnToggler
var id=0;
this.columns = this.thead.find("> tr > th:visible:not(.ui-static-column)");
this.panel = $("<div></div>").attr("id", this.cfg.id).addClass("ui-columntoggler ui-widget ui-widget-content ui-shadow ui-corner-all").append('<ul class="ui-columntoggler-items"></ul').appendTo(document.body);
this.itemContainer = this.panel.children("ul");
for (var a = 0; a < this.columns.length; a++) {
id++;
var b = this.columns.eq(a);
$('<li class="ui-columntoggler-item"><div class="ui-chkbox ui-widget"><div id="cb'+id /*creating id for each checkbox for accessing later*/+'" class="ui-chkbox-box ui-widget ui-corner-all ui-state-default ui-state-active"><span class="ui-chkbox-icon ui-icon ui-icon-check"></span></div></div><label>' + b.children(".ui-column-title").text() + "</label></li>").data("column", b.attr("id")).appendTo(this.itemContainer);
//access clumns using class reference(not-show-at-start) created in jsf page
if(b.hasClass( "not-show-at-start")){
//access checkbox using id attribute created above and uncheck it
//this will hide columns that have "not-show-at-start" class
this.uncheck($('#cb'+id));
}
}
this.hide();
}
An alternative solution could be to set directly the checkbox you want to uncheck after you load the page. It's a less elegant solution but it works. I did it this way:
<h:body onload="javascript:
$('.ui-chkbox-box')[18].click();">
By this way, after loading the page, javascript hide the column referenced by chechbox number 18 but the checkbox is still present on the columnToggler for the user to check it and show the column again if he wants to.
Greetings
Complementing Damián answer:
$(function() {
$('.ui-columntoggler-items .ui-chkbox .ui-chkbox-box').click();
});
This will do the job, clicking the columntoggler chkbox after page load..
#Edit
You should set as toggleable="false" the columns you don't want to hide (always displayed)
Reason: if you use the javascript method to "override" primefaces toggler, sometimes the datatable column shown can be displayed wrong in the layout (out of the table size, for an example, like happened with me), that's why i decided to use the method described above..
I have a rich:autocomplete dropdown selector in my application. In the dropdown list that appears as the user begins entering text, the strings that have been loaded into the list of selections will happily display out to the entire width of the dropdown. However, once you make a selection only about 34 characters of the string will be displayed, with the result that the end user has to scroll left and right in the input box to see the entire string, see here (StackOverflow won't allow me to post inline images yet): http://imgur.com/Y9LLaBi
Here's the offending table cell in the frontend XHTML file. It uses the JSF and richfaces namespaces and there's a backing bean that creates the autocomplete suggestion list and executes other business logic, but I believe this is the only relevant code:
<td height="20" class="addborderright addborderbottom inputbox" colspan="4">
<!-- nb: richfaces autocomplete to ensure proper name entry -->
<h:message styleClass="errormsg" for="campusName" />
<rich:autocomplete id="campusName" length="50" mode="client" minChars="1"
layout="table" autofill="true" selectFirst="true"
onselectitem="javascript:executeAction(
'#studentComplaintCampusInformationBean.formName}',
'populateCampusAddressFieldsLink');"
value="#{studentComplaintCampusInformationBean.campus.operatingName}"
autocompleteList="#{studentComplaintCampusInformationBean.registeredCampusNameList}"
style="width:370px" fetchValue="#{fn}" var="fn" maxlength="100">
<rich:column>#{fn}</rich:column>
</rich:autocomplete>
</td>
To make the dropdown box left-justify text and be the same as the width of the input field the following CSS is at the top of the XHTML file:
<style>
.rf-au-fnt{
text-align: left; float: left;
}
.rf-au-lst-dcrtn .rf-au-lst-scrl {
width: 370px; !important
}
</style>
However, there doesn't appear to be a CSS property relating to the width of the displayed text in the input box, so it appears cut off to the end user, and only fills about half the available space in the input box! Could someone please help? Thanks!
rf-au-fnt is the class of the input, you're already overriding it so just add the width.
As a sidenote, rather than directly overriding the RichFaces classes you should set a class for the component and then write stylesheets like
.myAutocomplete .rf-au-fnt {text-align: left; float: left; width: 370px !important
}
This way you don't change something you wouldn't want to.
I have a data table in my application, I fix the columns width as 200. If i print small line in datatable column means it prints correct format. If i print lengthy line in the datatable column means, it cant wrap it out. how can i wrap the text in data table column.
Problem Description
You can control word wrapping by CSS word-wrap property. Inside tables, this only requires the table-layout property to be set to fixed, so that columns with a fixed width don't auto-expand when their content is larger.
E.g.
.fixed-size {
table-layout: fixed;
word-wrap: break-word;
}
and
<p:dataTable ... styleClass="fixed-size">
The below worked for me in Chrome not in IE
.preformatted {
white-space: pre-wrap;
word-break: break-all;
}
<p:column>
<h:outputText value="#{bean.txt}" styleClass="preformatted" />
</p:column>
My sollution is to apply word-break style to column. Just like:
<p:column id="accountsMaskColumn"
headerText="#{msg['mr.settings.headers.accountMask']}"
filterBy="#{item.accountMask}"
sortBy="#{item.accountMask}"
style="word-break: break-word">
<h:outputText value="#{item.accountMask}"/>
</p:column>
Hope someone find this useful
I have a JSF data table that is displaying data based off a search successfully. However, I'm not sure how to selectively bold certain text data in a particular column.
So, for instance, I would like this text...
Here is some text that would be inside the h:column
to show up like this on the page...
Here is some text that would be inside the h:column
Here's what my data table looks like
Results:
<h:dataTable var="results"
value="#{logSearcherBean.results}"
border="1">
<h:column>#{results.logName}</h:column>
<h:column>#{results.matchLine}</h:column>
</h:dataTable>
You could either homebrew an EL function which manipulates the column value and returns the desired HTML,
<h:outputText value="#{my:highlight(results.logName, logSearcherBean.query)}" escape="false" />
(note that this is due to escape="false", which is mandatory to present HTML literally, also sensitive to XSS attacks if the logName is a value which is fully controlled by the enduser)
Or grab JavaScript/jQuery which manipulates the returned HTML, see also this related question: Highlight a word with jQuery.
Hi all,
<p:column id="lastName"
headerText="Last Name">
<h:outputText value="#{person.lastName}" style="#{myBean.getStyle(person.lastName)}"/>
</p:column>
And in the bean:
public String getStyle(String str) {
return str.equals(keyword) ? "background-color: yellow" : "";
}
All best and happy coding!
I am using primefaces 3.2 and I have used escape=false for the outputText to display the output. This is not working for me.
val = "<ol><li>sfsfsd</li><li>fgsdsdg</li></ol>"
<h:outputText escape="false" value="#{dummyBean.val}" />
It is not displaying the numbers instead I am getting a dot (.) on display.
I am gettting output like :
. sfsfsd
. fgsdsdg
But the expected output is :
1.sfsfsd
2.fgsdsdg
A weird idea:
what if the html is indeed escaped but you have some styling issue which hides the numbers before the dots. I would try to add some left padding either to the printed list
<ol style="padding-left: 100px;">
<li>First</li>
<li>Second</li>
</ol>
or to the span itself
<h:outputText escape="false" value="#{dummyBean.val}" style="padding-left: 100px;"/>
and see what happens.
What you're looking for is just a different way to style an ordered list.
You just need to add this style
ol {
list-style-type: decimal;
}