Recently in YUI Category

This is an example of YUI DataTable that uses Context Menu options to select/unselect rows.  Also, the rowClickEvent listener has a muli-select/unselect function attached.  Follow the link below to see the example.

http://www.coderfoo.com/examples/datatable-multi-row-select.html

DataTable selectAllRows extension:

// Extend YUI DataTable which is missing a selectAllRows method
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);
    }
  }
});
// End YUI Datatable extension

YUI TreeView: Drag and Drop nodes

| 4 Comments | 1 TrackBack
I recently had a need for a YUI (Yahoo! User Interface) TreeView with Drag & Drop nodes.  Here's a little background on the project.  My web application uses YUI Menu for navigation and is driven by a single database table.  Initially I threw together a quick and dirty CGI CRUD interface to manage the menu.  But, the more I had to modify the menu with this interface the more I needed something easier to use.  So I decided to scrap the CGI interface and start over with a nice 100% Ajax interface with a YUI TreeView to represent the YUI Menu.  Adding, changing, and deleting nodes is pretty easy, but to easily change the order of the Menu items, I added YUI Drag & Drop to the TreeView.  

The example I created is essentially a merge of two YUI examples with some tweaks.  The base code I used for this example is the Default TreeView example.  For my web app, the TreeView is dynamically loaded.  Either way, drag and drop will work.  The Reordering a list example was the best fit for my needs so it is used for drag and drop.

Here is the onDragOver function with tweaks to allow for dragging a nested node over it's parent without too much quirkiness:
  onDragOver: function(e, id) {
    var srcEl = this.getEl();
    var destEl = Dom.get(id);

    // We are only concerned with menu items, we ignore the dragover
    // notifications for anything else.
    if (destEl.id.match(/^ygtv[0-9]+$/)) {
      var orig_p = srcEl.parentNode;
      var p = destEl.parentNode;
      var destIdx = destEl.id.match(/[0-9]+$/);
      var destTreeNode = oTextNodeMap['ygtvlabelel' + destIdx];

      // Ignore any parent that is expanded
      // If !expanded
      if (! destTreeNode.expanded) {
        if (this.goingUp) {
          p.insertBefore(srcEl, destEl); // insert above
          lastDestId = destEl.id;
        } 
        else {
          p.insertBefore(srcEl, destEl.nextSibling); // insert below
          lastDestId = destEl.id;
        }
      }

      DDM.refreshCache();
    }
  }
The finished example of the TreeView with Drag & Drop:

Pages

About this Archive

This page is an archive of recent entries in the YUI category.

Web is the previous category.

Find recent content on the main index or look in the archives to find all content.

Powered by Movable Type 4.261