Skip to content

Commit f2bf97c

Browse files
Apply suggestions from code review
Co-authored-by: Elena Khamliuk <80813840+khamlyuk@users.noreply.github.com>
1 parent d3881e6 commit f2bf97c

1 file changed

Lines changed: 6 additions & 14 deletions

File tree

README.md

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
11
<!-- default badges list -->
22
<!-- default badges end -->
3-
# Blazor Grid - Bind to Data Using XPO
3+
# Blazor Grid - Bind the Component to Data Using XPO
44

5-
This example uses **DevExpress eXpress Persistent Objects (XPO) ORM** to bind the Blazor **DxGrid** to data stored in a database: a Web API backend queries XPO persistent objects and exposes data to the Blazor application through a [GridDevExtremeDataSource\<T\>](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridDevExtremeDataSource-1).
5+
This example uses [DevExpress eXpress Persistent Objects (XPO) ORM](https://docs.devexpress.com/XPO/1998/express-persistent-objects) to bind the Blazor **DxGrid** to a database: a Web API backend retrieves XPO persistent objects and passes data to a Blazor application.
66

7-
The example covers the following implementation steps:
8-
* Configure XPO.
9-
* Implement a Web API endpoint that supports server-side data operations (paging, sorting, and filtering).
10-
* Connect DxGrid to the endpoint.
11-
12-
As a result, the grid performs data operations on demand and loads only the records required for display. This keeps the solution efficient for large datasets.
137

148
## Implementation Details
159

1610
### Configure the Server to Access Data Using XPO
1711

18-
Follow the steps below to configure [XPO](https://docs.devexpress.com/XPO/2004/express-persistent-objects) in the [WebAPI](.\CS\DxGrid.BindToDataUsingXPO.WebAPI\DxGrid.BindToDataUsingXPO.WebAPI.csproj) project:
1912

2013
1. In the [Program.cs](.\CS\DxGrid.BindToDataUsingXPO.WebAPI\Program.cs) file, register the XPO data layer and unit of work.
2114
1. Define persistent object types used in the app and a connection string:
@@ -43,12 +36,11 @@ Follow the steps below to configure [XPO](https://docs.devexpress.com/XPO/2004/e
4336
get => orderDate;
4437
set => SetPropertyValue(nameof(OrderDate), ref orderDate, value);
4538
}
46-
4739
// ...
4840
}
4941
```
5042

51-
### Expose Data Through a Web API Controller
43+
### Retrieve Data Using a Web API Controller
5244

5345
Create an API controller that queries the XPO `UnitOfWork`, shapes the result, and uses the `DevExtreme.AspNet.Data` library's [DataSourceLoader](https://devexpress.github.io/DevExtreme.AspNet.Data/net/api/DevExtreme.AspNet.Data.DataSourceLoader.html) to apply paging, sorting, and filtering based on the grid's load options:
5446

@@ -77,9 +69,9 @@ public ActionResult Get(DataSourceLoadOptions loadOptions) {
7769
}
7870
```
7971

80-
### Bind the Blazor Grid to the Web API
72+
### Bind a Blazor Grid to Data
8173

82-
1. In the Blazor client project ([DxGrid.BindToDataUsingXPO](CS\DxGrid.BindToDataUsingXPO\DxGrid.BindToDataUsingXPO.csproj)), add a **DxGrid** component with multiple [DxGridDataColumn](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridDataColumn) objects:
74+
1. In a Blazor client application ([DxGrid.BindToDataUsingXPO](CS\DxGrid.BindToDataUsingXPO\DxGrid.BindToDataUsingXPO.csproj)), add a **DxGrid** component with multiple [DxGridDataColumn](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridDataColumn) objects:
8375

8476
```razor
8577
<DxGrid Data="GridDataSource">
@@ -94,7 +86,7 @@ public ActionResult Get(DataSourceLoadOptions loadOptions) {
9486
</DxGrid>
9587
```
9688
97-
1. Create a [GridDevExtremeDataSource\<T\>](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridDevExtremeDataSource-1) instance and pass an `HttpClient` along with the controller's endpoint URI. Assign the instance to the grid's **Data** property:
89+
1. Create a [GridDevExtremeDataSource\<T\>](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridDevExtremeDataSource-1) instance and pass the `HttpClient` parameter and controller endpoint URI. Assign the instance to the Grid **Data** property:
9890
9991
```razor
10092
@code {

0 commit comments

Comments
 (0)