Opened 8 years ago

Closed 8 years ago

#12311 closed defect (fixed)

[regression] Problem of using a source html table for HtmlStore and DataGrid

Reported by: Eric Pasquier Owned by: Jared Jurkiewicz
Priority: high Milestone: 1.6
Component: DojoX Data Version: 1.6.0b1
Keywords: HtmlStore DataGrid Cc:
Blocked By: Blocking:

Description

Version : 1.6.0b2 (not in the list)

When using the same html table for HtmlStore? and DataGrid?, the DataGrid? is not showing data anymore.

Explanation: this problem comes from fix r23654
Before it was possible to use exactly the same html table as a source for the HtmlStore? and as a layout descriptor for a DataGrid?. Due to the deferred load, the table doesn't exist anylonger when the Datagrid request data

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>TEST HtmlStore 1.6</title>

<style type="text/css">
  @import "/dojo-release-1.6.0b2-src/dijit/themes/soria/soria.css";
  @import "/dojo-release-1.6.0b2-src/dojox/grid/resources/Grid.css";
  @import "/dojo-release-1.6.0b2-src/dojox/grid/resources/soriaGrid.css";

html, body {
  height:100%;
}
</style>

<script type="text/javascript">
    var djConfig = {"parseOnLoad":true,"isDebug":false};
</script>
<script type="text/javascript" src="/dojo-release-1.6.0b2-src/dojo/dojo.js" ></script>
<script type="text/javascript">
  dojo.require("dojo.parser");
  dojo.require("dojox.data.HtmlStore");
  dojo.require("dojox.grid.DataGrid");
</script>
</head>
<body class="soria">

  <div dojoType="dojox.data.HtmlStore" dataId="test" jsId="teststore"></div>

  <table dojoType="dojox.grid.DataGrid" store="teststore" id="test">
    <thead>
      <tr>
        <th width="200px">Item</th>
        <th width="100px">Balance</th>
      </tr>
    </thead>
    <tbody>
    <tr>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
    </tr>
    </tbody>
  </table>

</body>
</html>

The code was working in previous release. It permits to transform "existing" standard html table into a nice Dojo DataGrid? with few modifications in legacy code.

Change History (6)

comment:1 Changed 8 years ago by bill

Hmm, I'm not sure it's feasible to fix this but you could easily work around the problem by forcing the HtmlStore to load it's data on creation rather than waiting for the first fetch: 

<div dojoType="dojox.data.HtmlStore" dataId="test" jsId="teststore">
	<script type=dojo/method>
		// force load of table data on load, before DataGrid destroys the table data
		this.fetch();
	</script>
</div>

I guess HtmlStore could have a flag about when to load the data (either on creation, or on first fetch), or it could try to load the data on creation but fall back to loading it on first fetch if that fails... just not sure if it's worth it to add that code.

comment:2 Changed 8 years ago by Eric Pasquier

I already subclassed HtmlStore? to use the field attribute if it is present and also add the hability to read the complete html code when loading <td> data field (I can supply the code if you think is interesting).
Where do you suggest me to put the "this.fetch()" call : in postCreate ?

comment:3 Changed 8 years ago by Jared Jurkiewicz

Add it to the postCreate class, yes. I'll go add a flag to the store to do fetch there as well if needed so users can get old behavior if they want.

comment:4 Changed 8 years ago by Jared Jurkiewicz

Milestone: tbd → 1.6
Version: → 1.6.0b1

comment:5 Changed 8 years ago by Eric Pasquier

Thanks very much for this attention. Then, I would like to profit that you are making some changes to suggest the following enhancement.

The first one is to able the use of the field attribute (I use it because some <th> columns are empty or to avoid accented characters in field names) : 

  _getHeadings: function() {
    this._headings = [];
    if (this._rootNode.tHead) {
      dojo.forEach(this._rootNode.tHead.rows[0].cells, dojo.hitch(this, function(th) {
        var name = null;
        dojo.forEach(th.attributes, function(Pattrib){
          if (Pattrib.nodeName == "field") {
            name = Pattrib.nodeValue;
          }
        });
        
        if (!name) {
          var text = dojox.xml.parser.textContent(th); 
          name = (this.trimWhitespace?dojo.trim(text):text);
        }
  
        this._headings.push(name);
      }));
    }
    else {
      this._headings = ["name"];
    }
  },

The second one is to be able to load innerHTML of a cell instead of a simple string (I use it with a formatter to display an icon for example) : 

  getValues: function(item, attribute) {
    this._assertIsItem(item);
    var index = this._assertIsAttribute(attribute);
    if (index>-1) { // TABLE
      var text="";
      if (item.cells) {
        var child = item.cells[index];
        switch(child.nodeType){
          case 1: // ELEMENT_NODE
          case 5: // ENTITY_REFERENCE_NODE
            text = child.innerHTML;
            break;
          case 3: // TEXT_NODE
          case 2: // ATTRIBUTE_NODE
          case 4: // CDATA_SECTION_NODE
            text = child.nodeValue;
        }
      }
      else { //return Value for lists
        text = dojox.xml.parser.textContent(item);
      }
      return [this.trimWhitespace?dojo.trim(text):text];
    }
    return []; //Array
  }
});

Use it at your discretion (I signed the CLA). I hope you'll find it useful.

Eric.

comment:6 Changed 8 years ago by Jared Jurkiewicz

Resolution: → fixed
Status: new → closed

The flag addition was in revision: [23816]. The other requests cannot be done at this time as they are feature requests and dojo is in shutdown mode for final RC cut for 1.6. Possibly can be considered for 1.7.

Note: See TracTickets for help on using tickets.