Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 2c1e6f5

Browse files
author
DevExpressExampleBot
committed
README auto update [skip ci]
1 parent d5847fa commit 2c1e6f5

File tree

1 file changed

+108
-108
lines changed

1 file changed

+108
-108
lines changed

‎README.md‎

Lines changed: 108 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,111 @@
1-
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/617333248/25.1.3%2B)
3-
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1155154)
4-
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
5-
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
6-
<!-- default badges end -->
7-
# Grid for Blazor - How to bind the component to an Instant Feedback data source and enable edit operations
8-
9-
This example demonstrates how to use the [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) data access technology to bind the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/grid) component to an [Instant Feedback data source](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data#large-data-server-mode-sources). In the example, you can add, edit, and delete data rows in the Grid component. The Grid validates input data and displays error messages.
10-
11-
![Bind the Grid to an Instant Feedback Data Source](bind-to-instant-feedback-data-source.png)
12-
13-
## Overview
14-
15-
Instant Feedback data sources are designed to work with large data collections. They load data in small portions on demand in background threads and do not freeze the Grid UI. Instant Feedback data sources help you to reduce memory consumption but impose multiple limitations. Refer to the following topic for more information: [Server Mode Sources - Common Specifics and Limitations](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data#common-specifics-and-limitations).
16-
17-
### Bind the Grid to an Instant Feedback Data Source
18-
19-
Follow the steps below to use the Entity Framework Core technology to bind the Grid component to an Instant Feedback data source:
20-
21-
1. Add the following NuGet packages to your project:
22-
23-
* [EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore)
24-
* [EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools/)
25-
* [EntityFrameworkCore.Sqlite](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite/)
26-
27-
2. Create a model for your database and register the database context.
28-
3. Register a [DbContext factory](https://learn.microsoft.com/en-us/ef/core/dbcontext-configuration/#use-a-dbcontext-factory) in the `Program.cs` file.
29-
4. Add references to the model, data source, and data access technology namespaces to the page that displays the Grid component. Use the `@inject` Razor directive to inject the DbContext factory service into the component:
30-
31-
```razor
32-
@using InstantFeedback.Models;
33-
@using Microsoft.EntityFrameworkCore
34-
@using DevExpress.Data.Linq
35-
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
36-
```
37-
5. Create an instance of the [EntityInstantFeedbackSource](https://docs.devexpress.com/CoreLibraries/DevExpress.Data.Linq.EntityInstantFeedbackSource) class, specify its parameters, and bind it to the Grid's [Data](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.Data) property:
38-
39-
```razor
40-
<DxGrid Data="InstantFeedbackSource">
41-
<!-- ... -->
42-
</DxGrid>
43-
44-
@code {
45-
EntityInstantFeedbackSource InstantFeedbackSource { get; set; }
46-
NorthwindContext Northwind { get; set; }
47-
48-
protected override void OnInitialized() {
49-
Northwind = NorthwindContextFactory.CreateDbContext();
50-
InstantFeedbackSource = new EntityInstantFeedbackSource(e => {
51-
e.KeyExpression = "OrderId";
52-
e.QueryableSource = Northwind.Orders;
53-
});
54-
}
55-
}
56-
```
57-
6. Implement the [IDisposable](https://learn.microsoft.com/en-us/dotnet/api/system.idisposable?view=net-7.0) interface and dispose of the data source instance and context in the page's [Dispose](https://learn.microsoft.com/en-us/dotnet/api/system.idisposable.dispose?view=net-7.0) method:
58-
59-
```razor
60-
@implements IDisposable
61-
// ...
62-
@code {
63-
//...
64-
public void Dispose() {
65-
InstantFeedbackSource?.Dispose();
66-
Northwind?.Dispose();
67-
}
68-
}
69-
```
70-
71-
### Enable Edit Operations
72-
73-
The Grid component supports multiple [edit modes](https://docs.devexpress.com/Blazor/403454/grid/edit-data-and-validate-input#edit-modes). Follow the steps below to allow users to edit grid data in edit form mode:
74-
75-
1. Declare a [DxGridCommandColumn](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridCommandColumn) object in the Grid's [Columns](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.Columns) template. This column displays the predefined **New**, **Edit**, and **Delete** command buttons.
76-
77-
2. Use the [EditFormTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditFormTemplate) property to define edit form content.
78-
79-
3. The [EditModelSaving](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditModelSaving) event occurs after a user submits the edit form and validation is passed. Use the [EditModel](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridEditModelSavingEventArgs.EditModel) event argument to access the edit model that stores all changes. Copy the values of all edit model fields that can be changed to the corresponding fields of the [DataItem](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridEditModelSavingEventArgs.DataItem) event argument, then save changes to the bound data source. To assign all edit model field values to the data item fields simultaneously, you can call the [AutoMapper](https://github.com/AutoMapper/AutoMapper) library's `Map` method.
80-
81-
4. The [DataItemDeleting](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.DataItemDeleting) event occurs once a user confirms the delete operation in the delete confirmation dialog. In the event handler, check user input and access permissions and post changes to the data source.
82-
83-
5. If your data object has a primary key, assign it to the [KeyFieldName](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.KeyFieldName) or [KeyFieldNames](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.KeyFieldNames) property. If you do not specify these properties, the Grid uses standard [.NET value equality comparison](https://learn.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/equality-comparisons) to identify data items.
84-
85-
## Files to Review
86-
87-
- [Index.razor](./CS/Pages/Index.razor)
88-
- [Program.cs](./CS/Program.cs)
89-
- [Invoice.cs](./CS/Models/Invoice.cs)
90-
- [NorthwindContext.cs](./CS/Models/NorthwindContext.cs)
91-
92-
## Documentation
93-
94-
- [Bind to Data](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data)
95-
- [Bind Components to Data with Entity Framework Core](https://docs.devexpress.com/Blazor/403167/common-concepts/bind-data-grid-to-data-from-entity-framework-core)
96-
- [Edit Data](https://docs.devexpress.com/Blazor/403454/components/grid/edit-data)
97-
- [Validate User Input](https://docs.devexpress.com/Blazor/404443/components/grid/validation)
98-
- [Examples](https://docs.devexpress.com/Blazor/404035/grid/examples)
99-
100-
## More Examples
101-
102-
- [Bind the Grid to data with Entity Framework Core](https://github.com/DevExpress-Examples/blazor-dxgrid-bind-to-data-with-entity-framework-core)
103-
- [Disable Row Editing Depending on Row Values](https://github.com/DevExpress-Examples/blazor-dxgrid-disable-editing-for-several-rows)
104-
- [Create a Custom Record Deletion Confirmation Dialog](https://github.com/DevExpress-Examples/blazor-dxgrid-show-custom-confirmation-dialog)
105-
<!-- feedback -->
1+
<!-- default badges list -->
2+
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/617333248/25.1.4%2B)
3+
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1155154)
4+
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
5+
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
6+
<!-- default badges end -->
7+
# Grid for Blazor - How to bind the component to an Instant Feedback data source and enable edit operations
8+
9+
This example demonstrates how to use the [Entity Framework Core](https://learn.microsoft.com/en-us/ef/core/) data access technology to bind the [DevExpress Blazor Grid](https://docs.devexpress.com/Blazor/403143/grid) component to an [Instant Feedback data source](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data#large-data-server-mode-sources). In the example, you can add, edit, and delete data rows in the Grid component. The Grid validates input data and displays error messages.
10+
11+
![Bind the Grid to an Instant Feedback Data Source](bind-to-instant-feedback-data-source.png)
12+
13+
## Overview
14+
15+
Instant Feedback data sources are designed to work with large data collections. They load data in small portions on demand in background threads and do not freeze the Grid UI. Instant Feedback data sources help you to reduce memory consumption but impose multiple limitations. Refer to the following topic for more information: [Server Mode Sources - Common Specifics and Limitations](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data#common-specifics-and-limitations).
16+
17+
### Bind the Grid to an Instant Feedback Data Source
18+
19+
Follow the steps below to use the Entity Framework Core technology to bind the Grid component to an Instant Feedback data source:
20+
21+
1. Add the following NuGet packages to your project:
22+
23+
* [EntityFrameworkCore](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore)
24+
* [EntityFrameworkCore.Tools](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Tools/)
25+
* [EntityFrameworkCore.Sqlite](https://www.nuget.org/packages/Microsoft.EntityFrameworkCore.Sqlite/)
26+
27+
2. Create a model for your database and register the database context.
28+
3. Register a [DbContext factory](https://learn.microsoft.com/en-us/ef/core/dbcontext-configuration/#use-a-dbcontext-factory) in the `Program.cs` file.
29+
4. Add references to the model, data source, and data access technology namespaces to the page that displays the Grid component. Use the `@inject` Razor directive to inject the DbContext factory service into the component:
30+
31+
```razor
32+
@using InstantFeedback.Models;
33+
@using Microsoft.EntityFrameworkCore
34+
@using DevExpress.Data.Linq
35+
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
36+
```
37+
5. Create an instance of the [EntityInstantFeedbackSource](https://docs.devexpress.com/CoreLibraries/DevExpress.Data.Linq.EntityInstantFeedbackSource) class, specify its parameters, and bind it to the Grid's [Data](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.Data) property:
38+
39+
```razor
40+
<DxGrid Data="InstantFeedbackSource">
41+
<!-- ... -->
42+
</DxGrid>
43+
44+
@code {
45+
EntityInstantFeedbackSource InstantFeedbackSource { get; set; }
46+
NorthwindContext Northwind { get; set; }
47+
48+
protected override void OnInitialized() {
49+
Northwind = NorthwindContextFactory.CreateDbContext();
50+
InstantFeedbackSource = new EntityInstantFeedbackSource(e => {
51+
e.KeyExpression = "OrderId";
52+
e.QueryableSource = Northwind.Orders;
53+
});
54+
}
55+
}
56+
```
57+
6. Implement the [IDisposable](https://learn.microsoft.com/en-us/dotnet/api/system.idisposable?view=net-7.0) interface and dispose of the data source instance and context in the page's [Dispose](https://learn.microsoft.com/en-us/dotnet/api/system.idisposable.dispose?view=net-7.0) method:
58+
59+
```razor
60+
@implements IDisposable
61+
// ...
62+
@code {
63+
//...
64+
public void Dispose() {
65+
InstantFeedbackSource?.Dispose();
66+
Northwind?.Dispose();
67+
}
68+
}
69+
```
70+
71+
### Enable Edit Operations
72+
73+
The Grid component supports multiple [edit modes](https://docs.devexpress.com/Blazor/403454/grid/edit-data-and-validate-input#edit-modes). Follow the steps below to allow users to edit grid data in edit form mode:
74+
75+
1. Declare a [DxGridCommandColumn](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridCommandColumn) object in the Grid's [Columns](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.Columns) template. This column displays the predefined **New**, **Edit**, and **Delete** command buttons.
76+
77+
2. Use the [EditFormTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditFormTemplate) property to define edit form content.
78+
79+
3. The [EditModelSaving](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditModelSaving) event occurs after a user submits the edit form and validation is passed. Use the [EditModel](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridEditModelSavingEventArgs.EditModel) event argument to access the edit model that stores all changes. Copy the values of all edit model fields that can be changed to the corresponding fields of the [DataItem](https://docs.devexpress.com/Blazor/DevExpress.Blazor.GridEditModelSavingEventArgs.DataItem) event argument, then save changes to the bound data source. To assign all edit model field values to the data item fields simultaneously, you can call the [AutoMapper](https://github.com/AutoMapper/AutoMapper) library's `Map` method.
80+
81+
4. The [DataItemDeleting](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.DataItemDeleting) event occurs once a user confirms the delete operation in the delete confirmation dialog. In the event handler, check user input and access permissions and post changes to the data source.
82+
83+
5. If your data object has a primary key, assign it to the [KeyFieldName](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.KeyFieldName) or [KeyFieldNames](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.KeyFieldNames) property. If you do not specify these properties, the Grid uses standard [.NET value equality comparison](https://learn.microsoft.com/en-us/dotnet/csharp/programming-guide/statements-expressions-operators/equality-comparisons) to identify data items.
84+
85+
## Files to Review
86+
87+
- [Index.razor](./CS/Pages/Index.razor)
88+
- [Program.cs](./CS/Program.cs)
89+
- [Invoice.cs](./CS/Models/Invoice.cs)
90+
- [NorthwindContext.cs](./CS/Models/NorthwindContext.cs)
91+
92+
## Documentation
93+
94+
- [Bind to Data](https://docs.devexpress.com/Blazor/403737/grid/bind-to-data)
95+
- [Bind Components to Data with Entity Framework Core](https://docs.devexpress.com/Blazor/403167/common-concepts/bind-data-grid-to-data-from-entity-framework-core)
96+
- [Edit Data](https://docs.devexpress.com/Blazor/403454/components/grid/edit-data)
97+
- [Validate User Input](https://docs.devexpress.com/Blazor/404443/components/grid/validation)
98+
- [Examples](https://docs.devexpress.com/Blazor/404035/grid/examples)
99+
100+
## More Examples
101+
102+
- [Bind the Grid to data with Entity Framework Core](https://github.com/DevExpress-Examples/blazor-dxgrid-bind-to-data-with-entity-framework-core)
103+
- [Disable Row Editing Depending on Row Values](https://github.com/DevExpress-Examples/blazor-dxgrid-disable-editing-for-several-rows)
104+
- [Create a Custom Record Deletion Confirmation Dialog](https://github.com/DevExpress-Examples/blazor-dxgrid-show-custom-confirmation-dialog)
105+
<!-- feedback -->
106106
## Does this example address your development requirements/objectives?
107107
108-
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-dxgrid-bind-to-instant-feedback-data-source&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-dxgrid-bind-to-instant-feedback-data-source&~~~was_helpful=no)
108+
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-grid-bind-to-instant-feedback-data-source&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=blazor-grid-bind-to-instant-feedback-data-source&~~~was_helpful=no)
109109
110-
(you will be redirected to DevExpress.com to submit your response)
111-
<!-- feedback end -->
110+
(you will be redirected to DevExpress.com to submit your response)
111+
<!-- feedback end -->

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /