error on filter grid sample

[vamaw]

Hi,

 

I tried to running your sample https://www.telerik.com/kendo-angular-ui/components/grid/filtering/ with Angular12 but i have following error message

Error: src/app/app.component.ts:18:10 - error TS2322: Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.

18         [pageSize]="state.take"
            ~~~~~~~~


Error: src/app/app.component.ts:19:10 - error TS2322: Type 'number | undefined' is not assignable to type 'number'.
  Type 'undefined' is not assignable to type 'number'.

19         [skip]="state.skip"
            ~~~~


Error: src/app/app.component.ts:20:10 - error TS2322: Type 'SortDescriptor[] | undefined' is not assignable to type 'SortDescriptor[]'.
  Type 'undefined' is not assignable to type 'SortDescriptor[]'.

20         [sort]="state.sort"

 

Regards

[Yanmario]

Hi Vamaw,

Thank you for the provided details.

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 a 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 compiling such configuration.

To avoid that, what could be done 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:

https://github.com/angular/angular/issues/37619#issuecomment-645552361

      [pageSize]="state.take!"
      [skip]="state.skip!"
      [sort]="state.sort!"
      [filter]="state.filter!"

The community is waiting for a possible fix in a future version of Angular: https://github.com/angular/angular/issues/37619

I hope the provided information helps.

Regards,
Yanmario Menev
Progress Telerik