How to decrease datatable row height in primefaces - primefaces

I tried to decrease the height of the column by using following syntax:
<p:column style="height:10px;">
and the datatable row height won't decrease; it only increases if I set a bigger size.
Is there a way to make the height smaller than the default/existing one?
This is the exact code, that I'm using:
<c:forEach var="column" items="#{dispoFillingPage.columnListAuftrag}">
<c:choose>
<c:when test="${column.dateColumn}">
<p:column id="#{column.id}" filterStyleClass="#{column.filterStyleClass}" headerText="#{column.title}" visible="#{column.visible}"
width="#{column.width}" filterBy="#{data[column.property]}" sortBy="#{data[column.property]}" field="#{column.property}"
filterFunction="#{standortPage.filterByDate}" filterMatchMode="contains" style="height:10px">
<f:attribute name="rtcCol" value="#{column}" />
<h:outputText value="#{data[column.property]}">
<f:convertDateTime type="date" pattern="yyyy-MM-dd" />
</h:outputText>
</p:column>
</c:when>
<c:otherwise>
<p:column id="#{column.id}" filterStyleClass="#{column.filterStyleClass}" headerText="#{column.title}" field="#{column.property}"
visible="#{column.visible}" width="#{column.width}" filterBy="#{data[column.property]}" sortBy="#{data[column.property]}"
filterMatchMode="contains" style="height:10px;">
<f:attribute name="rtcCol" value="#{column}" />
<h:outputText value="#{data[column.property]}" />
</p:column>
</c:otherwise>
</c:choose>
</c:forEach>
I have to do this, because I have two datatables with 20 rows each and I have to make them fit in the screen, so that they are entirely visible to the user.

I had to decrease the font-style of the datatable in order to decrease also the row height.
<p:datatable style="font-size:8px">
But this way I decrease the entire datatable.

Related

Primefaces Datatable Radiobutton submitting wrong values

I got a datatable with a custom layout selectoneradio. It doesnt submit correct values after the first row.
This is the datatable:
<h:form id="dataTableForm">
<br />
<p:dataTable id="absenceTable" var="absence" widgetVar="absenceTable"
value="#{adminController.absenceList}" rowIndexVar="rowIndex"
emptyMessage="Keine Absenzen mit ausstehender Genehmigung gefunden"
style="width:70%;margin-left:15%;margin-right:15%;margin-bottom:20px;margin-top:10px;"
rowKey="#{absence.id}" rows="30" paginator="true"
paginatorPosition="bottom" paginatorAlwaysVisible="false"
paginatorTemplate="{PageLinks}" sortBy="#{absence.startDate}"
sortOrder="descending"
filteredValue="#{adminController.filteredAbsences}">
<f:facet name="header">Mitarbeiterabsenzen mit ausstehender Genehmigung</f:facet>
<p:column>
<p:selectOneRadio id="action" value="#{absence.status}" required="false"
layout="custom" >
<f:selectItem itemValue="PENDING" noSelectionOption="true" />
<f:selectItem itemValue="APPROVED" />
<f:selectItem itemValue="REJECTED" />
<p:ajax event="valueChange" immediate="true" listener="#{adminController.checkBoxListener}" />
</p:selectOneRadio>
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="0" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="1" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="2" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Speichern"
action="#{adminController.save()}" update="absenceTable" />
</f:facet>
</p:dataTable>
</h:form>
The row index and absence loop variable is defined on the datatable.
Its all in the same form.
The problem is, somehow, it only works for the first row. The other rows submit "on" instead of the value. I found in the generated html that they are not provided with value-tag like the radiobuttons in the first row are:
I guess its gonna be a stupid syntax issue or something... This is what i get debugging clicking on anything but the first row:
Im running on PF 5.2
This is a bug in PF5.2
The code runs smoothly on PF5.3

ColumnToggle: hide some columns

I'm working with primefaces 5.0 and i created one Primefaces:Datatable with Column:ColumnToggle but i need define initial columns to display.
How to hide some columns initially?
With property toggleable="false" i define that column not toggleable. Don't exist one property that defines initial columns?
<p:datatable ...>
<f:facet name="header">
<p:commandButton id="toggler" type="button" value="Data" icon="ui-icon-calculator" />
<p:columnToggler datasource="itemsDT" trigger="toggler" />
</f:facet>
...
</p:datatable>
How to hide some columns initially?
use visible="false".
Example
<p:column filterBy="#{vo.faxNo}" headerText="Fax No." sortBy="#{vo.faxNo}"
filterStyle="width: 90%" style="width: 130px;" visible="false" >
<h:outputText value="#{vo.faxNo}" />
</p:column>

In Primefaces, adding a row to a table with filtering

I'm using a datatable with filtering. This is the table declaration:
<p:dataTable id="#{tblId}" var="p" editable="true" editMode="cell"
resizableColumns="true" rowIndexVar="rowIndex" selectionMode="multiple"
rowKey="#{p.id}" selection="#{ppselection}"
emptyMessage="No Params in table" value="#{tblValue}" scrollable="true"
style="height:100%" sortMode="multiple" styleClass="#{styleClass}"
filteredValue="#{filteredParams}">
When adding a new row to the table, I want it to already be displayed according to the current filter. i.e. if the filter is "aa" and the row name is "aabbcc" then I want it displayed, but if the row name is "bbcc" then I don't want it displayed. Right now, all I came up with is decidng whether I want to manually add it to the filteredParams list or not.
This is an example of one of the columns in the table, although all the coulmns are filterable:
<p:column width="15%" id="ParameterColumn" headerText="Parameter" sortBy="#{p.name}"
filterBy="#{p.name}" filterMatchMode="contains">
<p:cellEditor id="Parameter">
<f:facet name="output">
<h:outputText id="param_name" value="#{p.name}" />
</f:facet>
<f:facet name="input">
<p:inputText id="nameInput" value="#{p.name}" style="width:99%"
validator="#{p.validateParamName}">
<p:ajax event="change"
update=":main_tabs:paramForm:ParamTbl, :main_tabs:paramForm:SplitedParamTbl" />
</p:inputText>
<p:messages for="nameInput" display="tooltip" />
</f:facet>
</p:cellEditor>
</p:column>
Thanks!!
You can trigger filtering in oncomplete method of ajax/button that adds new row:
oncomplete='tableWidgetVar.filter();'

Primefaces datatable is not showing one column header after ajax (the column rows ares showed)

The datatable show this column (and others):
<p:column id="columnId" headerText="#{bundle.headerColumn}"
rendered="#{item.condition()}" >
<p:cellEditor id="cellEditId">
<f:facet name="output" >
...
</f:facet>
<f:facet name="input">
...
</f:facet>
</p:cellEditor>
</p:column>
ajax update the data table:
<p:ajax event="cellEdit" listener="#{controller.onCellEdit}"
update="dataTableId" />
but the column header of this column is not showed after ajax updates.
The column rows and footer are showed ok and the headers of columns at right are shifted one column to left.
Before ajax, the html rendered is:
<span><span>Header Text</span></span></th>
But the code after ajax update is:
<span>Header Text</span></th>
Other columns are ok but they don't have rendered attribute.
Put this in your datatable:
<p:columnGroup type="header">
<p:row>
<p:column headerText="Select" />
<p:column headerText="Name activity" />
<p:column headerText="View activity" />
<p:column headerText="Consistency and completeness" />
</p:row>
</p:columnGroup>
This is a header's of your table...after put your columns.
Here there a example: http://www.primefaces.org/showcase/ui/datatableGrouping.jsf
By.

Primefaces datatable column width does not work

i created a datatable which contains some test data. My problem is that some values are too large for one of my columns, that leads to a weird layout:
(after the order column two other columns should be displayed)
i already tried a few things out:
<p:column headerText="Orders" width="50"> no changes
<p:column headerText="Orders" style="max-width: 30px;"> makes the column smaler but the value is cut after 30px
adding after a few numbers a <br/> to force a breakline, but no changes
The order value is one big string. My goal is to change the orders column to a multiline column where the string value is splitted.
My datatable code:
<h:body>
<h:head>
</h:head>
<h:form id="form">
<p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}"
rows="25" paginator="true" emptyMessage="No customer found.">
<p:column headerText="Customer ID" style="text-align: center;">
<h:outputText value="#{customer.customerNumber}" />
</p:column>
<p:column headerText="Fist Name" style="text-align: center;">
<h:outputText value="#{customer.contactFirstName}" />
</p:column>
<p:column headerText="Last Name" style="text-align: center;">
<h:outputText value="#{customer.contactLastName}" />
</p:column>
<p:column headerText="Sales Employee Nr." style="text-align: center;">
<h:outputText value="#{customer.employee.employeeNumber}" />
</p:column>
<p:column headerText="Orders">
<h:outputText value="#{customer.allOrders}"/>
</p:column>
<p:column headerText="Payments" style="text-align: center;" >
<p:commandButton id="payment_btn" update=":form:p_display" oncomplete="paymentDialog.show()" icon="ui-icon-calculator">
<f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
</p:commandButton>
<p:tooltip for="payment_btn" value="Click to see all payments" showEffect="fade" hideEffect="fade"></p:tooltip>
</p:column>
<p:column headerText="Contact Data" style="text-align: center;" >
<p:commandButton id="contact_btn" update=":form:c_display" oncomplete="contactDialog.show()" icon="ui-icon-home">
<f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
</p:commandButton>
<p:tooltip for="contact_btn" value="Click to see the detailed contact data" showEffect="fade" hideEffect="fade"></p:tooltip>
</p:column>
</p:dataTable>
</h:form>
</h:body>
In other threads i found solutions using css but that didn't work either (the reason could be that i dont now how and where the css file and methods should be created).
If you want rows to break you can use CSS. Try adding this to your style
.ui-datatable td,.ui-datatable th {
white-space: normal;
}
This won't work if there are no blank spaces in your text, because the browser won't know where to break the line, in that case you could make use of the wbr tag, but it's important to say it's not supported by IE
See also:
http://www.w3schools.com/tags/tag_wbr.asp
try adding this to datatable scrollable="true" it worked.