Loading ...
Sorry, an error occurred while loading the content.

DataTable - Hiding a row scrambles layout in 2.5.2 (also 2.5.0 but not 2.5.1)

Expand Messages
  • Mike Sexter
    Hello friends of the DataTable, I have the need to hide a row of the table. I do this by setting the row s display = none. But in the ensuing reflow, something
    Message 1 of 4 , Jul 1, 2008
    • 0 Attachment
      Hello friends of the DataTable,

      I have the need to hide a row of the table. I do this by setting the
      row's display = none. But in the ensuing reflow, something very
      strange happens to the width of the yui-dt-col-n divs. Their width is
      set to a fixed amount. In 2.5.2 it seems to always be 10px but in
      2.5.0 it's different (works properly in 2.5.1).

      According to Firebug the width is being set from a non-existent
      stylesheet. The link to the offending line gives the name of the base
      html file and says line 0! In fact if you click on the link it will
      even show you the text of the non-existent styles.

      I'm very confused by the whole thing. I've created a very simple demo
      of the problem. The hiding of the row happens in the 'sortColumn'
      function. Below is the code. You can also go to
      http://www.mentalmodels.com/mui/tests/grid2.html . Wait for the table
      to load and then sort the row labeled 'Match Date'

      Anybody wanna take a crack at this one?

      - Mike





      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <title>Mental Models Grid 2 Demo</title>

      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"/>
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css"/>
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css"/>

      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-debug.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-debug.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js"></script>
      </head>
      <body class="yui-skin-sam">

      <div id="topDiv"></div>

      <div id="logDiv" style="width: 300px;"></div>

      <script type="text/javascript">
      var myLogReader = new YAHOO.widget.LogReader('logDiv');
      YAHOO.widget.Logger.enableBrowserConsole();

      TestGrid = function ( elContainer , aColumnDefs , oDataSource ,
      oConfigs ) {
      this.constructor.superclass.constructor.call(
      this, elContainer , aColumnDefs , oDataSource , oConfigs
      );
      };

      YAHOO.lang.extend(TestGrid, YAHOO.widget.DataTable, {
      sortColumn : function(oColumn) {
      TestGrid.superclass.sortColumn.apply(this, [oColumn]);
      YAHOO.util.Dom.setStyle(this.getId() + "-bdrow0", 'display',
      'none');
      }
      });

      var myColumnDefs = [
      { "label": "Match", "key": "match", "resizeable": false,
      "sortable": false },
      { "label": "Match Date", "key": "matchdate", "resizeable": false,
      "sortable": true, "formatter": "date" }
      ];
      var myFields = [
      "match", {key: "matchdate", parser: YAHOO.util.DataSource.parseDate}
      ]

      var myDataSource = new YAHOO.util.DataSource("php/json_proxy.php?");
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
      myDataSource.responseSchema = { resultsList : "records", fields :
      myFields };

      var myDataTable = new TestGrid('topDiv', myColumnDefs, myDataSource, {});
      </script>
      </body>
      </html>
    • Satyam
      I think I got it. The problem is method _syncColWidths. In the new structure made to support scrolling of the table body independent of the headers, the
      Message 2 of 4 , Jul 1, 2008
      • 0 Attachment
        I think I got it. The problem is method _syncColWidths. In the new
        structure made to support scrolling of the table body independent of the
        headers, the width of the columns is made equal by this method. The
        body is left to adjust naturally and then the first row, the one you are
        hiding, is checked to see what widths it reached naturally, then some
        calculations are made considering the actual width, and the widths
        configured (width and minWidth) to sync it all. Hidden rows have no
        width, and you are hiding row zero which is the very one used as a
        pattern. I bet that if you hide any other but row zero, everything will
        be far more predictable.

        BTW, avoid counting on the classNames to find the row, use instead
        getTrEl or, as in this case, getFirstTrEl. The generated classNames are
        not really part of the public interface and might change at any time.

        Satyam


        Mike Sexter wrote:
        > Hello friends of the DataTable,
        >
        > I have the need to hide a row of the table. I do this by setting the
        > row's display = none. But in the ensuing reflow, something very
        > strange happens to the width of the yui-dt-col-n divs. Their width is
        > set to a fixed amount. In 2.5.2 it seems to always be 10px but in
        > 2.5.0 it's different (works properly in 2.5.1).
        >
        > According to Firebug the width is being set from a non-existent
        > stylesheet. The link to the offending line gives the name of the base
        > html file and says line 0! In fact if you click on the link it will
        > even show you the text of the non-existent styles.
        >
        > I'm very confused by the whole thing. I've created a very simple demo
        > of the problem. The hiding of the row happens in the 'sortColumn'
        > function. Below is the code. You can also go to
        > http://www.mentalmodels.com/mui/tests/grid2.html . Wait for the table
        > to load and then sort the row labeled 'Match Date'
        >
        > Anybody wanna take a crack at this one?
        >
        > - Mike
        >
        >
        >
        >
        >
        > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd">
        > <html>
        > <title>Mental Models Grid 2 Demo</title>
        >
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"/>
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css"/>
        > <link rel="stylesheet" type="text/css"
        > href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css"/>
        >
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-debug.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js"></script>
        > </head>
        > <body class="yui-skin-sam">
        >
        > <div id="topDiv"></div>
        >
        > <div id="logDiv" style="width: 300px;"></div>
        >
        > <script type="text/javascript">
        > var myLogReader = new YAHOO.widget.LogReader('logDiv');
        > YAHOO.widget.Logger.enableBrowserConsole();
        >
        > TestGrid = function ( elContainer , aColumnDefs , oDataSource ,
        > oConfigs ) {
        > this.constructor.superclass.constructor.call(
        > this, elContainer , aColumnDefs , oDataSource , oConfigs
        > );
        > };
        >
        > YAHOO.lang.extend(TestGrid, YAHOO.widget.DataTable, {
        > sortColumn : function(oColumn) {
        > TestGrid.superclass.sortColumn.apply(this, [oColumn]);
        > YAHOO.util.Dom.setStyle(this.getId() + "-bdrow0", 'display',
        > 'none');
        > }
        > });
        >
        > var myColumnDefs = [
        > { "label": "Match", "key": "match", "resizeable": false,
        > "sortable": false },
        > { "label": "Match Date", "key": "matchdate", "resizeable": false,
        > "sortable": true, "formatter": "date" }
        > ];
        > var myFields = [
        > "match", {key: "matchdate", parser: YAHOO.util.DataSource.parseDate}
        > ]
        >
        > var myDataSource = new YAHOO.util.DataSource("php/json_proxy.php?");
        > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        > myDataSource.responseSchema = { resultsList : "records", fields :
        > myFields };
        >
        > var myDataTable = new TestGrid('topDiv', myColumnDefs, myDataSource, {});
        > </script>
        > </body>
        > </html>
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
        > ------------------------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG.
        > Version: 8.0.101 / Virus Database: 270.4.3/1528 - Release Date: 01/07/2008 7:26
        >
      • y_lsmith
        ... href= http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css / ...
        Message 3 of 4 , Jul 2, 2008
        • 0 Attachment
          --- In ydn-javascript@yahoogroups.com, "Mike Sexter"
          <ydn-javascript@...> wrote:
          >
          > Hello friends of the DataTable,
          >
          > I have the need to hide a row of the table. I do this by setting the
          > row's display = none. But in the ensuing reflow, something very
          > strange happens to the width of the yui-dt-col-n divs. Their width is
          > set to a fixed amount. In 2.5.2 it seems to always be 10px but in
          > 2.5.0 it's different (works properly in 2.5.1).
          >
          > According to Firebug the width is being set from a non-existent
          > stylesheet. The link to the offending line gives the name of the base
          > html file and says line 0! In fact if you click on the link it will
          > even show you the text of the non-existent styles.
          >
          > I'm very confused by the whole thing. I've created a very simple demo
          > of the problem. The hiding of the row happens in the 'sortColumn'
          > function. Below is the code. You can also go to
          > http://www.mentalmodels.com/mui/tests/grid2.html . Wait for the table
          > to load and then sort the row labeled 'Match Date'
          >
          > Anybody wanna take a crack at this one?
          >
          > - Mike
          >
          >
          >
          >
          >
          > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > "http://www.w3.org/TR/html4/strict.dtd">
          > <html>
          > <title>Mental Models Grid 2 Demo</title>
          >
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css"/>
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css"/>
          > <link rel="stylesheet" type="text/css"
          >
          href="http://yui.yahooapis.com/2.5.2/build/logger/assets/skins/sam/logger.css"/>
          >
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.5.2/build/yahoo/yahoo-min.js"></script>
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.5.2/build/event/event-min.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
          > <script type="text/javascript"
          > src="http://yui.yahooapis.com/2.5.2/build/dom/dom-min.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-debug.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-debug.js"></script>
          > <script type="text/javascript"
          >
          src="http://yui.yahooapis.com/2.5.2/build/logger/logger-min.js"></script>
          > </head>
          > <body class="yui-skin-sam">
          >
          > <div id="topDiv"></div>
          >
          > <div id="logDiv" style="width: 300px;"></div>
          >
          > <script type="text/javascript">
          > var myLogReader = new YAHOO.widget.LogReader('logDiv');
          > YAHOO.widget.Logger.enableBrowserConsole();
          >
          > TestGrid = function ( elContainer , aColumnDefs , oDataSource ,
          > oConfigs ) {
          > this.constructor.superclass.constructor.call(
          > this, elContainer , aColumnDefs , oDataSource , oConfigs
          > );
          > };
          >
          > YAHOO.lang.extend(TestGrid, YAHOO.widget.DataTable, {
          > sortColumn : function(oColumn) {
          > TestGrid.superclass.sortColumn.apply(this, [oColumn]);
          > YAHOO.util.Dom.setStyle(this.getId() + "-bdrow0", 'display',
          > 'none');
          > }
          > });
          >
          > var myColumnDefs = [
          > { "label": "Match", "key": "match", "resizeable": false,
          > "sortable": false },
          > { "label": "Match Date", "key": "matchdate", "resizeable": false,
          > "sortable": true, "formatter": "date" }
          > ];
          > var myFields = [
          > "match", {key: "matchdate", parser:
          YAHOO.util.DataSource.parseDate}
          > ]
          >
          > var myDataSource = new YAHOO.util.DataSource("php/json_proxy.php?");
          > myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
          > myDataSource.responseSchema = { resultsList : "records", fields :
          > myFields };
          >
          > var myDataTable = new TestGrid('topDiv', myColumnDefs, myDataSource,
          {});
          > </script>
          > </body>
          > </html>
          >

          Mike,

          Regarding the "non-existent" stylesheet, DataTable creates a
          stylesheet in js to use for managing column widths. Style rules are
          added to the sheet to assign widths via CSS rather than iterating
          through each cell in the table setting fixed or min-widths. The
          trouble with the latter is that each change to the table's live DOM
          structure will trigger a reflow, and reflowing a table is the most
          expensive rendering operation out there.

          There's actually a much more complicated story behind this, and the
          next version of DataTable will incorporate a new column width
          mechanism that will hopefully improve performance and stability even more.

          FYI,
          Luke
        • Mike Sexter
          BTW, a nice work around for this problem is to wait for the table to render fully before doing anything weird to row 0. In my particular situation I used:
          Message 4 of 4 , Jul 11, 2008
          • 0 Attachment
            BTW, a nice work around for this problem is to wait for the table to
            render fully before doing anything weird to row 0. In my particular
            situation I used:

            this.subscribe("renderEvent", function(oArgs) {
            this.selectRow(0); // my weird stuff happens when a row is selected
            });
          Your message has been successfully submitted and would be delivered to recipients shortly.