Horizontal scrolling for DataTable (2.2)

[arnold]

Hello,

I would like to see horizontal scrolling if the sum of the column widths is more than the available width for DataTable. This happens a lot in enterprise applications in which there are many columns but the overall DataTable width is limited.

Maybe this feature is already implemented in 2.2.M1 but I've somehow missed it. Please let me know.

Thank you.

[arnold]

Anyone?

[cagatay.civici]

It is not supported right now, you can create an issue ticket as a feature request.

[healeyb]

I'm behind arnold on this one... it would be very useful.

[bumble.bee]

I believe a workaround would be to wrap the table in an HTML div and then set the style on the div to something like:

Code: Select all

<div style="overflow: auto; width: 300px; height: 100%">
<p:dataTable>
...
</p:dataTable>
</div>

Note: IE and Firefox treat overflow differently. If you set overflow width: 100% it will probably do what you want on IE, but not on Firefox, although Firefox is actually following the spec. I think if you set a fixed width you'll get reasonable results on both IE and Firefox.

[cagatay.civici]

Thanks for sharing, I believe there are some css hacks for IE to make it run fine on IE as well.

[bumble.bee]

It doesn't look like a feature request has been made so I went ahead and created one:

http://code.google.com/p/primefaces/iss ... il?id=1347

[healeyb]

I did a test of the style="overflow: auto" on IE8, what happens is that the
div renders with disabled scrollbars if the content fits the available space,
with the scrollbars becoming enabled when the content doesn't fit. I wasn't
especially keen on how this looked really, I'd rather have no scrollbar
taking up space unless it's needed at the time.

Regards,
Brendan.

[scounthorpe]

Hi,


Has Horizontal scrolling for DataTable been added in Release 2.2 RC2.
If not then will this feature be added to Release 3??


Tks
John

[blemasle]

For those interrested, here is the patch to make this working on 2.2.1 :

Code: Select all

Index: src/main/java-templates/org/primefaces/component/datatable/DataTableTemplate.java
===================================================================
--- src/main/java-templates/org/primefaces/component/datatable/DataTableTemplate.java	(revision 4532)
+++ src/main/java-templates/org/primefaces/component/datatable/DataTableTemplate.java	(working copy)
@@ -19,6 +19,7 @@
     public static final String DATA_CLASS = "ui-datatable-data";
     public static final String EMPTY_DATA_CLASS = "ui-datatable-data-empty";
     public static final String ROW_CLASS = "ui-widget-content";
+    public static final String BODY_CLASS = "ui-datatable-body";
     public static final String HEADER_CLASS = "ui-datatable-header ui-widget-header ui-corner-tl ui-corner-tr";
     public static final String FOOTER_CLASS = "ui-datatable-footer ui-widget-header ui-corner-bl ui-corner-br";
     public static final String SORTABLE_COLUMN_CLASS = "ui-sortable-column";
Index: src/main/java/org/primefaces/component/datatable/DataTableRenderer.java
===================================================================
--- src/main/java/org/primefaces/component/datatable/DataTableRenderer.java	(revision 4532)
+++ src/main/java/org/primefaces/component/datatable/DataTableRenderer.java	(working copy)
@@ -196,11 +196,14 @@
     protected void encodeRegularTable(FacesContext context, DataTable table) throws IOException {
         ResponseWriter writer = context.getResponseWriter();
 
+        writer.startElement("div", null);
+        writer.writeAttribute("class", DataTable.BODY_CLASS, null);
         writer.startElement("table", null);
         encodeThead(context, table);
         encodeTbody(context, table);
         encodeTFoot(context, table);
         writer.endElement("table");
+        writer.endElement("div");
     }
 
     protected void encodeScrollableTable(FacesContext context, DataTable table) throws IOException {
Index: src/main/resources/META-INF/resources/primefaces/datatable/datatable.css
===================================================================
--- src/main/resources/META-INF/resources/primefaces/datatable/datatable.css	(revision 4532)
+++ src/main/resources/META-INF/resources/primefaces/datatable/datatable.css	(working copy)
@@ -9,6 +9,10 @@
     padding:4px 10px 4px 10px;
 }
 
+.ui-datatable .ui-datatable-body {
+	overflow : auto;	
+}
+
 .ui-datatable .ui-datatable-header {
     border-bottom: 0px none;
 }
@@ -105,6 +109,7 @@
 .ui-datatable-scrollable-body {
     overflow:auto;
 }
+
 .ui-datatable-scrollable .ui-datatable-scrollable-body table,
 .ui-datatable-scrollable .ui-datatable-scrollable-header table,
 .ui-datatable-scrollable .ui-datatable-scrollable-footer table {

I just made that working for non-scrollable DataTables, because columns width is uggy with that kind of table