kendo grid odd behaviour around service instantiation

Question

I'm using a Kendo Grid in an Angular template and trying to allow a service in the component to define some css styling but having a problem.

<kendo-grid
*ngIf="canLoad()"
[data]=etc...
[rowClass] = "rowCallback"
>

public canLoad() : boolean
{
  return this.myservice !== undefined;
}

public rowCallback(context: RowClassArgs)
{
  this.myservice.doSomething();
}

I get an error "Cannot read properties of undefined (reading 'doSomething')" ... why do I get an error when the ngIf check has evaluated myservice as being instantiated? How can I get the rowCallback to wait until the service has been instantiated?

Answer 1

In the above example this.myservice.doSomething() this is not pointing to the component class object, so myservice is undefined.

To fix this you can either

1. Bind this to the method when assigning rowClass

<kendo-grid
*ngIf="canLoad()"
[data]=etc...
[rowClass] = "rowCallback.bind(this)"
>

2. Use an arrow function to define rowCallback

public rowCallback = (context: RowClassArgs) => {
  this.myservice.doSomething();
}