ICEfaces
  1. ICEfaces
  2. ICE-9674

ace:dataTable > When expanding/contracting rows, the header columns misalign temporarily

    Details

    • Assignee Priority:
      P2

      Description

      When expanding/contracting rows, the header columns misalign temporarily then snap back to proper alignment. This is more visible on IE browsers.

        Issue Links

          Activity

          Arturo Zambrano created issue -
          Arturo Zambrano made changes -
          Field Original Value New Value
          Link This issue depends on ICE-9532 [ ICE-9532 ]
          Hide
          Arturo Zambrano added a comment -

          The cause of this issue is the fact that the entire table markup is updated/replaced by a newly-rendered table. The temporary misalignment and snap back is simply caused by rendering all the nodes by the browser. It only seems to happen on slow browsers like IE. If you observe carefully, when you first load the grouping and multi row header demos you can notice the same temporary misalignment in the header.

          The reasons why the entire table is updated when expanding/contracting rows could be that the row expansions don't have client ids and the corresponding <tr> elements are "inserted" in the original markup. So, a possible solution to this issue could be to always render the expanded rows with a client id, with style="display:none;", and with no content inside of them. Then, when a row is actually expanded, only such <tr> element would be updated, removing the "display:none;" and adding the content inside of it, thus avoiding a full table update.

          Show
          Arturo Zambrano added a comment - The cause of this issue is the fact that the entire table markup is updated/replaced by a newly-rendered table. The temporary misalignment and snap back is simply caused by rendering all the nodes by the browser. It only seems to happen on slow browsers like IE. If you observe carefully, when you first load the grouping and multi row header demos you can notice the same temporary misalignment in the header. The reasons why the entire table is updated when expanding/contracting rows could be that the row expansions don't have client ids and the corresponding <tr> elements are "inserted" in the original markup. So, a possible solution to this issue could be to always render the expanded rows with a client id, with style="display:none;", and with no content inside of them. Then, when a row is actually expanded, only such <tr> element would be updated, removing the "display:none;" and adding the content inside of it, thus avoiding a full table update.
          Arturo Zambrano made changes -
          Assignee Arturo Zambrano [ artzambrano ]
          Hide
          Arturo Zambrano added a comment -

          r38727:
          Added tr placeholders with client ids for row/panel expansions at the first level of the table, in order to avoid full table updates when contracting/expanding rows.

          Show
          Arturo Zambrano added a comment - r38727: Added tr placeholders with client ids for row/panel expansions at the first level of the table, in order to avoid full table updates when contracting/expanding rows.
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #38727 Tue Nov 05 14:36:43 MST 2013 art.zambrano ICE-9674 added tr placeholders with client ids for row/panel expansions at the first level of the table, in order to avoid full table updates when contracting/expanding rows
          Files Changed
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRowRenderer.java
          Ken Fyten made changes -
          Fix Version/s 4.0 [ 10770 ]
          Fix Version/s EE-3.3.0.GA_P02 [ 11371 ]
          Hide
          Arturo Zambrano added a comment -

          Committed final fix at revision 38789. Now, all the <tr> elements corresponding to all child row levels and panel expansions are going to be rendered with their client ids and initially hidden, so that when rows are expanded/contracted only <tr> elements will be updated instead of the entire table.

          Show
          Arturo Zambrano added a comment - Committed final fix at revision 38789. Now, all the <tr> elements corresponding to all child row levels and panel expansions are going to be rendered with their client ids and initially hidden, so that when rows are expanded/contracted only <tr> elements will be updated instead of the entire table.
          Arturo Zambrano made changes -
          Status Open [ 1 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Repository Revision Date User Message
          ICEsoft Public SVN Repository #38789 Thu Nov 14 12:57:27 MST 2013 art.zambrano ICE-9674 implemented full fix to only update <tr> elements, instead of the entire table, when expanding/contracting rows
          Files Changed
          Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/datatable/DataTableRowRenderer.java
          Ken Fyten made changes -
          Resolution Fixed [ 1 ]
          Status Resolved [ 5 ] Reopened [ 4 ]
          Hide
          Arturo Zambrano added a comment -

          Committed fix to 3.3 EE branch at revision 38825.

          Show
          Arturo Zambrano added a comment - Committed fix to 3.3 EE branch at revision 38825.
          Arturo Zambrano made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Liana Munroe made changes -
          Attachment Grouping.PNG [ 16597 ]
          Hide
          Liana Munroe added a comment -

          Confirmed fixed on maintenance branch, revision 38865, Chrome 30, IE 7,9,10. However in IE 8 and FF 3.6, upon launching the application, the columns are misaligned and the following error appears:
          Message: 'console' is undefined
          Line: 476
          Char: 26389
          Code: 0
          URI: http://10.18.39.102:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb
          See attached screenshot for misalignment issue.

          In FF21 the following console error appears when collapsing rows:
          [window] Error [status: malformedXML code: 200]: During update: form:carTable_exp_15 not found
          http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb
          Line 1

          Show
          Liana Munroe added a comment - Confirmed fixed on maintenance branch, revision 38865, Chrome 30, IE 7,9,10. However in IE 8 and FF 3.6, upon launching the application, the columns are misaligned and the following error appears: Message: 'console' is undefined Line: 476 Char: 26389 Code: 0 URI: http://10.18.39.102:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb See attached screenshot for misalignment issue. In FF21 the following console error appears when collapsing rows: [window] Error [status: malformedXML code: 200] : During update: form:carTable_exp_15 not found http://localhost:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb Line 1
          Hide
          Carmen Cristurean added a comment - - edited

          Re-tested showcase > Grouping with EE-3.3.0-maintenance branch rev# 39069, and no header-columns misalignments have been observed in FF25, Chrome30, IE7/8/10.

          The "malformedXML code 200" console error could not be reproduced in any browser.

          The "'console' is undefined" JS error and the columns misalignment have been reproduced only in FF3.6, but not in IE8/Document Mode IE8 standard.

          In IE8/Document Mode IE7 Standards, and also in IE10/Document Mode IE7/IE8 Standards a JS error occurred in browser console and as a popup (not an issue in IE7):
          Object doesn't support this property or method coalesced.js.jsf?ln=ice.core&dgst=zg6ihb, line 442 character 9082

          Show
          Carmen Cristurean added a comment - - edited Re-tested showcase > Grouping with EE-3.3.0-maintenance branch rev# 39069, and no header-columns misalignments have been observed in FF25, Chrome30, IE7/8/10. The "malformedXML code 200" console error could not be reproduced in any browser. The "'console' is undefined" JS error and the columns misalignment have been reproduced only in FF3.6, but not in IE8/Document Mode IE8 standard. In IE8/Document Mode IE7 Standards, and also in IE10/Document Mode IE7/IE8 Standards a JS error occurred in browser console and as a popup (not an issue in IE7): Object doesn't support this property or method coalesced.js.jsf?ln=ice.core&dgst=zg6ihb, line 442 character 9082
          Ken Fyten made changes -
          Resolution Fixed [ 1 ]
          Status Resolved [ 5 ] Reopened [ 4 ]
          Assignee Priority P2 [ 10011 ]
          Hide
          Liana Munroe added a comment -

          JS error issue is found in IE 7 and 8, and FF 3.6. DataTable/TablePanelConfigAjax throws error upon load in these browsers with Tomcat 6 or 7.

          FF:
          Error: console is not defined
          Source File: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210
          Line: 1

          IE:
          Message: 'console' is undefined
          Line: 1
          Char: 26389
          Code: 0
          URI: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210

          Show
          Liana Munroe added a comment - JS error issue is found in IE 7 and 8, and FF 3.6. DataTable/TablePanelConfigAjax throws error upon load in these browsers with Tomcat 6 or 7. FF: Error: console is not defined Source File: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210 Line: 1 IE: Message: 'console' is undefined Line: 1 Char: 26389 Code: 0 URI: http://localhost:8080/dataTable/javax.faces.resource/util/ace-datatable.js.jsf?ln=icefaces.ace&v=3_3_0_131210
          Hide
          Carmen Cristurean added a comment -

          Testing with with EE-3.3.0.GA-maintenance rev 39472 (with updated Mojarra 2.1.26 JSF), no JS errors were found in IE7, but the same JS error were reproduced in IE8/Document Mode IE8 Standards and IE8/Document Mode IE7 Standards.

          IE8/Document Mode IE8 Standards:
          Message: 'console' is undefined
          Line: 476
          Char: 26423
          Code: 0
          URI: http://10.18.39.149:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb

          IE8/Document Mode IE7 Standards:
          SCRIPT438: Object doesn't support property or method 'querySelector'
          coalesced.js.jsf, line 442 character 9341

          Show
          Carmen Cristurean added a comment - Testing with with EE-3.3.0.GA-maintenance rev 39472 (with updated Mojarra 2.1.26 JSF), no JS errors were found in IE7, but the same JS error were reproduced in IE8/Document Mode IE8 Standards and IE8/Document Mode IE7 Standards. IE8/Document Mode IE8 Standards: Message: 'console' is undefined Line: 476 Char: 26423 Code: 0 URI: http://10.18.39.149:8080/showcase/javax.faces.resource/coalesced.js.jsf?ln=ice.core&dgst=zg6ihb IE8/Document Mode IE7 Standards: SCRIPT438: Object doesn't support property or method 'querySelector' coalesced.js.jsf, line 442 character 9341
          Hide
          Carmen Cristurean added a comment -

          Re-tested with IF4 trunk rev# 39869 / EE-3.3.0-maintenance-branch rev# 39821 (IE10/FF26/Chrome32/IE8 w. DocMode IE7).
          No misalignment issue found with either revisions.
          Using IE8/Document Mode IE7, with EE-3.3.0-maintenance-branch rev# 39821, a similar JS error as from the previous comments was reproduced.

          Show
          Carmen Cristurean added a comment - Re-tested with IF4 trunk rev# 39869 / EE-3.3.0-maintenance-branch rev# 39821 (IE10/FF26/Chrome32/IE8 w. DocMode IE7). No misalignment issue found with either revisions. Using IE8/Document Mode IE7, with EE-3.3.0-maintenance-branch rev# 39821, a similar JS error as from the previous comments was reproduced.
          Hide
          Carmen Cristurean added a comment -

          Marking this as resolved, new JIRA ICE-9829 created for the JS error in IE8/doc mode IE7.

          Show
          Carmen Cristurean added a comment - Marking this as resolved, new JIRA ICE-9829 created for the JS error in IE8/doc mode IE7.
          Carmen Cristurean made changes -
          Status Reopened [ 4 ] Resolved [ 5 ]
          Resolution Fixed [ 1 ]
          Ken Fyten made changes -
          Fix Version/s 4.0 [ 11382 ]
          Ken Fyten made changes -
          Status Resolved [ 5 ] Closed [ 6 ]

            People

            • Assignee:
              Arturo Zambrano
              Reporter:
              Arturo Zambrano
            • Votes:
              0 Vote for this issue
              Watchers:
              4 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: