YUI DataTable: Context Menu with “Select/Unselect All” rows

Jeffrey Cobb — Thu, 05 Nov 2009 12:26:06 +0000

Andy from Coderfoo.com created this excellent example and code sniplet to demo a function he created that uses a context menu to select and deselect all rows from a YUI datatable. At first I simply thought he was just accessing a regular function within YUI but he soon corrected me. He explained that while YUI has a deselect function for all rows a select all function did not exist. So knowing Andy he took on the challenge of creating this function. Thanks again Andy for sharing your code with us.
Working Example on CoderFoo.com http://www.coderfoo.com/examples/datatable-multi-row-select.html

Get the code

YAHOO.lang.augmentObject(
  YAHOO.widget.DataTable.prototype, {
    _selectAllTrEls : function() {
      var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_EVEN, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsEven , YAHOO.widget.DataTable.CLASS_SELECTED);
      var selectedRowsOdd = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_ODD, "tr",this._elTbody);
      YAHOO.util.Dom.addClass( selectedRowsOdd, YAHOO.widget.DataTable.CLASS_SELECTED);
    },
  /* Selects all rows. * * @method selectAllRows */
  selectAllRows : function() {
    // Remove all rows from tracker
    var tracker = this._aSelections || [];
    for(var j=tracker.length- 1; j>-1; j--) {
      if(YAHOO.lang.isString( tracker[j] )){
        tracker.splice( j,1);
      }
    }
    // Update tracker
    this._aSelections = tracker;
    // Update UI
    this._selectAllTrEls();
    // Get all highlighted rows and make yahoo aware they are selected
    var selectedRowsEven = YAHOO.util.Dom.getElementsByClassName(YAHOO.widget.DataTable.CLASS_SELECTED, "tr",this._elTbody);
    for (i=0;i
<selectedRowsEven.length; i++){
      this.selectRow(i);
    }
  }
});

Adding up column data in the YUI Datatable

Jeffrey Cobb — Sun, 08 Mar 2009 15:45:59 +0000

At times it becomes necessary to add up the data with in a column. Here is a nice little snippet that can do just that.
Change DATATABLE with the name of the data table you need to read.
Change COLUMNNAME with the column key in the table you need to read.

// First get the record set from the datatable.
var records = DATATABLE.getRecordSet();

// Let's count how many records we found
var len = records._records.length-1;
var total = 0;
// Loop through the record set getting the data from the coulumn and setting its value to "value"

for(i=0;i<=len;i++){
 //create the value you need so you can handle the data
var value = records._records[i]._oData.COLUMNNAME;
// now all you need to do is add up your values
total+=value;
}
//log it to the FireBug console
console.log(total);

Once you have found the value for the column from that point you can manipulate the data to your will.

YUI Coder » YUI Datatable

YUI DataTable: Context Menu with “Select/Unselect All” rows

Get the code

Adding up column data in the YUI Datatable