Empty Message shows up only in first column of dataTable

UI Components for JSF
Post Reply
Alan
Posts: 102
Joined: 25 Oct 2010, 04:45

29 Jan 2012, 01:26

I have a data table like this:

Code: Select all

 <h:form id="mqForm">

                    <p:dataTable id="mqTable"
                                 value="#{myData.dataModel}"
                                 var="data"
                                 resizableColumns="true"
                                 emptyMessage="No Data For You"
                                 >
                        
                        <f:facet name="header">
                            <h:outputText value="Data" />
                        </f:facet>
                        
                        <p:column style="width: auto" >
                            <f:facet name="header">
                                <h:outputText value="Data ID" />
                            </f:facet>
                            <h:outputText value="#{data.id}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Category" />
                            </f:facet>
                            <h:outputText value="#{qwip.category.name}" />
                        </p:column>                        
... etc
The empty message "No Data For You" is displayed only in the first column of the empty table. Is there a way to get it to span the table?
Netbeans 7.1, GlassFish 3.1.1, MacOS X 10.6.8, Safari, Firefox

Spiridon
Posts: 5
Joined: 14 Jan 2012, 06:11

29 Jan 2012, 18:17

Hi,

as i observed the problem seems to be with ( resizableColumns="true" ). Even though the table cell where the text 'No Data For You' is placed has ( colspan="2" ), the javascript makes sure that it has only width of the very first column.

Workaround I thought of is as follows:

If DataTable does not contain any records than tbody has "ui-datatable-data-empty" class. Every cell in DataTable has "ui-dt-c" class.
If you add this CSS declaration you should be fine:

Code: Select all

  .ui-datatable-data-empty .ui-dt-c {
    width: 100% !important;
  }    
JSF 2.1.6
PrimeFaces 3.1 SNAPSHOT
GlassFish Server 3.1
NetBeans 7.1

Alan
Posts: 102
Joined: 25 Oct 2010, 04:45

04 Feb 2012, 21:58

Thanks -- I'll try that
Netbeans 7.1, GlassFish 3.1.1, MacOS X 10.6.8, Safari, Firefox

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: Google [Bot] and 24 guests