I have a datatable for displaying the result being originated on the basis of various parameters selected on the same panel. I have attached the snap-shot of datatable.
Datatable maybe containing multiple rows. It may look you all cluttered at this movement but I am trying to improve it.
I have tried to use draggable and resizable attributes of primefaces datatable as below but those are not working. I am not able to expand and drag the columns across the datatable:
<p:dataTable id="tbl" var="item"
value="#{cc.attrs.searchAndConsultSecuritiesEntriesResultsPanel.results}"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
paginator="true" rows="20" style="margin-bottom:20px"
sortMode="multiple" draggableColumns="true" draggableRows="true"
resizableColumns="true">
Related
I have a primefaces dataTable which is both select-able (single selection) and has draggable rows. I also need to select a row via a button (apart from being able to select the row itself). My view code is:
<p:dataTable id="itemTable" widgetVar="itemTable"
var="item" draggableRows="true"
value="#{routesModelBean.itemList}" selectionMode="single"
selection="#{routesModelBean.selectedItem}"
rowKey="#{item.id}" rowIndexVar="rowId">
<p:column style="width:32px;text-align: center">
<p:commandButton icon="ui-icon-search"
onclick="PF('itemTable').unselectAllRows();PF('itemTable').selectRow(#{rowId},false);" type="button">
</p:commandButton>
</p:column>
The problem seems to be the "rowIndexVar". For example, if i have two items in my list and i swap them by dragging, then clicking the button of one item will result in selecting the other.
Edit: Primefaces version is 6.0
When reordering the rows you should update the table too. Use the following
<p:ajax event="rowReorder" listener="YOUR_LISTENER" update=":itemTable" />
I am working with PrimeFaces 5. The row selection is enabled and I want to embed a commandLink in one of the columns. When I click on the commandLink, I show a dialog, but I do not want the row to be selected. Is this possible (currently both events happen, the dialog is shown and the row is selected)?
<p:dataTable id="tableData" widgetVar="tableData" var="p"
value="#{bean.list}" ...
selection="#{bean.selectedItem}" selectionMode="single">
<p:ajax event="rowSelect" listener="#{actionBean.onSelect}"
update="#form" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();" />
<p:column headerText="Title" ...>
<p:commandLink id="clickableTitle" onstart="PF('statusDialog').show();"
oncomplete="PF('statusDialog').hide();PF('detailsDialog').show()">
<h:outputText value="#{p.title}" styleClass="link"/>
</p:commandLink>
</p:column>
I am using a PrimeFaces dataTable. I need the column headers to word-wrap and be resizable. Here are my issues:
When I do styleClass="wrap" resizableColumns="true", only resizable
is working.
When I do styleClass="wrap" resizableColumns="false", only word-wrap is working.
My code is:
<p:dataTable id="transitCycleHighLevelDataTable" var="record"
value="#{transitCycleMB.highLevel}" rowKey="#{record.group}"
paginator="true" paginatorPosition="bottom" rows="10"
styleClass="wrap" resizableColumns="true" scrollable="true"
scrollWidth="100%" scrollHeight="250"
rowsPerPageTemplate="10,20,50"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {RowsPerPageDropdown} {NextPageLink} {LastPageLink} {Exporters}"
currentPageReportTemplate="(Displaying {startRecord} - {endRecord} of {totalRecords}, Page: {currentPage}/{totalPages})">
Adding this style to your dataTable will allow the column headers to wrap and the columns to remain resizable:
.ui-datatable thead th {
white-space: normal !important;
}
Note: This was tested and works on PrimeFaces 6.2.
I am using <p:autoComplete> in my webproject. When lots of data coming to the search box the position of list is from bottom to top instead of top to bottom and not all data is visible.
How can I fix it so that it shows the data from top to bottom?
You can use the scrollHeight attribute to define height of the items those are seen in list as follows
<p:autoComplete value="#{bean.text}" completeMethod="#{bean.complete}" scrollHeight = "150" />
Primefaces documentation will definitely help you regarding this
<p:autoComplete id="acOrden" value="#{serviciosMB.ordenSelect}"
completeMethod="#{serviciosMB.complete}"
var="mauto"
itemValue="#{mauto}"
itemLabel="#{mauto.consecutivoOrden}"
converter="ordenProduccionServiciolConverter" required="true">
<p:ajax event="itemSelect" listener="#{serviciosMB.renderPanelOrden}" update="panelOrden :form2:growl" />
<p:column>
#{mauto.codigoOrden}
</p:column>
</p:autoComplete>
see ajax listener
I have a datatable:
<p:dataTable style="width: 100%;" id="dTable" var="tt" value="#{backingBean.memberList}" paginator="true" rows="20" selection="#{backingBean.selectedMember}" selectionMode="single" onRowSelectUpdate="mf:tabcontent" onRowSelectComplete="tvl();">
whose rows come selected when the page loads. Does anyone have any opinion about this issue?
primefaces version is 2.2.1.
Thanks in advance.
That will happen if the array or collection behind selection="#{backingBean.selectedMember}" is been prefilled with the selected rows. If you set it to null or an empty array/collection, then nothing will be preselected.