i have followed the primefaces showcase example for the datatable to make is scrollable across and while it works across it makes all the columns very small and i am unable to really read the columns, the reason for the scrollable function is because of the large amount of columns i need to display, is there any way of keeping the size of the columns but also make the datatable scrollable ?
here is the datatable code :
<p:dataTable id="UserTable"
widgetVar="usersTable"
paginator="true" rows="10"
value="#{usertableController.items}"
var="item"
emptyMessage="No details was found with given criteria"
scrollable="true" scrollWidth="400">
there are 14 columns in total i need to display
thanks guys
You can always give width= "X" to your <p:column> or <p:columns>. It works when the datatable is scrollable. As follows,
<p:column selectionMode="multiple" width="15" />
<p:columns width="150" value="..." var="..." columnIndexVar="..." sortBy="..." filterBy="..." >
Related
Using
<p:dataTable
id="myissues"
value="{myIssuesController.myIssuesListModel.issueList}"
var="issueElement"
selection="#{issue}"
selectionMode="single"
rowKey="#{issueElement.idIssue}"
>
along with:
<p:ajax
event="rowSelect"
listener="#{myIssuesController.onSelectOneRow}"
update=":issueDetail"
oncomplete="PF('issueDetail').show();"
/>
I can open a dialog when I select a row on my dataTable.
How can I add an editable column to my table that goes into edition mode instead of opening the detail dialog when I click on one of its cells?
My first idea is to simply make the column editable and execute an oncomplete function that checks if the column selected is editable:
If it is, it will let it go into edition mode; if not it will call PF('issueDetail').show(); and show the detail dialog.
Only I don't know how to check if a particular column has been selected. How can I do that?
Should I do it like this or is there a simpler solution?
I solved using primefaces selection.
Basically, I removed the <p:ajax> component and added an extra column with a magnifier icon and a row editor icon to open the detail dialog / edit the entry; which is a more intuitive and user friendly solution than using the row selection action. The extra column looks like this:
<p:column style="width:32px;text-align: center">
<p:commandButton update=":issueDetail"
action="#{myIssuesController.onSelectOneRow}"
oncomplete="PF('issueDetail').show()"
icon="ui-icon-search" title="View" />
<p:rowEditor />
</p:column>
Hope someone can help me out with this.
The issue is as follows:
I have a datatable that displays user variables. One of the columns on the table is grouped to show the variable type in one cell for all the variables that share the same type, which can be many, and since there could be so many I enabled datatable pagination.
However, the issue comes when the variables of a said type exceed the rows per page number and are splitted among various pages. In that case, when I navigate to the next page, the information meant to be in the grouped column is lost and the data from the other columns is moved one column to the left, therefore showing an incorrect column-value relationship (the last column of the table therefore left blank).
Here is the code for my datatable and grouped column
<ace:dataTable value="#{bean.variables}" paginator="true" filterEvent="enter" selectionMode="single" id="variableTable" rowSelectListener="#{bean.showVariable}" var="variable" rows="10" paginatorPosition="bottom" >
<ace:column groupBy="#{variable.type}" headerText="#{basicBundleBase.type}">
<h:outputText value="#{variable.type}" />
</ace:column>
<ace:column groupOn="#{variable.name}" headerText="#{basicBundleBase.name}">
<h:outputText value="#{variable.name}" />
</ace:column>
<ace:column headerText="#{basicBundleBase.description}">
<h:outputText value="#{variable.description}" />
</ace:column>
I've searched a lot around but haven't got any clue on how to solve this; checked on ace:column and ace:dataTable tags but just can't seem to figure out how to make it work. That's why I came here to ask for some help.
Hope someone can give me a hand with this issue!
Thanks in advance for your help and time!
Cheers
Tsuru
I have a primefaces datatable with a rowToggler. When you type in values in the filters for a column, and then click the rowToggler on a row to open the expansion, and then if you click the rowToggler to close the expansion, the values are still in the column filters, but the data reloads without filtering the data.
I tried adding oncomplete='authTableWidget.filter();' to my p:ajax event="rowToggle, but that just makes it so that when you try to open a row expansion, it just reloads the table data with the filtered values and doesn't actually open the row expansion.
<p:dataTable var="auth" value="#{authBacking.auths}" widgetVar="authTableWidget" editable="true" id="authTable" paginator="true" rows="20" rowsPerPageTemplate="20,50,100"
paginatorTemplate="{CurrentPageReport} {PreviousPageLink} {PageLinks} {NextPageLink} {RowsPerPageDropdown}"
filteredValue="#{authBacking.filteredAuths}">
<p:ajax event="rowToggle" listener="#{authBacking.openRow}" update=":authForm:authTable" />
<p:column>
<p:rowToggler />
</p:column>
Try not updating the form on rowToggle. I personally haven't used rowToggler yet but in the show case examples, the rowToggle doesn't update the form.
I have a similar problem, I solved it make update for all, except the table.
is it possible to preselect a cell in the Primefaces DataTable component? How do I do that? Tried it already with a Primefaces Cell object with a Getter, but this is not called by my data table :-(.
I need this because I have to restore the selection of the cell done a request before, if validation tells me, that a required field in the form was not filled.
This is my xhtml code snippet:
<p:dataTable id="select-start-pos" var="item"
selectionMode="singlecell"
value="#{frankingController.startposItems}"
selection="#{frankingController.selectedCell}"
styleClass="startPosGrid">
<p:column id="startposcol1">
<h:outputText value=""/>
</p:column>
<p:column id="startposcol2" rendered="#{frankingController.startposColumns > 1}">
<h:outputText value=""/>
</p:column>
</p:dataTable>
Thank you for your help!
Mike
No and 3.x doesn't have cell selection feature
You can use Sheet control instead of Datatable, it has row selection feature.
http://www.primefaces.org/showcase-labs/ui/sheet.jsf
I am looking for a way to implement a expand functionality to the rows of a Richfaces DataTable. The user would click a "+" link located in the first column (of each row) of the Datatable and the row would "expand" (meaning new text would be shown between the current row and the next).
I have that working, the only problem is that all the information in the expanded view is displayed in the first column section of that row. What I am trying to do is to show the "expanded" text in the whole row (as if the "expanded" text row is not divided by the columns).
Any suggestions? I'm a bit new at jsf/richfaces, so any sample code would be appreciated.
You can do this with the breakBefore attribute on the rich:column component. There is an example of its use on the RF demo page.
It would work for you if you had the last column define the breakBefore attribute. An example:
<rich:dataTable id="mytbl" value="#{mybean.mydata}" var="row">
<rich:column>
<a4j:commandLink reRender="mytbl">
<h:graphicImage value="#{row.toggleImage}"></h:graphicImage>
<a4j:actionparam name="shown" value="#{not row.expand}" assignTo="#{row.expand}"/>
</a4j:commandLink>
</rich:column>
<rich:column>
<f:facet name="header">col 2</f:facet>
<h:outputText value="#{row.col2}"/>
</rich:column>
<rich:column breakBefore="true">
spans all the other columns
</rich:column>
</rich:dataTable>
One way for this is you can use the JQuery feature.
Demo link http://jsfiddle.net/BU28E/1/ .
One extra overhead here is you need to check how the rich:dataTable renders as Html and provide the DOM model for jQuery. It is bit tricky to have such feature in richfaces and it needs some complex workarounds.