Is Kendo UI compatible with Angular's strict mode?

[Alessandro]

Hi,

I have problems in using the Grid inside an Angular project with strict mode on.

<kendo-grid
      [data]="view | async"
      [loading]="view.loading"
      [pageSize]="state.take"
      [skip]="state.skip"
      [sort]="state.sort"

It complains that pageSize, skip and sort can't accept undefined values while the underlying State object can.

Thanks!

[Jagadish]

I have the following problem

[Martin Bechev]

Hi Jagadish,

Let me provide a bit more information regarding the article that might be followed.

The reason for the raised error is that type "Observable<GridDataResult>" does not have a "loading" property. We add the "loading" property explicitly in order to check when the grid is loading:

export abstract class NorthwindService extends BehaviorSubject<GridDataResult> {
    public loading: boolean;
...
    protected fetch(tableName: string, state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;
        this.loading = true;

        return this.http
            .get(`${this.BASE_URL}${tableName}?${queryStr}`)
            .pipe(
                map(response => (<GridDataResult>{
                    data: response['value'],
                    total: parseInt(response['@odata.count'], 10)
                })),
                tap(() => this.loading = false)
            );
    }
}

...
}

We use this approach for demonstration purposes to help us decide when to display the loading spinner. However, the developer is in control of implementing his own approach. For example, the loading spinner may depend on a boolean component's property, which will be updated, when a request was sent and when we receive a response from the server.

Such errors could also be avoided by adding the missing property to the type of the used Observable. 

Also, the developer can explore our dedicated Loader component which is typically used to indicate ongoing operations in a more user-friendly way. For more details please refer to the following article:

https://www.telerik.com/kendo-angular-ui/components/indicators/loader/

I hope this helps.

Regards,
Martin
Progress Telerik

[Alessandro]

5 days, no answer... great support, indeed...

[Svet]

Hi Alessandro,

The outlined issues should indeed be caused by the used strictTemplates mode. To add a bit more details, the State interface properties are all optional:

https://www.telerik.com/kendo-angular-ui/components/data-query/api/State/

while at the same time the Grid input properties are of specific type. For example the skip accepts only a number:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/api/GridComponent/#toc-skip

that is why TypeScript errors will be thrown when when compiling such configuration.

What could be done to avoid that is to extend the State interface in a similar way as demonstrated in this code sample and make the properties required. That will allow you to use the strictTemplates mode for the State properties.

A second option would be to disabled the strict type checking in the template as follows [skip]="gridState.skip!"

When passing an Observable to the data input property there will be a TypeScript error as well due to the data property not accepting a nullable value. But the Observable does return null before it resolves and returns its value. We have logged a public issue on this matter where we demonstrate the possible workarounds to avoid that issue until a fix is released:

https://github.com/telerik/kendo-angular/issues/3210

I hope the provided information helps. Please let me know in case any further assistance is required for this case.

Last but not least, the responses of each thread are prioritized based on the current clients support plan. The time needed to reply a ticket don't include weekends and public holidays:

https://www.telerik.com/purchase/support-plans

Regards,
Svetlin
Progress Telerik