Is Kendo UI compatible with Angular's strict mode?

2 Answers 539 Views
Grid
Alessandro
Top achievements
Rank 1
Iron
Alessandro asked on 28 May 2021, 12:10 PM

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
Top achievements
Rank 1
commented on 27 Jan 2022, 09:29 AM

I have the following problem
Martin Bechev
Telerik team
commented on 28 Jan 2022, 03:29 PM

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

2 Answers, 1 is accepted

Sort by
0
Alessandro
Top achievements
Rank 1
Iron
answered on 01 Jun 2021, 08:03 AM
5 days, no answer... great support, indeed...
0
Svet
Telerik team
answered on 02 Jun 2021, 07:43 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Alessandro
Top achievements
Rank 1
Iron
Answers by
Alessandro
Top achievements
Rank 1
Iron
Svet
Telerik team
Share this question
or