CODEWITHSUNDEEP
primefacesheaderdatatable
Chirag Jhaveri
Chirag Jhaveri

Reputation: 145

Primefaces Datatable - 4.0

I was using Primefaces 3.4. I recently upgraded to primefaces 4.0.

Below code was working fine in 3.4. However after I upgraded to 4.0, my table facet header doesn't align with the column headers.

enter image description here 

<p:dataTable id="itunesTopSongsDt"
             var="itunesTopSongsDtV"
             value="#{applicationAccessMb.itunesTopSongsList}"
             resizableColumns="false"
             style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;">


                                    <f:facet name="header">
                                        <p:row>
                                            <p:column colspan="3">
                                                <p:outputPanel style="float:left;">
                                                    <h:outputText id="itunesTopSongsDtHdr"
                                                                  value="iTunes Top 10 Songs"/>
                                                </p:outputPanel>
                                            </p:column>

                                            <p:column>                                        
                                                <p:outputPanel style="float:right;">       
                                                    <p:selectOneMenu  id="songsChartCountrySom"
                                                                      value="#{applicationAccessMb.songChartCountry}"
                                                                      effect="fade"
                                                                      style="text-align: left">

                                                        <f:selectItems value="#{applicationAccessMb.reportCountry}"/>

                                                        <p:ajax process="songsChartCountrySom"
                                                                event="change"
                                                                listener="#{applicationAccessMb.getItunesTopSongsForCountry}"
                                                                update="itunesTopSongsDt"/>  

                                                    </p:selectOneMenu>
                                                </p:outputPanel>  
                                            </p:column>

                                        </p:row>
                                    </f:facet>                                                              

                                    <p:column headerText="Rank"
                                              width="30"
                                              style="text-align: center;">
                                        <h:outputText value = "#{itunesTopSongsDtV.rank}"/>
                                    </p:column>

                                    <p:column width="45">
                                        <p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/>
                                    </p:column>

                                    <p:column headerText="Artist"
                                              width="200">
                                        <h:outputText value = "#{itunesTopSongsDtV.artist}"
                                                      rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/>
                                        <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}',
                                                                            '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1');  return false;"
                                                      rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}">
                                            <h:outputText value = "#{itunesTopSongsDtV.artist}"/>
                                        </h:outputLink>                                
                                    </p:column>

                                    <p:column headerText="Title"
                                              width="250">
                                        <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}',
                                                                            '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1');  return false;">
                                            <h:outputText value = "#{itunesTopSongsDtV.title}"/>
                                        </h:outputLink>
                                    </p:column>

                                </p:dataTable>

See the pictures. Is there any setting I am missing which I need to do in primefaces 4.0

Thanks Chirag

Upvotes: 1

Views: 1495

Answers (2)

toscanelli
toscanelli

Reputation: 1241

A very simple solution would be replace the outputPanel by an easy div with align 

<div align="left"> 
   <h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/>
</div>

Upvotes: 2

Pravin
Pravin

Reputation: 103

Primefaces Datatable - 4.0

Remove all style

First Specified table size i.e 700px;

e.g <style="width:700px;float:left;">

or

Specified div

<div style="width:700px;">

  <div>Write your Top ten album here </div>

  <div>Write datatable here </div>

 </div>

Upvotes: 0

Related Questions