How to add command buttons in datatable pagination row

Post Reply
techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

11 Oct 2018, 00:11

Hi

I am using California theme and wanted to add command buttons to datatable pagination row without distracting page numbers alignment and changing width of the datable.

please let me know. thanks in advance.


techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

11 Oct 2018, 19:41

I am able to add content to pagination row,

1. but button and menu become not clickable, as menuItem requires form tag but datable not supporting form tag. Here is my code and added screen shot in google drive.
2. when I align using <div align="right"> row height get increasing, page numbers and exporter content are not aligned.

please let me know.

https://drive.google.com/drive/folders/ ... 1M3HO-BPTk

Code: Select all

 <div class="ui-g-12 ui-md-12 ui-lg-12">
                    <p:dataTable id="deptData" var="dept" value="#{deptView.deptList}" selectionMode="single" reflow="true"
                        rowKey="#{dept.id}" paginator="true" rows="15" paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {Exporters}" style="margin-bottom:20px">
                        
                        <f:facet name="{Exporters}">                       	
	                		<p:commandButton type="button" icon="fa fa-plus" value="Add" />
	                        <p:menuButton value="Options">
								<p:menuitem value="Exporte Excel" ajax="false" immediate="true" icon="fa fa-file-excel-o">
									<p:dataExporter type="xls" target="deptData" fileName="Department"/> 
								</p:menuitem>
								<p:menuitem value="Exporte PDF" ajax="false" immediate="true" icon="fa fa-file-pdf-o">
									<p:dataExporter type="pdf" target="deptData" fileName="Department"/> 
								</p:menuitem>
							</p:menuButton>                        
                        </f:facet>
                                                                        
                        <p:column headerText="Department Id" sortBy="#{dept.id}" style="text-align: center;">
                        	<h:outputText value="#{dept.id}" />
                        </p:column>
                        <p:column headerText="Name" sortBy="#{dept.name}">
                            <h:outputText value="#{dept.name}" />
                        </p:column> 
                        
                        <p:column headerText="Edit" exportable="false" style="text-align: center;">
                            <p:commandButton type="button" icon="fa fa-fw fa-edit" style="font-size: 12px;" update="edit" oncomplete="PF('edit').show();"/>
                        </p:column> 
                        <p:column headerText="Attributes" exportable="false" style="text-align: center;">
                            <p:commandButton type="button" icon="fa fa-plus-circle" style="font-size: 12px;" />
                        </p:column>       
                    </p:dataTable>
                </div>

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

17 Oct 2018, 09:11

Hi @techgeek,

This is a PrimeFaces core issue. Please try it without California Theme or Layout. Could you please create a ticket on PrimeFaces Github for it?

Best Regards,

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

18 Oct 2018, 19:45

We wanted California theme only, so no other choice :(

I'll file a ticket, please send me correct repo link.

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

19 Oct 2018, 08:45

This is not a Layout or Theme issue. Please create an issue on https://github.com/primefaces/primefaces

Best Regards,

techgeek
Posts: 38
Joined: 07 Sep 2018, 20:37

19 Oct 2018, 23:41

sure I'll do thanks

User avatar
aragorn
Posts: 3206
Joined: 29 Jun 2013, 12:38

22 Oct 2018, 11:33

Thanks a lot!

Post Reply

Return to ‚ÄúCalifornia - PrimeFaces‚ÄĚ

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest