ICEfaces
  1. ICEfaces
  2. ICE-10800

ace:dataTable - add support for responsive column display

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.1
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 4
    • Assignee Priority:
      P1
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.), Sample App./Tutorial

      Description

      The ace:dataTable would benefit from being able to support responsive rendering of its columns to better display on narrower displays, such as on mobile devices.

      A couple of possibilities exist for this:

      1. Priority-based rendering of columns. Each column can optionally be tagged with a "priority" attribute and only those columns that can be rendered completely in the available dataTable width are rendered, starting with the lowest priority to greatest priority.

      2. Automatic column-stacking. Columns are automatically stacked with their immediate neighbours as deep as required to fit them all in the available dataTable width. This could leverage the existing column-stacking support, but basically defines the stacks automatically based on the column and dataTable widths.

        Activity

        Ken Fyten created issue -
        Ken Fyten made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Fix Version/s 4.1 [ 11375 ]
        Affects Documentation (User Guide, Ref. Guide, etc.),Sample App./Tutorial [ 10003, 10001 ]
        Assignee Priority P1 [ 10010 ]
        Hide
        Arturo Zambrano added a comment - - edited

        It seems like the server would have to know the size of the user agent viewport in order to render the prioritized columns or the stacked columns. The ClientDescriptor class doesn't currently provide this information; it only tells whether it's a mobile (handheld) device, a tablet or desktop. One option would be to assume default viewport sizes for the different device categories or investigating the possibility of including the viewport dimensions in the ClientDescriptor class.

        Show
        Arturo Zambrano added a comment - - edited It seems like the server would have to know the size of the user agent viewport in order to render the prioritized columns or the stacked columns. The ClientDescriptor class doesn't currently provide this information; it only tells whether it's a mobile (handheld) device, a tablet or desktop. One option would be to assume default viewport sizes for the different device categories or investigating the possibility of including the viewport dimensions in the ClientDescriptor class.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #46136 Tue Oct 27 11:37:48 MDT 2015 art.zambrano ICE-10800 added support for responsive column display, via the 'displayPriority' attribute in ace:column
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRowRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ProxiedBodyColumn.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ColumnMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableFootRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/datatable/datatable.css
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableHeadRenderer.java
        Hide
        Arturo Zambrano added a comment - - edited

        r46136: added support for responsive column display, via the 'displayPriority' attribute in ace:column.

        This improvement is based on jQuery Mobile's Column Priorities, with some added tweaks to adjust to ace:dataTable, like removing the "width:100%;" styling when the viewport width matches the width for priority 6.

        Some guidelines had to be established to make use of this feature in conjunction with other ace:dataTable features.

        In the case of column stacking, the top ace:column in a stack dictates the display priority level for that column in the client side.

        In the case of multi-row headers, parent columns need to have their own display priority specified, which should match that of the child with the highest priority, otherwise the parent column won't be hidden when all its children are hidden. I tried to do this automatically, but given the way the multi-row headers are processed and iterated over, it's very complicated to access the parent column to modify its priority.

        Show
        Arturo Zambrano added a comment - - edited r46136: added support for responsive column display, via the 'displayPriority' attribute in ace:column. This improvement is based on jQuery Mobile's Column Priorities, with some added tweaks to adjust to ace:dataTable, like removing the "width:100%;" styling when the viewport width matches the width for priority 6. Some guidelines had to be established to make use of this feature in conjunction with other ace:dataTable features. In the case of column stacking, the top ace:column in a stack dictates the display priority level for that column in the client side. In the case of multi-row headers, parent columns need to have their own display priority specified, which should match that of the child with the highest priority, otherwise the parent column won't be hidden when all its children are hidden. I tried to do this automatically, but given the way the multi-row headers are processed and iterated over, it's very complicated to access the parent column to modify its priority.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r46143. Test apps ICE-10800-1.jsf, ICE-10800-2.jsf added to:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable.
        Tested with Chrome 46, FF 34, IE 11,10, 9, iphone 4s, ipad ios8, acer 10 inch tablet and android 6.0 on google nexus 5 phone.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r46143. Test apps ICE-10800 -1.jsf, ICE-10800 -2.jsf added to: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/dataTable . Tested with Chrome 46, FF 34, IE 11,10, 9, iphone 4s, ipad ios8, acer 10 inch tablet and android 6.0 on google nexus 5 phone.
        Hide
        Ken Fyten added a comment -

        Re-opened as the current implementation seems to not be considering the impact on readability that various screen DPIs can have. For example, a 21" 1080p screen is fine to show all cols, but the same 1080p resolution on a 5" phone screen would only want to show P1 or P2 max cols for legibility.

        Show
        Ken Fyten added a comment - Re-opened as the current implementation seems to not be considering the impact on readability that various screen DPIs can have. For example, a 21" 1080p screen is fine to show all cols, but the same 1080p resolution on a 5" phone screen would only want to show P1 or P2 max cols for legibility.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Ken Fyten added a comment - - edited

        Note that support for:

        2. Automatic column-stacking. Columns are automatically stacked with their immediate neighbours as deep as required to fit them all in the available dataTable width. This could leverage the existing column-stacking support, but basically defines the stacks automatically based on the column and dataTable widths.

        ...has been moved to ICE-10832.

        Show
        Ken Fyten added a comment - - edited Note that support for: 2. Automatic column-stacking. Columns are automatically stacked with their immediate neighbours as deep as required to fit them all in the available dataTable width. This could leverage the existing column-stacking support, but basically defines the stacks automatically based on the column and dataTable widths. ...has been moved to ICE-10832 .
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #46158 Fri Oct 30 16:09:36 MDT 2015 art.zambrano ICE-10800 removed previous fix to remove width:100% from the table, which won't be necessary once the appropriate viewport meta tag is included on the page
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/datatable/datatable.css
        Hide
        Arturo Zambrano added a comment -

        r46158: removed previous fix to remove width:100% from the table, which won't be necessary once the appropriate viewport meta tag is included on the page

        Show
        Arturo Zambrano added a comment - r46158: removed previous fix to remove width:100% from the table, which won't be necessary once the appropriate viewport meta tag is included on the page
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #46163 Mon Nov 02 14:45:37 MST 2015 art.zambrano ICE-10800 added note to TLD documentation about the need to use mobi:deviceResource for the responsive column display feature to work correctly on mobile devices
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/column/ColumnMeta.java
        Hide
        Arturo Zambrano added a comment -

        r46163: added note to TLD documentation about the need to use mobi:deviceResource for the responsive column display feature to work correctly on mobile devices.

        Show
        Arturo Zambrano added a comment - r46163: added note to TLD documentation about the need to use mobi:deviceResource for the responsive column display feature to work correctly on mobile devices.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Liana Munroe added a comment -

        Verified ICEfaces 4 trunk r46163 using iphone 5, ipad ios 8, android 6 phone, Chrome 45, FF 34, IE 11, 10.

        Show
        Liana Munroe added a comment - Verified ICEfaces 4 trunk r46163 using iphone 5, ipad ios 8, android 6 phone, Chrome 45, FF 34, IE 11, 10.
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: