Kendo UI grid with Odata

[Musab]

Hello,

I'm planning on migrating an old AngularJS 1.5.5 (working with KendoUI) to latest angular 17.X with Kendo UI and I have some questions about Odata integration.

 

Is filtering, paging and sorting working "built-in" with odata ? I couldn't find any documentation forfiltering, for ex, with odata.

Do you have any example ?

 

Kind regards,

Musab

[Zornitsa]

Hello Musab,

I can confirm that all data operations for the Grid component are available when binding to OData as well. By extending our built-in DataBindingDirective to work with remote data as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/remote-data/#toc-using-a-remote-binding-directive

A secondary option is to handle the data operations manually, which is demonstrated in the following article:

• https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/odata-binding/ 

For your convenience, I am also linking a StackBlitz example, in which you can observe OData integration in the Grid component with filtering, paging, and sorting enabled:

• https://stackblitz.com/edit/angular-9zxncu 

Hope that the information I have shared is helpful. Let me know in case you have any additional questions on this matter.

Regards,
Zornitsa
Progress Telerik

[Musab]

Hello,

I successfully managed to reproduce the same and I adapted the fetch this way : 

    public fetch(state: State): Observable<Product[]> {

        const queryStr = `${toODataString(state)}&$count=true`;

        return this.http

            .get(`http://localhost:81/odata/test/Products?` + queryStr)

            .pipe(map((data: any) => {

                this.total = data["@odata.count"];

                return <Product[]>data.value;

            }));

    }

 

But I don't know how to bild the odata count to the grid. At the moment, I receive the right data but only one page since the total isn't binded anywhere.

Any tips ?

Kind regards,

Musab

[Musab]

Sorry,

I just saw the documentation : https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/remote-data/

But the super([]); is not working in the constructor :

export class ProductService extends BehaviorSubject<GridDataResult>  {

    constructor(private http: HttpClient) {

        super([]);

    }

Argument of type 'never[]' is not assignable to parameter of type 'GridDataResult'.
Type 'never[]' is missing the following properties from type 'GridDataResult': data, totalts(2345)

 

I'm using latest angular 17x.

 

[Musab]

I think I fixed it doing : 

        super(<GridDataResult>{});

[Zornitsa]

Hello Musab,

I am glad to hear that the suggested articles have helped you move forward with your scenario.

As for the example, it is fixed in our develop branch of the website and we do thank you for the feedback:

https://www.telerik.com/kendo-angular-ui-develop/components/grid/data-binding/remote-data/#toc-using-a-remote-binding-directive

Please inform me if you have any further inquiries.

Regards,
Zornitsa
Progress Telerik