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

Re: [ydn-javascript] DataTable - Hiding a row scrambles layout in 2.5.2 (also 2.5.0 but not 2.5.1)

Expand Messages
  • 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 1 of 4 , Jul 1, 2008
      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 2 of 4 , Jul 2, 2008
        --- 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 3 of 4 , Jul 11, 2008
          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.