CODEWITHSUNDEEP
angularangular-materialangular7tabulator
blinkadj
blinkadj

Reputation: 35

Tabulator cell click: How to call a function in angular on cell click and use component elements

I am trying to use Tabulator for tables in angular 7. I am trying to call a function on cell click such that the function should open a MatDialog box and display row information. However, the problem is that when I try to access any of the Component variables (dialog: MatDialog) inside the called function, it is undefined. On debugging I found that the function is called inside the Tabulator and not in the angular component. Is there a way to call a function in the Angular and access component variables inside the function?


export class ExampleTableComponent implements OnInit {
exampleTable: Tabulator;

 constructor(private dialog: MatDialog) { }

ngOnInit() {

    this.exampleTable = new Tabulator("#ex-table-div",{
      height : 300,
      data: this.example_data,
      layout: "fitColumns",
      columns: [
        { formatter:"rownum", align:"center", width:40},
        { formatter: this.printIcon, width:40, align:"center", 
         cellClick: this.openDialog
        },
        .......
      ],
      ......
    });
}


openDialog(e, cell){

    const dialogConfig = new MatDialogConfig();

          dialogConfig.disableClose = true;
          dialogConfig.autoFocus = true;

          this.dialog.open(DetailsComponent, {      
            width: '300px',
          });

     ..........
  }
......
}

Upvotes: 2

Views: 2487

Answers (3)

KAYMALLORCA
KAYMALLORCA

Reputation: 11

With Tabulator Version 5.0.10 I did like this:

this.tabulator.on("cellClick", (e, row)=> this.setSelection(e, row))

where setSelection is inside the methods part.

Upvotes: 1

MMGuz
MMGuz

Reputation: 60

I also had that problem. Here’s how I solved it:

cellClick: (e, row)=> this.openDialog(e, row)

Upvotes: 3

Gilsdav
Gilsdav

Reputation: 1155

ES6 introduce lambda also called arrow function. The main deference is the scope of this.

  • function: scope of this = caller (Tabulator)
  • lambda: scope of this = classe where the lambda is (ExampleTableComponent)

It can be done without this ES6 syntax using cellClick: this.openDialog.bind(this) but I personally prefer lambda.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Upvotes: 2

Related Questions