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

Nesting rows in datatable

Expand Messages
  • mcrxdocs
    As cool as the datatable class is, in order to make use of it, I need to be able to nest and collapse sets of related rows under each primary row (To
    Message 1 of 1 , May 2, 2007
    View Source
    • 0 Attachment
      As cool as the datatable class is, in order to make use of it, I need
      to be able to nest and collapse sets of related rows under each
      primary row (To accomplish this in less/simpler code than what it took
      when I wrote it originally
      http://www.arbys.com/nutrition/calculator.php). After trying now for a
      good half the day or more, I have it almost working, but it's not
      getting one of the values from the data for some reason.

      I'm including my code below. I first tried to specify the nesting in
      the schema during import but decided it didn't need to occur there (it
      actually should, but for today I decided not to pursue it further). In
      the code below, I decided to use the system created when the header
      was setup and basically reproduce it for each row set. This means that
      _addRow actually adds more than one row which is not right, but again,
      I'm just trying to get something to work.

      Basically I have the Dog name as the header row and the dog stats on a
      row below that. The code runs and outputs both rows properly with
      proper colspans, but the dog name isn't inserted for some reason. I
      noticed the call to formatCell passed the record object but the method
      wasn't using it, so I tried overriding that to accept the object but
      it didn't seem to help.

      Any thoughts? I'm fine trying to pursue a properly recursive
      implementation if someone can give me some guidance on doing so. Thanks.

      Application Developer, TribalDDB


      var myColumnHeaders = [
      {key:"name", text:"Dog's Name", sortable:true, children:[
      {text: ""},
      {key:"breed", text:"Dog's Breed", sortable:true},
      {key:"age", text:"Dog's Age (in Weeks)", type:"number", sortable:true}

      var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);

      YAHOO.example.puppies = [
      {name:"Ashley",breed:"German Shepherd",age:12},
      {name:"Dirty Harry",breed:"Norwich Terrier",age:5},
      {name:"Emma",breed:"Labrador Retriever",age:9},
      {name:"Oscar",breed:"Yorkshire Terrier",age:6},
      {name:"Riley",breed:"Golden Retriever",age:6},
      {name:"Washington",breed:"English Bulldog",age:8},
      {name:"Zoe",breed:"Labrador Retriever",age:3}

      var myDataSource = new YAHOO.util.DataSource(YAHOO.example.puppies);
      myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
      myDataSource.responseSchema = {
      fields: ["name","breed","age"]

      * Add a new row to table body at position i if given, or to the bottom
      * otherwise. Does not fire any events or apply any classes.
      * @method _addRow
      * @param oRecord {YAHOO.widget.Record} Record instance.
      * @param index {Number} Position at which to add row.
      * @return {String} ID of the added TR element.
      * @private
      YAHOO.widget.DataTable.prototype._addRow = function(oRecord, index) {
      var i,oColumn;


      // Is this an insert or an append?
      var insert = (!YAHOO.lang.isNumber(index) || (index < 0)) ? false
      : true;
      if(!insert || !this._elBody.rows[index]) {
      index = this._elBody.rows.length;
      insert = false;

      var oColumnSet = this._oColumnSet;
      var oRecordSet = this._oRecordSet;
      var colTree = this._oColumnSet.tree;

      // Insert
      if (insert) {

      /* removed for brievity, essentially the same code as the append code
      except I run the i loop backwards since we're using insertBefore() */

      // Append
      } else {

      for(i=0; i<colTree.length; i++) {
      var elRow =
      var recId = oRecord.yuiRecordId;
      elRow.id = this.id+"-bdrow"+index+"-"+i;
      elRow.yuiRecordId = recId;

      // Create TBODY cells
      for(var j=0; j<colTree[i].length; j++) {
      var oColumn = colTree[i][j];
      var elCell = elRow.appendChild(document.createElement("td"));
      elCell.id = this.id+"-bdrow"+index+"-cell"+j;
      elCell.headers = oColumn.id;
      elCell.columnIndex = j;
      elCell.headers = oColumnSet.headers[j];
      elCell.rowSpan = oColumn.getRowSpan();
      elCell.colSpan = oColumn.getColSpan();

      this.formatCell(elCell, oRecord);

      // need a div wrapper for safari?
      if(this.fixedWidth) {
      elCell.style.overflow = "hidden";
      //elCell.style.width = "20px";

      // Striping
      if(index%2) {
      } else {


      return elRow.id;

      YAHOO.widget.DataTable.prototype.formatCell = function(elCell, oRecord) {
      if(elCell && YAHOO.lang.isNumber(elCell.columnIndex)) {
      var index = elCell.columnIndex;
      var column = this._oColumnSet.keys[index];
      if (index === 0) {

      else if (index === this._oColumnSet.keys.length-1) {

      this.fireEvent("cellFormatEvent", {el:elCell});
    Your message has been successfully submitted and would be delivered to recipients shortly.