You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+6-14Lines changed: 6 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,21 +1,14 @@
1
1
<!-- default badges list -->
2
2
<!-- default badges end -->
3
-
# Blazor Grid - Bind to Data Using XPO
3
+
# Blazor Grid - Bind the Component to Data Using XPO
4
4
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.
6
6
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.
13
7
14
8
## Implementation Details
15
9
16
10
### Configure the Server to Access Data Using XPO
17
11
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:
19
12
20
13
1. In the [Program.cs](.\CS\DxGrid.BindToDataUsingXPO.WebAPI\Program.cs) file, register the XPO data layer and unit of work.
21
14
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
CreateanAPIcontrollerthatqueriestheXPO `UnitOfWork`, shapestheresult, andusesthe `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'sloadoptions:
54
46
@@ -77,9 +69,9 @@ public ActionResult Get(DataSourceLoadOptions loadOptions) {
77
69
}
78
70
```
79
71
80
-
### Bind the Blazor Grid to the Web API
72
+
### Bind a Blazor Grid to Data
81
73
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:
83
75
84
76
```razor
85
77
<DxGrid Data="GridDataSource">
@@ -94,7 +86,7 @@ public ActionResult Get(DataSourceLoadOptions loadOptions) {
94
86
</DxGrid>
95
87
```
96
88
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:
0 commit comments