I have 13 columns in a table. When I display it in a <h:dataTable>, then it expands to a very wide area on the page.
Is there any way to minimize their width or to display some columns above and some columns below?
You can use h:dataTable's columnClasses attribute to set width of columns.
From the Java EE tutorial:
If columnClasses or rowClasses
specifies more than one style, the
styles are applied to the columns or
rows in the order that the styles are
listed in the attribute. For example,
if columnClasses specifies styles
list-column-center and
list-column-right and if the table has
two columns, the first column will
have style list-column-center, and the
second column will have style
list-column-right.
You can define styles for different widths and assign these styles to your columns. Here is an example:
<h:dataTable id="items"
columnClasses="list-column-center, list-column-left,
list-column-right, list-column-center">
...
</h:dataTable>
And in your css file:
.list-column-center{ width: 300px; }
.list-column-left{ width: 100px; }
If you want to display columns in rows you can use for example two datatables in a panelGrid:
<h:panelGrid columns="1">
<h:dataTable value=#{myBean.myTable} var="item">
<h:column>#{item.column1}</h:column>
...
</h:dataTable>
<h:dataTable value=#{myBean.myTable} var="item">
<h:column>#{item.column2}</h:column>
...
</h:dataTable>
</h:panelGrid>
Related
I just want to add p:commandButton for each item in list in p:dataGrid.
But, when I set columns = 4 and rows = 1 from properties p:dataGrid. I can't get value from commandButton anymore in rest of list (except for the first item in list).
Tried change into h:commandButton, p:commandLink, ajax= false;
<p:dataGrid var="list" value="#{myBean.listCompany}" columns="4" layout="grid"rows="1" paginator="true" paginatorPosition="bottom" paginatorTemplate="{PreviousPageLink} {NextPageLink} ">
<div class="card" style="height: 350px">
<p:column>
<p:panel>
<h:panelGrid columns="1">
<p:commandButton value="Choose" action="#{myBean.selectCompany(list.companyName)}">
</p:commandButton>
</h:panelGrid>
</p:panel>
</p:column>
</div>
</p:dataGrid>
Based on this , https://knowles.co.za/primefaces-actions-not-firing-in-last-rows-of-datagrid/
The quick fix is just to set the number of rows correctly, to fill the number of columns you have. As long as the number of rows is a multiple of the number of columns (eg, 2 columns, 6 rows) you should be fine.
But, this is not the solution that I want, I need to display p:dataGrid with 4 columns and 1 row.
If I get your intention right that you want to display 4 elements out of #{myBean.listCompany} in one row, you should set colums="4" and rows="4".
This way rows is a multiple of the number of columns with the multiplicator being 1.
Rows here seemes to be the total number of elements from #{myBean.listCompany} to display per page. If this does not match with a multiple of columns, there seemes to be some kind of mismatch between rendering and component input handling.
You can add a rowIndexVar="rowIndex" and output that with each element to make visible what one row is in a dataGrid.
<p:dataGrid var="list" value="#{myBean.listCompany}" columns="4"
layout="grid" rows="4" paginator="true" paginatorPosition="bottom"
paginatorTemplate="{PreviousPageLink} {NextPageLink} " rowIndexVar="rowIndex">
<div class="card" style="height: 350px">
<p:column>
<p:panel>
<h:panelGrid columns="1">
<p:commandButton value="Choose Row #{rowIndex}"
action="#{myBean.selectCompany(list.companyName)}">
</p:commandButton>
</h:panelGrid>
</p:panel>
</p:column>
</div>
</p:dataGrid>
I have a dataTable with dynamic columns:
<p:columns value="#{dashboardEditionBean.columns}" var="column" columnIndexVar="colIndex" sortBy="#{deviceMock[column.property]}" filterBy="#{deviceMock[column.property]}">
<f:facet name="header">
<h:outputText value="#{column.header}" />
</f:facet>
<h:outputText value="#{deviceMock[column.property]}" />
</p:columns>
I wonder if there is a way to set ID of each column? I need this so I can retrieve the column ID at the backing bean. I know that PrimeFaces generate some ID's for these columns and add the column index to them, but since I want to be able to reorder these columns and store the changes I need some more descriptive information at the backing bean (custom ID or something else).
<p:column headerText="serial no">
<h:outputText value="#{helloBean.serialNo}"></h:outputText>
</p:column>
<p:column headerText="name">
<p:inputText value="srikanth"></p:inputText>
</p:column>
</p:dataTable>
The above is populated by a list of 10 objects with serial numbers from 1 to 10. The datatable renders with 10 rows with first column showing serial number correctly but the second column in all the rows is shown blank even though i hard coded column value.
What is the reason behind this!!!!
Use h:outputText tag for second column as well, this will render the values. If you want to provide input, use p:inputText tag.
<p:column headerText="name">
<h:outputText value="srikanth"></h:outputText>
</p:column>
i think the way dataTable in JSF works is that you have two important attributes value and var defined at table level, here value is a collection / arraylist of POJOs which you want to iterate and val is one item in the list / POJO at a time. in table columns using JSF components value property, you can access the value of particular properties of POJO and display their values. Number of rows displayed in table will depend on size of arrayList. For example Employee table with different attributes of employee in different columns. so one good way seems to be iterating over table's value property and rendering columns accordingly.
here since you are displaying same constant value for name for all the columns, you can use a string constant defined in bean and access it from the value property of the component and it should work.
it was little bit surprising that using
<p:inputText value="srikanth"></p:inputText>
outside a dataTable on a page results in html code <input type="text" value = "srikanth" ...> but it does not work that way inside a dataTable.
after using footer facet of column, i could see the inputText value :
<p:dataTable>
<p:column >
<f:facet name = "header">name</f:facet>
<f:facet name="footer"><p:inputText value="srikanth"></p:inputText></f:facet>
</p:column>
</p:dataTable>
the code above could generate an html <input value="srikanth"...> inside table's footer .
It seems like static content is better suited to be placed inside table columns header and footer area while actual content should be provided through dataTable's value and var attributes.
JSF:
...
xmlns:t="http://myfaces.apache.org/tomahawk">
<t:panelGrid columns="4">
...
</t:panelGrid>
It dynamically generates plain old HTML table with tr's and td's elements.
How can I set specific css styles for these tr and/or td elements?
Use columnClasses and rowClasses attributes to give each cell a unique class
For example:
<t:panelGrid columns="4" columnClasses="a,b,c,d" rowClasses="x,y,z">
</t:panelGrid>
columnClasses
The columnClasses attribute accepts a comma-delimited list of CSS style classes that will be applied to the columns of the table. Style classes for an individual column may also be defined in a space separated list. A style class is applied to a table column as the value for the class attribute of rendered td or th element.
The algorithm used to apply the CSS style classes to the table columns is simple. In the table rendering process, style classes are applied to columns one at a time until (a) there are no more columns to display or (b) there are no more style classes to apply.
* If (a) happens at the same time as (b), the next row in the table is rendered.
* If (a) happens before (b), the remaining style classes are ignored.
* If (b) happens before (a), the remaining columns will not have style classes.
rowClasses
The rowClasses attribute accepts a comma-delimited list of CSS style classes to be applied to the rows of the table. Style classes for an individual row may also be defined in a space separated list. A style class is applied to a table row as the value for the class attribute of rendered tr element.
Style classes are applied to rows in the same order that they are defined. For example, if there are two style classes, the first is applied to the first row, the second is applied to the second row, the first is applied to the third row, the second is applied to the fourth row, and so on. The list of styles is looped over from the beginning until there are no more rows to display.
In my standard JSF Project (Mojarra 2.0.3)
This tag generates:
<h:panelGrid border="1"
columns="4"
columnClasses="a,b,c,d"
rowClasses="x,y,z">
<h:outputText value="ax"/>
<h:outputText value="bx"/>
<h:outputText value="cx"/>
<h:outputText value="dx"/>
<h:outputText value="ay"/>
<h:outputText value="by"/>
<h:outputText value="cy"/>
<h:outputText value="dy"/>
<h:outputText value="az"/>
<h:outputText value="bz"/>
<h:outputText value="cz"/>
<h:outputText value="dz"/>
</h:panelGrid>
This HTML:
<table border="1">
<tbody>
<tr class="x">
<td class="a">ax</td>
<td class="b">bx</td>
<td class="c">cx</td>
<td class="d">dx</td>
</tr>
<tr class="y">
<td class="a">ay</td>
<td class="b">by</td>
<td class="c">cy</td>
<td class="d">dy</td>
</tr>
<tr class="z">
<td class="a">az</td>
<td class="b">bz</td>
<td class="c">cz</td>
<td class="d">dz</td>
</tr>
</tbody>
</table>
I have a simple JSF datatable, which currently has four columns, one header row and (with current data) three data rows.
I have to add three extra columns; that part's easy.
I also want to add another header row before the existing header row with headers that span a subset of the columns.
The desired result is something like:
Column 1: first row empty; header on second row.
Columns 2-4: first row header spans 3 columns; second row has individual column headers.
Columns 5-7: first row header spans 3 columns; second row has individual column headers.
Is this possible? If so, how do I do it?
Following are images showing what it should look like.
This is the data table before I've changed anything.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample1.gif
This is the data table after I've added three columns. I was able to do this easily.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample2.gif
This shows the desired end result, which I can't figure out. Note the "Retail Sales" and "Fleet/Gov Sales" headers each span three columns.
Table Example 1 http://www.isw.com.au/home/sjleis/stuff.nsf/tableexample3.gif
This would be easy if you were using Richfaces (as Bozho mentions) with the breakBefore attribute.
Here's a quick example:
<rich:dataTable value="#{countryCodeListFactory}" var="c">
<f:facet name="header">
<rich:columnGroup>
<rich:column colspan="2">Main</rich:column>
<rich:column colspan="4">Other Details</rich:column>
<rich:column breakBefore="true">Country ID</rich:column>
<rich:column>Name</rich:column>
<rich:column>Region</rich:column>
<rich:column>Alpha</rich:column>
<rich:column>ISO</rich:column>
<rich:column>Flag Path</rich:column>
</rich:columnGroup>
</f:facet>
<rich:column>#{c.countryId}</rich:column>
<rich:column>#{c.countryName}</rich:column>
<rich:column>#{c.region}</rich:column>
<rich:column>#{c.alpha3}</rich:column>
<rich:column>#{c.isoNum}</rich:column>
<rich:column>#{c.flagImage}</rich:column>
</rich:dataTable>
If you're not then hopefully you're using facelets. Then you can build the table manually using the <ui:repeat>
<table>
<tr>
<th colspan="2">Main</th>
<th colspan="4">Details</th>
</tr>
<tr>
<th>ID</th>
<th>Name</th>
<th>Region</th>
<th>Alpha</th>
<th>ISO</th>
<th>Flag</th>
</tr>
<ui:repeat value="#{countryCodeListFactory}" var="c">
<tr>
<td>#{c.countryId}</td>
<td>#{c.countryName}</td>
<td>#{c.region}</td>
<td>#{c.alpha3}</td>
<td>#{c.isoNum}</td>
<td>#{c.flagImage}</td>
</tr>
</ui:repeat>
</table>
You can't do this with <h:dataTable>. Well, you can with some ugly hacks, like modifying the DOM with javascript and adding the desired columns, but that's not what you should do.
Take a look at RichFaces dataTable - its columns support the colspan attribute.