Delete button in a column through cell template not working

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

Currently no demo shows action buttons.

Expected behavior

Atleast one demo should show how action buttons like Edit/Delete can be added to a cell template. Reproduction of the problem

Here is my use case

I have created a Angular 2 component and encapsulated ngx-datagrid into it. I accept json data & column config from parent component.

What is currently happening is

I want to show action buttons in last column. But they don’t show up in template.

Following is my code

datagrid-component.html file (reusable component’s template)

<i class=“search-icon” (click)=‘updateFilter($event)’> </div> <div class="border-color"> <ngx-datatable class=“data-grid material” headerHeight=“45” #table [columnMode]=“‘flex’” [rows]=“rowsToDisplay” [scrollbarV]=“true” [sorts]=“defaultSort” [rowHeight]=“45”> <ngx-datatable-column name=“{{column.name}}” *ngFor=“let column of columns;” [width]=“195” [flexGrow]=“column.flexGrow”> {{ column.cellTpl }} </ngx-datatable-column> </ngx-datatable> </div>

</div> =================================================

feature-component.html(Component for a feature uses grid component)

<div class="tenant-container"> <div class="tenant-header"> <div class="col-md-12"> <label class="title-tenant">Tenants</label> <app-add-tenant-modal></app-add-tenant-modal> </div> </div> <app-data-grid [data]="tenants" [columns]="_columns" [defaultSort]="_defaultSort"></app-data-grid> </div> =================================================

feature-component.ts

import { Component, OnInit } from ‘@angular/core’; import { Response } from ‘@angular/http’;

@Component({ selector: ‘feature’, templateUrl: ‘./feature.component.html’, styleUrls: [‘./feature.component.less’] }) export class FeatureComponent implements OnInit {

_columns: any[]; _defaultSort: any;

constructor( ) { }

ngOnInit() { this._columns = [ { prop: ‘column1’, name: ‘Column 1’, flexGrow: 1, cellTpl: <ng-template let-value="value" ngx-datatable-cell-template> <span tooltip="{{value.length > 30 ? value : null}}" placement="bottom" container="body">{{value}}</span> </ng-template> }, { prop: ‘column1’, name: ‘Column 1’, flexGrow: 1, cellTpl: <ng-template let-value="value" ngx-datatable-cell-template> <button>Edit</button><button>Delete</button> </ng-template> }];

====================================================

Like mentioned above, I have _columns property which gets passed down to datagrid component. But in data grid component, cellTpl is not rendered for actions columns.

How to do this ???

Can we have a column which doesn’t map to any data/key in response from server ???

What is the motivation / use case for changing the behavior?

It’s very commonly done

Please tell us about your environment:

Windows 7, Sublime

• Table version: 0.8.x

latest

• Angular version: 2.0.x

2.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

all

• Language: [all | TypeScript X.X | ES6/7 | ES5] TypeScript

[bhushangahire]

Any luck on this?

[ThommyTheThird]

I’ll be honest: I haven’t read the whole discussion, but I’d like to drop my implementation as having custom action buttons (optionally, multiple, etc) was one of my needs as well.

I provide an array of a custom class I called DatatableButtons, which basically features an icon and an action callback. In the ngOnInit and other key moments I process these values and provide the ngx-datatable with an array of column definitions that include the “button columns”

for (let db of this.buttons) {
        let buttonColumn = {
        name: '',
        prop: db.id,
        button: db,
        cellTemplate: this.buttonTmpl
    };

    columns.push(buttonColumn);
}

In the html a buttonTmpl template is defined where the button’s icon will be rendered, and we can access the row/column/value there to extract the icon (note I put my entire custom button object in the column object, and use this in the html to extract its icon)

<ng-template #buttonTmpl let-row="row" let-value="value" let-button="column.button">
    <span class="glyphicon glyphicon-{{button.icon}}"></span>
</ng-template>

To give you an example of a button implementation:

public buttons: DatatableButton[] = [
      {
          action: this.logYourself.bind(this),
          icon: 'trash'
      }
  ];

Where the logYourself function is in the component using the datatable, and I bind it to this so that I can use the correct this in the function’s scope.