Access component scope from a function called by the dxi-column [calculateCellValue] function

The final issue is that I can not access the context of a component.ts from a function I call with [calculateCellValue]="function" and if I use .bind(this) to pass it, the DataGrids interactive functionality does not work anymore.

Final question: How can I prevent .bind(this) to avoid the functionality of the DataGrid to become infunctional, OR ensure that I do not need to do [calculateCellValue]="function.bind(this)" to pass the context of the component to the function, and in some other way pass the context using the normal [calculateCellValue]="function" method.

This is how the code looks like:

I am using DxDataGrid with DxiColumns which calls a component function:

<dxi-column dataField="exampleField" [calculateCellValue]="getExamplevalues"></dxi-column>


The getExamplevalues function, which exists in the Angular component looks like this:

getExampleValues(dataGridContext: any) {
return this.exampleItems.length;
}


exampleItems is initiated in the ngOnInit-function in the component:

public example$: Subscription;
public exampleItems: any;

constructor(private exampleService: ExampleService) { }

ngOnInit(): void {
this.example$ = this.exampleService.getAll().subscribe(items => this.exampleItems = items);
}


However, in getExamplevalues-function this.exampleItems is ALWAYS undefined, as the function only returns the context of the DxDataGrid and not the Angular component.ts context.

A solution would be to change:

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues"></dxi-column>


=>

<dxi-column dataField="exampleField" [calculateCellValue]="getExampleValues.bind(this)"></dxi-column>


And in that way you can access the component context as well, however, the interactive parts of the DataGrid is now not working anymore, example the collapse and expand functionality of the grouping. So now I am stuck. How can I solve that?

Continue reading...