Angular Kendo Custom DataBindingDirective Not Updating Grid after NotifyDataChange

I have written a custom Kendo Grid databinding directive that allows me to pass in a service method to be called by rebind(). Effectively, the component using the Kendo grid is responsible for passing the method to the directive:

<kendo-grid
[customDataBinding]="myData"
[queryFn]="requeryGrid()">


Inside the component, the requeryGrid() function looks like this:

requeryGrid(): QueryFn {
// have to bind reportService because reportService depends on a separate data service
return this.rportService.cmmcLevel2SelfSearch.bind(this.reportService);
}


The directive rebind() method itself is defined as:

override rebind(): void {

//this.grid.loading = true;
this.queryFn(this.state)
.pipe(
take(1),
map((queryResult) => {
const total : number = queryResult ? queryResult.length : 0;
const result: GridDataResult = {
data: queryResult,
total: total
};
return result;
}),
tap((queryResult) => {
this.grid.data = queryResult;
//this.grid.loading = false;
this.notifyDataChange();
}),
catchError((error) => {
//this.grid.loading = false;
return throwError(() => error);
})
)
.subscribe();
}


According to the Chrome developer console, the queryFn is executed against the backend API, and returns the results I want. Unfortunately, even when setting the grid data and calling notifyDataChange() the grid does not update.

I assume this is something simple I'm overlooking. Can anyone see this issue?

Continue reading...