I have a datatable where for one column, I would like to change the height of the column based on the string to display. Sometimes the string I am getting is very small and sometimes it is very long. So in case of long string, I would like to change the height of the column so that the entire string can be wrapped inside the column.
Below is the declaration of my data table:
<p:dataTable var="employee" id="employees_table"
value="#{employeeDetailsBean.selectedEmployee.details}">
<p:column headerText="Employee Name">
<h:outputText value="#{employee.name}" />
</p:column>
<p:column headerText="Employee Previous Work History">
<h:outputText value="#{employee.prevWorkHistory}" />
</p:column>
</p:dataTable>
What you want is to wrap the text within column. <p:column width="50" headerText="Employee Name" styleClass="wrap"> add CSS .ui-datatable tbody td.wrap {
white-space: normal;
}
Related
I have a richdatatable in jsf .xhtml page . I have a very long text for a particular cell.
How can i set the width of the column and also display the text within the specified cell.
I am new to JSF and CSS. I am providing an example. Suppose I have two columns in a richdatatable and one of them have a very long text. I want that very long text to get displayed in lines(wrap text) rather than in a single line. I m not sure where, how and what to put as part of CSS
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.ViewFileTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form>
<rich:dataTable value="#{fileController.feedbackFileItems}" var="item" id="table">
<rich:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListFeedbackTitle_feedbackPK_feedbackId}"/>
</f:facet>
<h:outputText value="#{item.feedbackPK.feedbackId}"/>
</rich:column>
<rich:column>
<f:facet name="header">
<h:outputText value="#{bundle.ListFeedbackTitle_department}"/>
</f:facet>
<h:outputText value="#{item.department}"/>
</rich:column>
</rich:dataTable>
</h:form>
</ui:define>
</ui:composition>
For displaying long text in multiple line you can use width attribute of rich:column:
<rich:column width="150" ...>
or the same for h:column:
<h:column width="110">
If you don't want to display text of datatable cell in multiple lines, then
1) you can use columnClasses attribute of rich:dataTable and specify no-wrap style for that column. For example combination
<rich:dataTable columnClasses="nowrap,">
with CSS
.nowrap {
white-space: nowrap;
}
will be resulted as table with non wrapped first column.
2) You can use style or styleClass attributes of rich:column for the same result (with the same CSS).
I want to implment a scrollbar for a outputLabel but if i use scrollbar component it put every list elment in a new row. The whole output should be disyplayed in one row and the list should be scrollable. Can i fix this problem with a CSS attribute?
i use primefaces 4.0 and jsf 2.1
here is my code
<p:commandButton id="newMessage" update=":contentForm"
actionListener="#{taskboxBean.newMessage}" value="New Message" />
<p:commandButton id="trash"
update=":contentForm, :postForm:tabViewPosts:trashTable, :postForm:tabViewPosts:inboxTable, :postForm:tabViewPosts:sentTable"
actionListener="#{taskboxBean.deleteSelectedTaskbox}" icon="ui-icon-trash" title="Trash" />
<p:scrollPanel>
<ui:repeat var="task_to_user" value="#{taskboxBean.selectedTaskbox.TASKBOX_TO_USERS}">
<p:outputLabel
value="#{task_to_user.USER.EMAIL} #{task_to_user.USER.FIRST_NAME} #{task_to_user.USER.LAST_NAME} #{task_to_user.USER.FIRST_NAME}" />
</ui:repeat>
</p:scrollPanel>
<h:outputText value="#{taskboxBean.selectedTaskbox.TASKTYPE.NAME} " />
<h:outputText value="#{taskboxBean.selectedTaskbox.CREATE_TIMESTAMP} " />
I have a set of subtables that is fed from the managed bean, and they may or may not have a header text.
<p:dataTable var="xxxxx" value="#{}" styleClass="xxxxx" emptyMessage="#{}">
<f:facet name="header">#{}</f:facet>
<p:columnGroup type="header">
<p:row>
<p:column headerText="xxxxx" />
</p:row>
</p:columnGroup>
<p:subTable var="xxxxx" value="#{}">
<f:facet name="header">
<h:outputText rendered="#{}"
value="#{}" />
</f:facet>
<p:column style="text-align:center;">
<h:outputText value="#{}" />
</p:column>
</p:column>
</p:subTable>
</p:dataTable>
Only structure shown. Tag contents wiped on purpose.
when the subtable header is empty text, it still renders a thin empty header line. Is there any way I can supress the exibition of that header in case empty?
Using PF 3.5 on Tomcat 7 (mojarra)
Supress the exibition of the empty header of the subtable by using this CSS property:
td.ui-datatable-subtable-header:empty {
display: none
}
I'm using PrimeFaces 3.0-M3 and I have a <p:dataTable> with two columns in it. I want the first column to be fixed at a width of 20px. The other column can use whatever space is left over.
Here are screenshots of what I'm currently getting:
The first <p:column> seems to be ignoring the style setting that should have limited the width. It is sized way too big for the tiny coloured square that is the only content inside it and then the other column is pushed too far to the right.
Here is more of my Facelet code:
<p:dataTable
id="dataTableExpressions"
value="#{catconBean.userDefinedExpressionDataModel}"
var="currentRow"
emptyMessage="!! EMPTY TABLE MESSAGE !!"
selection="#{catconBean.userDefinedExpressionToEdit}"
selectionMode="single">
<p:ajax
event="rowSelect"
listener="#{catconBean.onUserDefinedExpressionRowSelect}"
update=":toolbarForm:catconToolbar" />
<p:ajax
event="rowUnselect"
listener="#{catconBean.onUserDefinedExpressionRowUnselect}"
update=":toolbarForm:catconToolbar" />
<p:column id="paletteColor" style="width:20px;">
<h:panelGroup
layout="block"
rendered="#{not empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:solid;border-color:black;background-color:##{currentRow.paletteColor.RGB};" />
<h:panelGroup
layout="block"
rendered="#{empty currentRow.paletteColor}"
style="width:16px;height:16px;border:thin;border-style:dashed;border-color:red;background-color:white;text-align:center;">
<h:outputText value="?" style="color:red;font-weight:bold;" />
</h:panelGroup>
</p:column>
<p:column id="name">
<f:facet name="header">
<h:outputText value="#{bundle.catcon_label_CategoryName}" />
</f:facet>
<h:outputText
value="#{currentRow.name}"
style="#{not currentRow.definitionComplete ? 'color:red;' : ''}" />
</p:column>
</p:dataTable>
Can anyone tell me how to modify my Facelet code to make the first column have a fixed width of 20px?
In PrimeFaces 3.0, that style get applied on the generated inner <div> of the table cell, not on the <td> as you (and I) would expect. The following example should work out for you:
<p:dataTable styleClass="myTable">
with
.myTable td:nth-child(1) {
width: 20px;
}
In PrimeFaces 3.5 and above, it should work exactly the way you coded and expected.
This worked for me
<p:column headerText="name" style="width:20px;"/>
For some reason, this was not working
<p:column headerText="" width="25px" sortBy="#{row.key}">
But this worked:
<p:column headerText="" width="25" sortBy="#{row.key}">
I don't know what browser you're using, but according to w3schools.com, nth-child and nth-last-child do now work on MSIE 8. I don't know about 9. http://www.w3schools.com/cssref/pr_border-style.asp will give you more info.
can you try
<p:column width="20">
Inline styling would work in any case
<p-column field="Quantity" header="Qté" [style]="{'width':'48px'}">
I just did the following (in V 3.5) and it worked like a charm:
<p:column headerText="name" width="20px"/>
Addition to #BalusC 's answer. You also need to set width of headers. In my case, below css can only apply to my table's column width.
.myTable td:nth-child(1),.myTable th:nth-child(1) {
width: 20px;
}
Good Morning!
Is it possible to reRender only 1 specific row of rich:dataTable?
I have a rich:dataTable and, when I do something that I´m sure only 1 row has changed, I need to reRednder only this row, not the entire table. Is it possible? How?
XHTML:
<rich:dataTable id="myTable" value="#{bean.table}" var="me">
<rich:column>
<h:outputText value="#{me.id}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueOne}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueTwo}" />
</rich:column>
</rich:dataTable>
<some:tag.... reRender="??????" action="bean.example" />
Java:
public void example{
// Do something that affects to the row selected
}
THANK YOU VERY MUCH.
Yes , it is possible . You have to specify the followings things:
Which columns to be rendered via the reRender attribute of the tags that can invoke MBean method
What rows to be rendered via the ajaxKeys attribute of the rich:dataTable .
The ajaxKeys attribute is bound to Set <Integer> Object which holds the row numbers to be updated.
For example , suppose you want to invoke a Mbean method using a4j:commandButton and want to render a particular row and column after the action finishes . You can use the following :
<a4j:commandButton action="#{bean.someAction}" reRender="columnID,columnID2">
<f:setPropertyActionListener value="#{idx}" target="#{bean.selectedRow}" />
</a4j:commandButton>
<rich:dataTable id="myTable" value="#{bean.table}" var="me" ajaxKeys="#{bean.rowsToUpdate}" rowKeyVar="idx">
<rich:column id="columnID">
<h:outputText value="#{me.id}" />
</rich:column>
<rich:column id="columnID2">
<h:outputText value="#{me.valueOne}" />
</rich:column>
<rich:column>
<h:outputText value="#{me.valueTwo}" />
</rich:column>
</rich:dataTable>
Inside the bean.someAction() , you add the row number that you want to update to the rowsToUpdate integer set:
HashSet<Integer> rows = new HashSet<Integer>();
rows.add(selectedRow);
setRowsToUpdate( rows );