Completed
Last Updated: 06 Nov 2019 13:33 by ADMIN
Release 2.3.0
ben
Created on: 22 Apr 2019 13:28
Category: UI for Blazor
Type: Feature Request
7
Expose OData string from the grid Request object

Looking for feature parity with - https://www.telerik.com/kendo-react-ui/components/grid/data-operations/odata-server-operations/

ADMIN NOTE: The goal is to expose a method like args.Request.ToODataString() for the grid OnRead event, so you can pass this on to a service so it knows the grid state (page size, current page, filtering,..). The grid will still expect the total of items and the current page of data to be set in the local fields.

Our grids / drop downs / comboboxes pull 1000s of items, resulting in JSON of 20mb+ if we pull all of the elements to the client.  The OData server operations have greatly reduced what we send over the wire, and have worked amazing well in our current React application.  Would love to have the same capability for Blazor client side.  We are treating Blazor as a client side replacement for React/Redux, we do not want to run Server Side Blazor.  

 

 

8 comments
ADMIN
Marin Bratanov
Posted on: 06 Nov 2019 13:33

Hello everyone,

As of 2.3.0, an extension method is available to provide an OData v4 string. You can find examples of using it here: https://github.com/telerik/blazor-ui/tree/master/grid/odata.

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
ADMIN
Marin Bratanov
Posted on: 13 May 2019 06:43
Thank you for the information, Ben.

We have discussed this internally, and we will see if it will be possible to expose the OData string through the request. I have edited the title and opener post to clarify this for anyone else coming into this page.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
ben
Posted on: 10 May 2019 12:39

Understood the grid will be working with local data, and understood that the grid does not care how that data arrives, be it OData, JSON, etc.  

However, being able to distill down the grid 'state' to the correct OData filters provided by the react toODataString,is amazingly helpful, and greatly simplifies implementing OData for the grid.

Essentially I'm looking for a function given args.Request it generates the correct ODataString.  After I have that string I'll take care of data transport and supplying the grid with the data.  I rather not have to walk through args.Request and build up that string by hand for every grid created in the application.

Additionally, for my use cases I'm not interested in using the Telerik.DataSource package on the backend, I prefer to keep my endpoints as 'clean/native' as possible because I have other consumers for this data, i.e. mobile, desktop, non-.dot net applications, etc, that do not have / won't know how to work with Telerik.DataSource.

ADMIN
Marin Bratanov
Posted on: 10 May 2019 12:21
Hello Ben, 

The args.Request object provides information about the current grid state and applied filter/sort/page. You can use that to build queries. We are working on improving it so it can be sent over the wire to a backend that can also consume our Telerik.DataSource package so it can use the .ToDataSourceResult(request) extension method can apply the needed grid state to the full data set.

Ultimately, the grid in Blazor needs an IEnumerable collection of C# models to work with. Whether the developer will fetch them as JSON, OData or even some binary format is out of the scope of the grid component. Effectively, the grid works with local data in the current view that is provided by the developer, and provides CRUD operations through events that give you access to the model so you can pass it to your data access layer.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
ben
Posted on: 10 May 2019 11:12

This is great, however what I'm really looking for is, in react given:

import { toODataString, State } from'@progress/kendo-data-query';

export interface DashboardState {
myData: IMyDataDto[];
total: number;
tableState: State

}

And a Grid

<Grid
key="Grid"
data={this.props.myData}
filter={this.props.tableState.filter}
sort={this.props.tableState.sort}
total={this.props.total}
pageSize={this.props.tableState.take}
skip={this.props.tableState.skip}
>

Where I can call my backend api by:

const fetchResult = await FetchApi.GetOData(FunctionToGenerateUrl(toODataString(getState().myDashboard.tableState));

The real 'meat' is the toODataString that distilled down all of the current Grid state to the correct OData query filters.

ADMIN
Marin Bratanov
Posted on: 09 May 2019 15:28
Hi guys,

In the last release we introduced the OnRead event that you can use to perform the data source operations with your own code: https://docs.telerik.com/blazor-ui/components/grid/manual-operations. This means that you can now call any desired endpoint or data access layer logic to retrieve the data. You can see a runnable example in action in our demos: https://demos.telerik.com/blazor-ui/grid/manual-operations.

For our next release (planned for next week) the OnRead event will also be available in an async mode so you can really await http calls. I will also look into making a better example in the article that showcases more clearly how to use the event.


Regards,
Marin Bratanov
Progress Telerik UI for Blazor
Roberto
Posted on: 09 May 2019 15:18
In our company we are waiting for the same features, it would be great to have it as soon as posible.
ADMIN
Preslav
Posted on: 29 Apr 2019 07:49
Hi Ben,

Indeed, this is a great-to-have feature, and we will look into it.


Regards,
Preslav
Progress TelerikUI for Blazor