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

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

Expand Messages
  • 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 1 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.