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

Re: [ydn-javascript] Re: Expandable DataTable unsortable?

Expand Messages
  • Satyam
    I filed a ticket for the example: http://yuilibrary.com/projects/yui2/ticket/2528595 Why don t you upload your code to GIST (or any other way to make it
    Message 1 of 10 , Nov 1, 2009
    • 0 Attachment
      I filed a ticket for the example:

      http://yuilibrary.com/projects/yui2/ticket/2528595

      Why don't you upload your code to GIST (or any other way to make it
      public) and make a reference to it from this same ticket.

      Thanks for your help

      Satyam


      Christian Tiberg escribió:
      >
      >
      > Here's the finished class, perhaps someone could update the example?
      > Then other people won't have to go through this :)
      >
      > (function(){
      > var Dom = YAHOO.util.Dom,
      > STRING_STATENAME = 'yui_dt_state',
      > CLASS_EXPANDED = 'yui-dt-expanded',
      > CLASS_COLLAPSED = 'yui-dt-collapsed',
      > CLASS_EXPANSION = 'yui-dt-expansion',
      > CLASS_LINER = 'yui-dt-liner',
      >
      > //From YUI 3
      > indexOf = function(a, val) {
      > for (var i=0; i<a.length; i=i+1) {
      > if (a[i] === val) {
      > return i;
      > }
      > }
      >
      > return -1;
      > };
      >
      > YAHOO.widget.ExpandableDataTable = function()
      > {
      > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
      > }
      >
      > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
      > YAHOO.widget.DataTable, {
      >
      > /////////////////////////////////////////////////////////////////////////////
      > //
      > // Private members
      > //
      > /////////////////////////////////////////////////////////////////////////////
      >
      > /**
      > * Gets state object for a specific record associated with the DataTable.
      > * @method _getRecordState
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @param {String} key Key to return within the state object. Default is to
      > * return all as a map
      > * @return {Object} State data object
      > * @type mixed
      > * @private
      > **/
      > _getRecordState : function( record_id, key ){
      >
      > var row_data = this.getRecord( record_id ),
      > row_state = row_data.getData( STRING_STATENAME ),
      > state_data = ( row_state && key ) ? row_state[ key ] : row_state;
      >
      > return state_data || {};
      >
      > },
      >
      > /**
      > * Sets a value to a state object with a unique id for a record which
      > * is associated with the DataTable
      > * @method _setRecordState
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @param {String} key Key to use in map
      > * @param {Mixed} value Value to assign to the key
      > * @return {Object} State data object
      > * @type mixed
      > * @private
      > **/
      > _setRecordState : function( record_id, key, value ){
      >
      > var row_data = this.getRecord( record_id ).getData(),
      > merged_data = row_data[ STRING_STATENAME ] || {};
      >
      > merged_data[ key ] = value;
      >
      > this.getRecord( record_id ).setData( STRING_STATENAME, merged_data );
      >
      > return merged_data;
      >
      > },
      >
      > /////////////////////////////////////////////////////////////////////////////
      > //
      > // Public methods
      > //
      > /////////////////////////////////////////////////////////////////////////////
      >
      > /**
      > * Over-ridden initAttributes method from DataTable
      > * @method initAttributes
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @param {String} key Key to use in map
      > * @param {Mixed} value Value to assign to the key
      > * @return {Object} State data object
      > * @type mixed
      > **/
      > initAttributes : function( oConfigs ) {
      >
      > oConfigs = oConfigs || {};
      >
      > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
      > oConfigs);
      >
      > /**
      > * @attribute rowExpansionTemplate
      > * @description Value for the rowExpansionTemplate attribute.
      > * @type {Mixed}
      > * @default ""
      > **/
      > this.setAttributeConfig("rowExpansionTemplate", {
      > value: "",
      > validator: function( template ){
      > return (
      > YAHOO.lang.isString( template ) ||
      > YAHOO.lang.isFunction( template )
      > );
      > },
      > method: this.initRowExpansion
      > });
      >
      > },
      >
      > /**
      > * Initializes row expansion on the DataTable instance
      > * @method initRowExpansion
      > * @param {Mixed} template a string template or function to be called when
      > * Row is expanded
      > * @type mixed
      > **/
      > initRowExpansion : function( template ){
      >
      > //Set subscribe restore method
      > this.subscribe( 'postRenderEvent', this.onEventRestoreRowExpansion );
      >
      > //Setup template
      > this.rowExpansionTemplate = template;
      >
      > //Set table level state
      > this.a_rowExpansions = [];
      >
      > },
      >
      > /**
      > * Toggles the expansion state of a row
      > * @method toggleRowExpansion
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @type mixed
      > **/
      > toggleRowExpansion : function( record_id ){
      >
      > var state = this._getRecordState( record_id );
      >
      > if( state && state.expanded ){
      >
      > this.collapseRow( record_id );
      >
      > } else {
      >
      > this.expandRow( record_id );
      >
      > }
      >
      > },
      >
      > /**
      > * Sets the expansion state of a row to expanded
      > * @method expandRow
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @param {Boolean} restore will restore an exisiting state for a
      > * row that has been collapsed by a non user action
      > * @return {Boolean} successful
      > * @type mixed
      > **/
      > expandRow : function( record_id, restore ){
      >
      > var state = this._getRecordState( record_id );
      >
      > if( !state.expanded || restore ){
      >
      > var row_data = this.getRecord( record_id ),
      > row = this.getRow( row_data ),
      > new_row = document.createElement('tr'),
      > column_length = this.getFirstTrEl().childNodes.length,
      > expanded_data = row_data.getData(),
      > expanded_content = null,
      > template = this.rowExpansionTemplate,
      > next_sibling = Dom.getNextSibling( row );
      >
      > //Construct expanded row body
      > new_row.className = CLASS_EXPANSION;
      > var new_column = document.createElement( 'td' );
      > new_column.colSpan = column_length;
      >
      > new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>';
      > new_row.appendChild( new_column );
      >
      > var liner_element = new_row.firstChild.firstChild;
      >
      > if( YAHOO.lang.isString( template ) ){
      >
      > liner_element.innerHTML = YAHOO.lang.substitute(
      > template,
      > expanded_data
      > );
      >
      > } else if( YAHOO.lang.isFunction( template ) ) {
      >
      > template( {
      > row_element : new_row,
      > liner_element : liner_element,
      > data : row_data,
      > state : state
      >
      > } );
      >
      > } else {
      >
      > return false;
      >
      > }
      >
      > //Insert new row
      > newRow = Dom.insertAfter( new_row, row );
      >
      > if (newRow.innerHTML.length) {
      >
      > this._setRecordState( record_id, 'expanded', true );
      >
      > if( !restore ){
      >
      > this.a_rowExpansions.push( this.getRecord( record_id ).getId() );
      >
      > }
      >
      > Dom.removeClass( row, CLASS_COLLAPSED );
      > Dom.addClass( row, CLASS_EXPANDED );
      >
      > //Fire custom event
      > this.fireEvent( "rowExpandEvent", { record_id : row_data.getId() } );
      >
      > return true;
      >
      > } else {
      >
      > return false;
      >
      > }
      >
      > }
      >
      > },
      >
      > /**
      > * Sets the expansion state of a row to collapsed
      > * @method collapseRow
      > * @param {Mixed} record_id Record / Row / or Index id
      > * @return {Boolean} successful
      > * @type mixed
      > **/
      > collapseRow : function( record_id ){
      >
      > var row_data = this.getRecord( record_id ),
      > row = Dom.get( row_data.getId() ),
      > state = row_data.getData( STRING_STATENAME );
      >
      > if( state && state.expanded ){
      >
      > var next_sibling = Dom.getNextSibling( row ),
      > hash_index = indexOf( this.a_rowExpansions, record_id );
      >
      > if( Dom.hasClass( next_sibling, CLASS_EXPANSION ) ) {
      >
      > next_sibling.parentNode.removeChild( next_sibling );
      > this.a_rowExpansions.splice( hash_index, 1 );
      > this._setRecordState( record_id, 'expanded', false );
      >
      > Dom.addClass( row, CLASS_COLLAPSED );
      > Dom.removeClass( row, CLASS_EXPANDED );
      >
      > //Fire custom event
      > this.fireEvent("rowCollapseEvent", { record_id : row_data.getId() } );
      >
      > return true;
      >
      > } else {
      >
      > return false;
      >
      > }
      >
      > }
      >
      > },
      >
      > /**
      > * Collapses all expanded rows. This should be called before any action
      > where
      > * the row expansion markup would interfear with normal DataTable
      > markup handling.
      > * This method does not remove exents attached during implementation.
      > All event
      > * handlers should be removed separately.
      > * @method collapseAllRows
      > * @type mixed
      > **/
      > collapseAllRows : function(){
      >
      > var rows = this.a_rowExpansions;
      >
      > for( var i = 0, l = rows.length; l > i; i++ ){
      >
      > //Always pass 0 since collapseRow removes item from the
      > a_rowExpansions array
      > this.collapseRow( rows[ 0 ] );
      >
      > }
      >
      > a_rowExpansions = [];
      >
      > },
      >
      > /**
      > * Restores rows which have an expanded state but no markup. This
      > * is to be called to restore row expansions after the DataTable
      > * renders or the collapseAllRows is called.
      > * @method collapseAllRows
      > * @type mixed
      > **/
      > restoreExpandedRows : function(){
      >
      > var expanded_rows = this.a_rowExpansions;
      >
      > if( !expanded_rows.length ){
      >
      > return;
      >
      > }
      >
      > if( this.a_rowExpansions.length ){
      >
      > for( var i = 0, l = expanded_rows.length; l > i; i++ ){
      >
      > this.expandRow( expanded_rows[ i ] , true );
      >
      > }
      >
      > }
      >
      > },
      >
      > /**
      > * Abstract method which restores row expansion for subscribing to the
      > * DataTable postRenderEvent.
      > * @method onEventRestoreRowExpansion
      > * @param {Object} oArgs context of a subscribed event
      > * @type mixed
      > **/
      > onEventRestoreRowExpansion : function( oArgs ){
      >
      > this.restoreExpandedRows();
      >
      > },
      >
      > /**
      > * Abstract method which toggles row expansion for subscribing to the
      > * DataTable postRenderEvent.
      > * @method onEventToggleRowExpansion
      > * @param {Object} oArgs context of a subscribed event
      > * @type mixed
      > **/
      > onEventToggleRowExpansion : function( oArgs ){
      >
      > //if( YAHOO.util.Dom.hasClass( oArgs.target,
      > 'yui-dt-expandablerow-trigger' ) ){
      >
      > this.toggleRowExpansion( oArgs.target );
      >
      > //}
      >
      > }
      >
      > }, true //This boolean is needed to override members of the original
      > object
      > );
      >
      > })();
      >
      > Best regards,
      > Christian Tiberg
      >
      >
      > 2009/11/1 Christian Tiberg <ctiberg@... <mailto:ctiberg@...>>
      >
      > Thanks a lot Satyam, that's exactly what I needed!
      >
      > Best regards,
      > Christian Tiberg
      >
      >
      > 2009/10/30 Satyam <satyam@...
      > <mailto:satyam@...>>
      >
      > So, first you declare the constructor of your new table, say:
      >
      > YAHOO.widget.ExpandableDataTable = function () {
      >
      > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
      >
      > };
      >
      > If you want to manipulate any of the arguments, name them and
      > use call
      > instead of apply providing your altered arguments. The example
      > code
      > does not do anything with the initial arguments. Then:
      >
      > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
      > YAHOO.widget.DataTable, {
      >
      > initAttributes: function (oConfigs ) {
      >
      > oConfigs = oConfigs || {};
      >
      > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
      > oConfigs);
      >
      > // add your own attributes here
      >
      > },
      >
      > // add your own methods and properties here
      >
      > // for methods, remember to call the superclass method, unless
      > you really don't want it
      >
      > });
      >
      >
      >
      >
      >
      >
      > ------------------------------------------------------------------------
      >
      >
      > No virus found in this incoming message.
      > Checked by AVG - www.avg.com
      > Version: 8.5.423 / Virus Database: 270.14.40/2471 - Release Date: 10/31/09 07:53:00
      >
      >
    • Christian Tiberg
      That s now done. Did I put the URL in the right place? Best regards, Christian Tiberg 2009/11/1 Satyam ... That s now done. Did I put
      Message 2 of 10 , Nov 3, 2009
      • 0 Attachment
        That's now done. Did I put the URL in the right place?

        Best regards,
         Christian Tiberg


        2009/11/1 Satyam <satyam@...>
         

        I filed a ticket for the example:

        http://yuilibrary.com/projects/yui2/ticket/2528595

        Why don't you upload your code to GIST (or any other way to make it
        public) and make a reference to it from this same ticket.

        Thanks for your help

        Satyam

        Christian Tiberg escribió:


        >
        >
        > Here's the finished class, perhaps someone could update the example?
        > Then other people won't have to go through this :)
        >
        > (function(){
        > var Dom = YAHOO.util.Dom,
        > STRING_STATENAME = 'yui_dt_state',
        > CLASS_EXPANDED = 'yui-dt-expanded',
        > CLASS_COLLAPSED = 'yui-dt-collapsed',
        > CLASS_EXPANSION = 'yui-dt-expansion',
        > CLASS_LINER = 'yui-dt-liner',
        >
        > //From YUI 3
        > indexOf = function(a, val) {
        > for (var i=0; i<a.length; i=i+1) {
        > if (a[i] === val) {
        > return i;
        > }
        > }
        >
        > return -1;
        > };
        >
        > YAHOO.widget.ExpandableDataTable = function()
        > {
        > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
        > }
        >
        > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
        > YAHOO.widget.DataTable, {
        >
        > /////////////////////////////////////////////////////////////////////////////
        > //
        > // Private members
        > //
        > /////////////////////////////////////////////////////////////////////////////
        >
        > /**
        > * Gets state object for a specific record associated with the DataTable.
        > * @method _getRecordState
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @param {String} key Key to return within the state object. Default is to
        > * return all as a map
        > * @return {Object} State data object
        > * @type mixed
        > * @private
        > **/
        > _getRecordState : function( record_id, key ){
        >
        > var row_data = this.getRecord( record_id ),
        > row_state = row_data.getData( STRING_STATENAME ),
        > state_data = ( row_state && key ) ? row_state[ key ] : row_state;
        >
        > return state_data || {};
        >
        > },
        >
        > /**
        > * Sets a value to a state object with a unique id for a record which
        > * is associated with the DataTable
        > * @method _setRecordState
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @param {String} key Key to use in map
        > * @param {Mixed} value Value to assign to the key
        > * @return {Object} State data object
        > * @type mixed
        > * @private
        > **/
        > _setRecordState : function( record_id, key, value ){
        >
        > var row_data = this.getRecord( record_id ).getData(),
        > merged_data = row_data[ STRING_STATENAME ] || {};
        >
        > merged_data[ key ] = value;
        >
        > this.getRecord( record_id ).setData( STRING_STATENAME, merged_data );
        >
        > return merged_data;
        >
        > },
        >
        > /////////////////////////////////////////////////////////////////////////////
        > //
        > // Public methods
        > //
        > /////////////////////////////////////////////////////////////////////////////
        >
        > /**
        > * Over-ridden initAttributes method from DataTable
        > * @method initAttributes
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @param {String} key Key to use in map
        > * @param {Mixed} value Value to assign to the key
        > * @return {Object} State data object
        > * @type mixed
        > **/
        > initAttributes : function( oConfigs ) {
        >
        > oConfigs = oConfigs || {};
        >
        > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
        > oConfigs);
        >
        > /**
        > * @attribute rowExpansionTemplate
        > * @description Value for the rowExpansionTemplate attribute.
        > * @type {Mixed}
        > * @default ""
        > **/
        > this.setAttributeConfig("rowExpansionTemplate", {
        > value: "",
        > validator: function( template ){
        > return (
        > YAHOO.lang.isString( template ) ||
        > YAHOO.lang.isFunction( template )
        > );
        > },
        > method: this.initRowExpansion
        > });
        >
        > },
        >
        > /**
        > * Initializes row expansion on the DataTable instance
        > * @method initRowExpansion
        > * @param {Mixed} template a string template or function to be called when
        > * Row is expanded
        > * @type mixed
        > **/
        > initRowExpansion : function( template ){
        >
        > //Set subscribe restore method
        > this.subscribe( 'postRenderEvent', this.onEventRestoreRowExpansion );
        >
        > //Setup template
        > this.rowExpansionTemplate = template;
        >
        > //Set table level state
        > this.a_rowExpansions = [];
        >
        > },
        >
        > /**
        > * Toggles the expansion state of a row
        > * @method toggleRowExpansion
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @type mixed
        > **/
        > toggleRowExpansion : function( record_id ){
        >
        > var state = this._getRecordState( record_id );
        >
        > if( state && state.expanded ){
        >
        > this.collapseRow( record_id );
        >
        > } else {
        >
        > this.expandRow( record_id );
        >
        > }
        >
        > },
        >
        > /**
        > * Sets the expansion state of a row to expanded
        > * @method expandRow
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @param {Boolean} restore will restore an exisiting state for a
        > * row that has been collapsed by a non user action
        > * @return {Boolean} successful
        > * @type mixed
        > **/
        > expandRow : function( record_id, restore ){
        >
        > var state = this._getRecordState( record_id );
        >
        > if( !state.expanded || restore ){
        >
        > var row_data = this.getRecord( record_id ),
        > row = this.getRow( row_data ),
        > new_row = document.createElement('tr'),
        > column_length = this.getFirstTrEl().childNodes.length,
        > expanded_data = row_data.getData(),
        > expanded_content = null,
        > template = this.rowExpansionTemplate,
        > next_sibling = Dom.getNextSibling( row );
        >
        > //Construct expanded row body
        > new_row.className = CLASS_EXPANSION;
        > var new_column = document.createElement( 'td' );
        > new_column.colSpan = column_length;
        >
        > new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>';
        > new_row.appendChild( new_column );
        >
        > var liner_element = new_row.firstChild.firstChild;
        >
        > if( YAHOO.lang.isString( template ) ){
        >
        > liner_element.innerHTML = YAHOO.lang.substitute(
        > template,
        > expanded_data
        > );
        >
        > } else if( YAHOO.lang.isFunction( template ) ) {
        >
        > template( {
        > row_element : new_row,
        > liner_element : liner_element,
        > data : row_data,
        > state : state
        >
        > } );
        >
        > } else {
        >
        > return false;
        >
        > }
        >
        > //Insert new row
        > newRow = Dom.insertAfter( new_row, row );
        >
        > if (newRow.innerHTML.length) {
        >
        > this._setRecordState( record_id, 'expanded', true );
        >
        > if( !restore ){
        >
        > this.a_rowExpansions.push( this.getRecord( record_id ).getId() );
        >
        > }
        >
        > Dom.removeClass( row, CLASS_COLLAPSED );
        > Dom.addClass( row, CLASS_EXPANDED );
        >
        > //Fire custom event
        > this.fireEvent( "rowExpandEvent", { record_id : row_data.getId() } );
        >
        > return true;
        >
        > } else {
        >
        > return false;
        >
        > }
        >
        > }
        >
        > },
        >
        > /**
        > * Sets the expansion state of a row to collapsed
        > * @method collapseRow
        > * @param {Mixed} record_id Record / Row / or Index id
        > * @return {Boolean} successful
        > * @type mixed
        > **/
        > collapseRow : function( record_id ){
        >
        > var row_data = this.getRecord( record_id ),
        > row = Dom.get( row_data.getId() ),
        > state = row_data.getData( STRING_STATENAME );
        >
        > if( state && state.expanded ){
        >
        > var next_sibling = Dom.getNextSibling( row ),
        > hash_index = indexOf( this.a_rowExpansions, record_id );
        >
        > if( Dom.hasClass( next_sibling, CLASS_EXPANSION ) ) {
        >
        > next_sibling.parentNode.removeChild( next_sibling );
        > this.a_rowExpansions.splice( hash_index, 1 );
        > this._setRecordState( record_id, 'expanded', false );
        >
        > Dom.addClass( row, CLASS_COLLAPSED );
        > Dom.removeClass( row, CLASS_EXPANDED );
        >
        > //Fire custom event
        > this.fireEvent("rowCollapseEvent", { record_id : row_data.getId() } );
        >
        > return true;
        >
        > } else {
        >
        > return false;
        >
        > }
        >
        > }
        >
        > },
        >
        > /**
        > * Collapses all expanded rows. This should be called before any action
        > where
        > * the row expansion markup would interfear with normal DataTable
        > markup handling.
        > * This method does not remove exents attached during implementation.
        > All event
        > * handlers should be removed separately.
        > * @method collapseAllRows
        > * @type mixed
        > **/
        > collapseAllRows : function(){
        >
        > var rows = this.a_rowExpansions;
        >
        > for( var i = 0, l = rows.length; l > i; i++ ){
        >
        > //Always pass 0 since collapseRow removes item from the
        > a_rowExpansions array
        > this.collapseRow( rows[ 0 ] );
        >
        > }
        >
        > a_rowExpansions = [];
        >
        > },
        >
        > /**
        > * Restores rows which have an expanded state but no markup. This
        > * is to be called to restore row expansions after the DataTable
        > * renders or the collapseAllRows is called.
        > * @method collapseAllRows
        > * @type mixed
        > **/
        > restoreExpandedRows : function(){
        >
        > var expanded_rows = this.a_rowExpansions;
        >
        > if( !expanded_rows.length ){
        >
        > return;
        >
        > }
        >
        > if( this.a_rowExpansions.length ){
        >
        > for( var i = 0, l = expanded_rows.length; l > i; i++ ){
        >
        > this.expandRow( expanded_rows[ i ] , true );
        >
        > }
        >
        > }
        >
        > },
        >
        > /**
        > * Abstract method which restores row expansion for subscribing to the
        > * DataTable postRenderEvent.
        > * @method onEventRestoreRowExpansion
        > * @param {Object} oArgs context of a subscribed event
        > * @type mixed
        > **/
        > onEventRestoreRowExpansion : function( oArgs ){
        >
        > this.restoreExpandedRows();
        >
        > },
        >
        > /**
        > * Abstract method which toggles row expansion for subscribing to the
        > * DataTable postRenderEvent.
        > * @method onEventToggleRowExpansion
        > * @param {Object} oArgs context of a subscribed event
        > * @type mixed
        > **/
        > onEventToggleRowExpansion : function( oArgs ){
        >
        > //if( YAHOO.util.Dom.hasClass( oArgs.target,
        > 'yui-dt-expandablerow-trigger' ) ){
        >
        > this.toggleRowExpansion( oArgs.target );
        >
        > //}
        >
        > }
        >
        > }, true //This boolean is needed to override members of the original
        > object
        > );
        >
        > })();
        >
        > Best regards,
        > Christian Tiberg
        >
        >
        > 2009/11/1 Christian Tiberg <ctiberg@... <mailto:ctiberg@...>>

        >
        > Thanks a lot Satyam, that's exactly what I needed!
        >
        > Best regards,
        > Christian Tiberg
        >
        >
        > 2009/10/30 Satyam <satyam@...
        > <mailto:satyam@...>>

        >
        > So, first you declare the constructor of your new table, say:
        >
        > YAHOO.widget.ExpandableDataTable = function () {
        >
        > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
        >
        > };
        >
        > If you want to manipulate any of the arguments, name them and
        > use call
        > instead of apply providing your altered arguments. The example
        > code
        > does not do anything with the initial arguments. Then:
        >
        > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
        > YAHOO.widget.DataTable, {
        >
        > initAttributes: function (oConfigs ) {
        >
        > oConfigs = oConfigs || {};
        >
        > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
        > oConfigs);
        >
        > // add your own attributes here
        >
        > },
        >
        > // add your own methods and properties here
        >
        > // for methods, remember to call the superclass method, unless
        > you really don't want it
        >
        > });
        >
        >
        >
        >
        >
        >
        > ----------------------------------------------------------
        >
        >
        > No virus found in this incoming message.
        > Checked by AVG - www.avg.com
        > Version: 8.5.423 / Virus Database: 270.14.40/2471 - Release Date: 10/31/09 07:53:00
        >
        >


      • Satyam
        Not quite, that one is meant for a test case showing the bug, if that were the case. Anyway, I added a comment with the same URL. Thanks Satyam
        Message 3 of 10 , Nov 3, 2009
        • 0 Attachment
          Not quite, that one is meant for a test case showing the bug, if that
          were the case. Anyway, I added a comment with the same URL.

          Thanks

          Satyam

          Christian Tiberg escribió:
          >
          >
          > That's now done. Did I put the URL in the right place?
          >
          > Best regards,
          > Christian Tiberg
          >
          >
          > 2009/11/1 Satyam <satyam@... <mailto:satyam@...>>
          >
          >
          >
          > I filed a ticket for the example:
          >
          > http://yuilibrary.com/projects/yui2/ticket/2528595
          >
          > Why don't you upload your code to GIST (or any other way to make it
          > public) and make a reference to it from this same ticket.
          >
          > Thanks for your help
          >
          > Satyam
          >
          > Christian Tiberg escribió:
          >
          >
          > >
          > >
          > > Here's the finished class, perhaps someone could update the
          > example?
          > > Then other people won't have to go through this :)
          > >
          > > (function(){
          > > var Dom = YAHOO.util.Dom,
          > > STRING_STATENAME = 'yui_dt_state',
          > > CLASS_EXPANDED = 'yui-dt-expanded',
          > > CLASS_COLLAPSED = 'yui-dt-collapsed',
          > > CLASS_EXPANSION = 'yui-dt-expansion',
          > > CLASS_LINER = 'yui-dt-liner',
          > >
          > > //From YUI 3
          > > indexOf = function(a, val) {
          > > for (var i=0; i<a.length; i=i+1) {
          > > if (a[i] === val) {
          > > return i;
          > > }
          > > }
          > >
          > > return -1;
          > > };
          > >
          > > YAHOO.widget.ExpandableDataTable = function()
          > > {
          > >
          > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
          > > }
          > >
          > > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
          > > YAHOO.widget.DataTable, {
          > >
          > >
          > /////////////////////////////////////////////////////////////////////////////
          > > //
          > > // Private members
          > > //
          > >
          > /////////////////////////////////////////////////////////////////////////////
          > >
          > > /**
          > > * Gets state object for a specific record associated with the
          > DataTable.
          > > * @method _getRecordState
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @param {String} key Key to return within the state object.
          > Default is to
          > > * return all as a map
          > > * @return {Object} State data object
          > > * @type mixed
          > > * @private
          > > **/
          > > _getRecordState : function( record_id, key ){
          > >
          > > var row_data = this.getRecord( record_id ),
          > > row_state = row_data.getData( STRING_STATENAME ),
          > > state_data = ( row_state && key ) ? row_state[ key ] : row_state;
          > >
          > > return state_data || {};
          > >
          > > },
          > >
          > > /**
          > > * Sets a value to a state object with a unique id for a record which
          > > * is associated with the DataTable
          > > * @method _setRecordState
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @param {String} key Key to use in map
          > > * @param {Mixed} value Value to assign to the key
          > > * @return {Object} State data object
          > > * @type mixed
          > > * @private
          > > **/
          > > _setRecordState : function( record_id, key, value ){
          > >
          > > var row_data = this.getRecord( record_id ).getData(),
          > > merged_data = row_data[ STRING_STATENAME ] || {};
          > >
          > > merged_data[ key ] = value;
          > >
          > > this.getRecord( record_id ).setData( STRING_STATENAME,
          > merged_data );
          > >
          > > return merged_data;
          > >
          > > },
          > >
          > >
          > /////////////////////////////////////////////////////////////////////////////
          > > //
          > > // Public methods
          > > //
          > >
          > /////////////////////////////////////////////////////////////////////////////
          > >
          > > /**
          > > * Over-ridden initAttributes method from DataTable
          > > * @method initAttributes
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @param {String} key Key to use in map
          > > * @param {Mixed} value Value to assign to the key
          > > * @return {Object} State data object
          > > * @type mixed
          > > **/
          > > initAttributes : function( oConfigs ) {
          > >
          > > oConfigs = oConfigs || {};
          > >
          > >
          > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
          > > oConfigs);
          > >
          > > /**
          > > * @attribute rowExpansionTemplate
          > > * @description Value for the rowExpansionTemplate attribute.
          > > * @type {Mixed}
          > > * @default ""
          > > **/
          > > this.setAttributeConfig("rowExpansionTemplate", {
          > > value: "",
          > > validator: function( template ){
          > > return (
          > > YAHOO.lang.isString( template ) ||
          > > YAHOO.lang.isFunction( template )
          > > );
          > > },
          > > method: this.initRowExpansion
          > > });
          > >
          > > },
          > >
          > > /**
          > > * Initializes row expansion on the DataTable instance
          > > * @method initRowExpansion
          > > * @param {Mixed} template a string template or function to be
          > called when
          > > * Row is expanded
          > > * @type mixed
          > > **/
          > > initRowExpansion : function( template ){
          > >
          > > //Set subscribe restore method
          > > this.subscribe( 'postRenderEvent',
          > this.onEventRestoreRowExpansion );
          > >
          > > //Setup template
          > > this.rowExpansionTemplate = template;
          > >
          > > //Set table level state
          > > this.a_rowExpansions = [];
          > >
          > > },
          > >
          > > /**
          > > * Toggles the expansion state of a row
          > > * @method toggleRowExpansion
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @type mixed
          > > **/
          > > toggleRowExpansion : function( record_id ){
          > >
          > > var state = this._getRecordState( record_id );
          > >
          > > if( state && state.expanded ){
          > >
          > > this.collapseRow( record_id );
          > >
          > > } else {
          > >
          > > this.expandRow( record_id );
          > >
          > > }
          > >
          > > },
          > >
          > > /**
          > > * Sets the expansion state of a row to expanded
          > > * @method expandRow
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @param {Boolean} restore will restore an exisiting state for a
          > > * row that has been collapsed by a non user action
          > > * @return {Boolean} successful
          > > * @type mixed
          > > **/
          > > expandRow : function( record_id, restore ){
          > >
          > > var state = this._getRecordState( record_id );
          > >
          > > if( !state.expanded || restore ){
          > >
          > > var row_data = this.getRecord( record_id ),
          > > row = this.getRow( row_data ),
          > > new_row = document.createElement('tr'),
          > > column_length = this.getFirstTrEl().childNodes.length,
          > > expanded_data = row_data.getData(),
          > > expanded_content = null,
          > > template = this.rowExpansionTemplate,
          > > next_sibling = Dom.getNextSibling( row );
          > >
          > > //Construct expanded row body
          > > new_row.className = CLASS_EXPANSION;
          > > var new_column = document.createElement( 'td' );
          > > new_column.colSpan = column_length;
          > >
          > > new_column.innerHTML = '<div class="'+ CLASS_LINER +'"></div>';
          > > new_row.appendChild( new_column );
          > >
          > > var liner_element = new_row.firstChild.firstChild;
          > >
          > > if( YAHOO.lang.isString( template ) ){
          > >
          > > liner_element.innerHTML = YAHOO.lang.substitute(
          > > template,
          > > expanded_data
          > > );
          > >
          > > } else if( YAHOO.lang.isFunction( template ) ) {
          > >
          > > template( {
          > > row_element : new_row,
          > > liner_element : liner_element,
          > > data : row_data,
          > > state : state
          > >
          > > } );
          > >
          > > } else {
          > >
          > > return false;
          > >
          > > }
          > >
          > > //Insert new row
          > > newRow = Dom.insertAfter( new_row, row );
          > >
          > > if (newRow.innerHTML.length) {
          > >
          > > this._setRecordState( record_id, 'expanded', true );
          > >
          > > if( !restore ){
          > >
          > > this.a_rowExpansions.push( this.getRecord( record_id ).getId() );
          > >
          > > }
          > >
          > > Dom.removeClass( row, CLASS_COLLAPSED );
          > > Dom.addClass( row, CLASS_EXPANDED );
          > >
          > > //Fire custom event
          > > this.fireEvent( "rowExpandEvent", { record_id : row_data.getId()
          > } );
          > >
          > > return true;
          > >
          > > } else {
          > >
          > > return false;
          > >
          > > }
          > >
          > > }
          > >
          > > },
          > >
          > > /**
          > > * Sets the expansion state of a row to collapsed
          > > * @method collapseRow
          > > * @param {Mixed} record_id Record / Row / or Index id
          > > * @return {Boolean} successful
          > > * @type mixed
          > > **/
          > > collapseRow : function( record_id ){
          > >
          > > var row_data = this.getRecord( record_id ),
          > > row = Dom.get( row_data.getId() ),
          > > state = row_data.getData( STRING_STATENAME );
          > >
          > > if( state && state.expanded ){
          > >
          > > var next_sibling = Dom.getNextSibling( row ),
          > > hash_index = indexOf( this.a_rowExpansions, record_id );
          > >
          > > if( Dom.hasClass( next_sibling, CLASS_EXPANSION ) ) {
          > >
          > > next_sibling.parentNode.removeChild( next_sibling );
          > > this.a_rowExpansions.splice( hash_index, 1 );
          > > this._setRecordState( record_id, 'expanded', false );
          > >
          > > Dom.addClass( row, CLASS_COLLAPSED );
          > > Dom.removeClass( row, CLASS_EXPANDED );
          > >
          > > //Fire custom event
          > > this.fireEvent("rowCollapseEvent", { record_id :
          > row_data.getId() } );
          > >
          > > return true;
          > >
          > > } else {
          > >
          > > return false;
          > >
          > > }
          > >
          > > }
          > >
          > > },
          > >
          > > /**
          > > * Collapses all expanded rows. This should be called before any
          > action
          > > where
          > > * the row expansion markup would interfear with normal DataTable
          > > markup handling.
          > > * This method does not remove exents attached during
          > implementation.
          > > All event
          > > * handlers should be removed separately.
          > > * @method collapseAllRows
          > > * @type mixed
          > > **/
          > > collapseAllRows : function(){
          > >
          > > var rows = this.a_rowExpansions;
          > >
          > > for( var i = 0, l = rows.length; l > i; i++ ){
          > >
          > > //Always pass 0 since collapseRow removes item from the
          > > a_rowExpansions array
          > > this.collapseRow( rows[ 0 ] );
          > >
          > > }
          > >
          > > a_rowExpansions = [];
          > >
          > > },
          > >
          > > /**
          > > * Restores rows which have an expanded state but no markup. This
          > > * is to be called to restore row expansions after the DataTable
          > > * renders or the collapseAllRows is called.
          > > * @method collapseAllRows
          > > * @type mixed
          > > **/
          > > restoreExpandedRows : function(){
          > >
          > > var expanded_rows = this.a_rowExpansions;
          > >
          > > if( !expanded_rows.length ){
          > >
          > > return;
          > >
          > > }
          > >
          > > if( this.a_rowExpansions.length ){
          > >
          > > for( var i = 0, l = expanded_rows.length; l > i; i++ ){
          > >
          > > this.expandRow( expanded_rows[ i ] , true );
          > >
          > > }
          > >
          > > }
          > >
          > > },
          > >
          > > /**
          > > * Abstract method which restores row expansion for subscribing
          > to the
          > > * DataTable postRenderEvent.
          > > * @method onEventRestoreRowExpansion
          > > * @param {Object} oArgs context of a subscribed event
          > > * @type mixed
          > > **/
          > > onEventRestoreRowExpansion : function( oArgs ){
          > >
          > > this.restoreExpandedRows();
          > >
          > > },
          > >
          > > /**
          > > * Abstract method which toggles row expansion for subscribing to the
          > > * DataTable postRenderEvent.
          > > * @method onEventToggleRowExpansion
          > > * @param {Object} oArgs context of a subscribed event
          > > * @type mixed
          > > **/
          > > onEventToggleRowExpansion : function( oArgs ){
          > >
          > > //if( YAHOO.util.Dom.hasClass( oArgs.target,
          > > 'yui-dt-expandablerow-trigger' ) ){
          > >
          > > this.toggleRowExpansion( oArgs.target );
          > >
          > > //}
          > >
          > > }
          > >
          > > }, true //This boolean is needed to override members of the
          > original
          > > object
          > > );
          > >
          > > })();
          > >
          > > Best regards,
          > > Christian Tiberg
          > >
          > >
          > > 2009/11/1 Christian Tiberg <ctiberg@...
          > <mailto:ctiberg%40gmail.com> <mailto:ctiberg@...
          > <mailto:ctiberg%40gmail.com>>>
          >
          > >
          > > Thanks a lot Satyam, that's exactly what I needed!
          > >
          > > Best regards,
          > > Christian Tiberg
          > >
          > >
          > > 2009/10/30 Satyam <satyam@...
          > <mailto:satyam%40satyam.com.ar>
          > > <mailto:satyam@... <mailto:satyam%40satyam.com.ar>>>
          >
          > >
          > > So, first you declare the constructor of your new table, say:
          > >
          > > YAHOO.widget.ExpandableDataTable = function () {
          > >
          > >
          > YAHOO.widget.ExpandableDataTable.superclass.constructor.apply(this,arguments);
          > >
          > > };
          > >
          > > If you want to manipulate any of the arguments, name them and
          > > use call
          > > instead of apply providing your altered arguments. The example
          > > code
          > > does not do anything with the initial arguments. Then:
          > >
          > > YAHOO.lang.extend(YAHOO.widget.ExpandableDataTable,
          > > YAHOO.widget.DataTable, {
          > >
          > > initAttributes: function (oConfigs ) {
          > >
          > > oConfigs = oConfigs || {};
          > >
          > >
          > YAHOO.widget.ExpandableDataTable.superclass.initAttributes.call(this,
          > > oConfigs);
          > >
          > > // add your own attributes here
          > >
          > > },
          > >
          > > // add your own methods and properties here
          > >
          > > // for methods, remember to call the superclass method, unless
          > > you really don't want it
          > >
          > > });
          > >
          > >
          > >
          > >
          > >
          > >
          > > ----------------------------------------------------------
          > >
          > >
          > > No virus found in this incoming message.
          > > Checked by AVG - www.avg.com <http://www.avg.com>
          > > Version: 8.5.423 / Virus Database: 270.14.40/2471 - Release
          > Date: 10/31/09 07:53:00
          > >
          > >
          >
          >
          >
          >
          >
          > ------------------------------------------------------------------------
          >
          >
          > No virus found in this incoming message.
          > Checked by AVG - www.avg.com
          > Version: 9.0.698 / Virus Database: 270.14.46/2477 - Release Date: 11/02/09 20:39:00
          >
          >
        Your message has been successfully submitted and would be delivered to recipients shortly.