NG2-Bootstrap button group dropdown menu component in column cell

[abonsignore]

Trying to add the following... a NG2-Bootstrap button group dropdown menu component in column cell but does not drop down or show the caret. Shows button only. Also tried NG-Bootstrap component. The markup works outside the table and in standard html tables. Any ideas would be greatly appreciated. Researched many tables... this one seems to be rising to the top. Excellent work and thanks.

this.configObject = { settings:[{ objectKey:'action', visible:true, sort:'disable', columnOrder:0 }], fields:[{ objectKey: 'action', name: 'Action', value: () => '', render: () => '<div class="btn-group" dropdown><button id="single-button" type="button" class="btn btn-primary" dropdownToggle><span class="caret"></span></button>' + '<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">' + '<li role="menuitem">' + '<a class="dropdown-item"><span class="fa fa-pencil-square-o"></span> Edit</a>' + '</li><li role="menuitem"><a href="javascript:void(0)" class="dropdown-item"><span class="fa fa-info-circle"></span> Details</a>' + '</li><li class="divider dropdown-divider"></li><li role="menuitem"><a href="javascript:void(0)" class="dropdown-item"><span class="fa fa-trash"></span> Delete</a>' + '</li></ul></div>' }], data: [] };

[hjalmers]

It's because the render function doesn't compile other directives and components, it should work if you use the columnComponent property however. I recommend looking at the custom columns example, should give some hints on how you could proceed:)

[abonsignore]

Thanks for the quick response. Will look into it. By the way... the "View demo" link is no longer working(coming back 404 errors), yet the link at the top of page works.

[hjalmers]

Thanks for noticing the broken link, I've fixed it now:)

[abonsignore]

Hi Robert, Based on your recommendation, I finally had an opportunity to make this work. Thought I would share the solution and close this issue.

@Component({
  template: `
    <div class="btn-group" dropdown>
    <button id="menu-button" type="button" class="btn btn-sm btn-link pl-0 pr-0" dropdownToggle>
    <span class="fa fa-edit fa-lg mr-0"></span>
    <span class="fa fa-trash fa-lg mr-0"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu-button">
    <li role="menuitem">
    <a  class="dropdown-item" href="javascript:void(0)" (click)="editRow(row)"><span class="fa fa-pencil-square-o"></span> Edit</a>
    </li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem">
    <a href="javascript:void(0)" class="dropdown-item" (click)="removeRow(row)"><span class="fa fa-trash"></span> Delete</a>
    </li></ul></div>
  `
})


export class ActionComponent extends GtCustomComponent<any>  { 
  constructor( ) { super(); } 
  editRow(row: IRow) {
        this.router.navigate(['/rows/'+ row.id+ '/edit']);
  }
  removeRow(row: IRow) {
        this.dataService.deleteRow(row.id);
  }
}

this.configObject = {
      settings:[{ 
          objectKey: 'action', visible: true, sort: 'disable', columnOrder: 0
        }],
      fields:[{
        objectKey: 'action', name: 'Action',
        value: () => '', render: () => '', //required here 
        columnComponent: {type: ActionComponent}
      }],
      data:[] //lazy loaded 
};

[hjalmers]

Great, I'll see if we can do something about the value and render function when using columnComponent, feels a bit unnecessary requiring them to be defined. Perhaps this is something we should add to the demo too...

[abonsignore]

I understand a bit unnecessary, but it works. It also provides separation from table row data. I have attached a zip of the changed files(app.module.ts and custom-column.component.ts) that are required to update the demo. I leave to you to use them or not as it requires the following dependency: npm install --save @ng-bootstrap/ng-bootstrap

I have changed the dropdown from ng2-bootstrap to ng-bootstrap.

demo_with_dropmenu_col_cell.zip

[jackjamieson]

@hjalmers agree they may not be necessary but value is needed at least for sorting purposes if the columnComponent is not something that sorts properly.