Bug when using Column visibility in Safari

[Deleted User]

I found the following bug:

I use the buttons extension with all the built-in buttons in this order:

['copy', 'csv', 'excel', 'pdf', 'print', 'colvis']

The following happens - excel does not work on Safari, because excelHtml5 doesn't work because of WebKit bug 102914 and excelFlash does not work, because there is no Flash in iOS. If you look in here:

buildButtons: function ( buttons, container, collectionCounter )
{
  debugger
      var dt = this.s.dt;

  if ( ! container ) {
    container = this.dom.container;
    this.s.buttons = [];
    this.s.subButtons = [];
  }

  for ( var i=0, ien=buttons.length ; i<ien ; i++ ) {
    var conf = this._resolveExtends( buttons[i] );

    if ( ! conf ) {
      continue;
    }

    // If the configuration is an array, then expand the buttons at this
    // point
    if ( $.isArray( conf ) ) {
      this._buildButtons( conf, container, collectionCounter );
      continue;
    }

    var button = this._buildButton(
      conf,
      collectionCounter!==undefined ? true : false
    );

    if ( ! button ) {
      continue;
    }

    var buttonNode = button.node;
    container.append( button.inserter );

    if ( collectionCounter === undefined ) {
      this.s.buttons.push( {
        node:     buttonNode,
        conf:     conf,
        inserter: button.inserter
      } );
      this.s.subButtons.push( [] );
    }
    else {
      this.s.subButtons[ collectionCounter ].push( {
        node:     buttonNode,
        conf:     conf,
        inserter: button.inserter
      } );
    }

    if ( conf.buttons ) {
      var collectionDom = this.c.dom.collection;
      conf._collection = $('<'+collectionDom.tag+'/>')
        .addClass( collectionDom.className );

      this._buildButtons( conf.buttons, conf._collection, i );
    }

    // init call is made here, rather than buildButton as it needs to
    // have been added to the buttons / subButtons array first
    if ( conf.init ) {
      conf.init.call( dt.button( buttonNode ), dt, buttonNode, conf );
    }
  }
},

you'll see that when the loop reaches the last top-level button (in this case Column Visibility), the collectionCounter will be 5 and this will run, as the condition will be true:

        if ( $.isArray( conf ) ) {
            this._buildButtons( conf, container, collectionCounter );
            continue;
        }

However, calling _buildButtons with a collectionCounter equaling 5 will cause a bug. Going one step deeper, we will reach this:

        if ( collectionCounter === undefined ) {
            this.s.buttons.push( {
                node:     buttonNode,
                conf:     conf,
                inserter: button.inserter
            } );
            this.s.subButtons.push( [] );
        }
        else {
            this.s.subButtons[ collectionCounter ].push( {
                node:     buttonNode,
                conf:     conf,
                inserter: button.inserter
            } );
        }

However, this.s.subButtons contains only 5 elements, and not 6 (because of the Excel), so calling:

this.s.subButtons[5] (because collectionCounter is 5) will yield undefined and ultimately we will get this error in the console:

Uncaught TypeError: Cannot read property 'push' of undefined

The solution to this problem is to put excel as a last button or at least after column visability has been initialized.

Vanilla

Thx Alex! I have just crossed the same bug and thanks to your post I had a workaround within seconds.

allan

Thanks for flagging this up. I've committed the fix and it will be in the next release. The nightly will rebuild with the fix in the next few minutes.

Allan