Trying to disable "Actions column" when the settings are loaded dinamically

Hi experts,

I’m trying to disable the actions column in the settings object when I populate it dinamically in the component’s constructor without success. Here is the code:

getSettings(): void {
    let table_settings = {}
    this._http.options(Config.API_SERVER_URL + '/inventario/producto/', this.user_session.token).subscribe(
      (data) => {
        let campos = data.actions.POST;
        let col = {};
        for (let key of Object.keys(campos)) {
          if (campos[key].read_only == false) {
            col[key] =  { title: campos[key].label, }
          }
        }
        table_settings['columns'] = col;
        table_settings['actions'] = false;
        table_settings['attr'] = { class: 'table table-striped table-bordered' }
        this.table_settings = Object.assign({}, table_settings);
      }
    )
  }

When I set the settings statically works!

@angular/* --> 4.0.0 ng2-smart-table --> 1.2.1

[digiphaze]

Ok, I see the problem, and have a hacky fix.

Basically what is happening is TheadTitlesRowComponent.prototype.ngOnChanges is not being triggered when the settings change. This function is what checks if the showActionColumn is true or not. You can see my little debugging text… It isn’t being called again when Ng2SmartTableComponent.prototype.ngOnChanges is triggered from the ng2settings = Object.assign({}, newSettings)

If the settings object you copy into had the action column hidden when the grid got initialized, the column stays hidden. Its just the default settings are what the ThreadTitlesRow component is stuck on.

 TheadTitlesRowComponent.prototype.ngOnChanges = function() {
        console.error('YEAH, I CHANGED');
        this.isMultiSelectVisible = this.grid.isMultiSelectVisible();
        this.showActionColumnLeft = this.grid.showActionColumn('left');
        this.showActionColumnRight = this.grid.showActionColumn('right');
    };

So I just replaced this.grid.setSettings with this.initGrid() in the Ng2SmartTableComponent.prototype.ngOnChanges. This way, the grid object is replaced triggering the TheadTitlesTowComponent.prototype.ngOnChanges. (Just like the Object.assign for the settings object in your app)

Ng2SmartTableComponent.prototype.ngOnChanges = function(changes) {
        console.error('CHANGES: ' + JSON.stringify(changes));
        if (this.grid) {
            if (changes['settings']) {
                //this.grid.setSettings(this.prepareSettings());
                this.initGrid();
            }
            if (changes['source']) {
                this.source = this.prepareSource();
                this.grid.setSource(this.source);
            }
        } else {
            this.initGrid();
        }

[digiphaze]

I just ran into the same problem. Even when not changing settings, just copying the settings into a new object causes the Action column to appear with “Add New”.

this.ng2settings = Object.assign({}, this.tbl_settings);

I verified the settings hash before and after copying, the structure is correct and has the proper settings.

public tbl_settings = {
    hideHeader: false,
    hideSubHeader: false,
    pager: {
      display: true,
      perPage: 7,
    },
    actions: false,
    columns: {
      vendorname: { title: 'Vendor', filter: false },
      name:       { title: 'Name', filter: false  },
      type:       { title: 'Type',
                    filter:  {
                      type: 'list',
                      config: {
                        selectText: 'Any...',
                        list: [ { value: '', title: '' } ]
                      }
                    }
                  },
      retail:     { title: 'Retail',
                    filter: false,
                    type: 'custom',
                    renderComponent: PriceRenderComponent },
      wholesale:  { title: 'Wholesale',
                    filter: false,
                    type: 'custom',
                    renderComponent: PriceRenderComponent },
      code:       { title: 'Code', filter: false  },
      segment:    { title: 'Segment', filter: false  }
    }
  };