From 53e6c73d505586bfbfec095af4c073b0201d8c01 Mon Sep 17 00:00:00 2001 From: DevExpressExampleBot Date: Mon, 16 Jun 2025 16:02:38 +0400 Subject: [PATCH 1/3] README auto update [skip ci] --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index 666c1d4..5b42d08 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,4 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/987706933/24.2.6%2B) [![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1292610) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) From 445e135405975d86fe153cdacefe6f71973c3495 Mon Sep 17 00:00:00 2001 From: Vladimir Lapin Date: Wed, 18 Jun 2025 05:56:47 +0400 Subject: [PATCH 2/3] Updated Readme --- README.md | 93 ++++++++++-------- config.json | 2 +- .../grid-edit-expandoobject.gif | Bin 3 files changed, 55 insertions(+), 40 deletions(-) rename grid-edit-expandoobject.gif => images/grid-edit-expandoobject.gif (100%) diff --git a/README.md b/README.md index 666c1d4..ce6d60a 100644 --- a/README.md +++ b/README.md @@ -4,40 +4,28 @@ [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# Blazor Grid - Binding to an ExpandoObject Collection with Editing Support +# Editable Blazor Grid with ExpandoObject Collection -The DevExpress [Blazor Grid](https://docs.devexpress.com/Blazor/403143/components/grid) allows you to bind it to a collection of `ExpandoObject` with full editing capabilities, including row creation, editing, and deletion. +The [DevExpress Blazor Grid's](https://docs.devexpress.com/Blazor/403143/components/grid) ability to create, modify, and delete rows extends to dynamic data sources. When bound to a collection of [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject) instances, the grid can adapt to user-defined schemas from sources like JSON files or NoSQL databases. It allows you to implement CRUD (Create, Read, Update, Delete) operations when your data structure is not defined at compile time. -![Edit ExpandoObject data in a DxGrid](grid-edit-expandoobject.gif) +This example implements a fully editable `DxGrid` bound to a dynamic `ExpandoObject` list, with support for adding, updating, and removing rows. -## Key Features - -- Dynamic data binding using `ExpandoObject` -- Full editing support: - - Inline editing with custom templates for `DateOnly`, `int`, `string` and other built-in types. - - New row creation via the `CustomizeEditModel` event. - - Row update and delete operations with `EditModelSaving` and `DataItemDeleting` events. +![Edit ExpandoObject Data in DxGrid](images/grid-edit-expandoobject.gif) ## Implementation Details -### 1. Display the data in a DxGrid -The DxGrid is bound to an ExpandoObject Collection. Each column includes a custom [CellEditTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridCommandColumn.CellEditTemplate) with an editor bound to the ExpandoObject via `IDictionary`. -```razor - - - @{ - var editItem = (IDictionary)context.EditModel; - var date = (DateOnly)editItem["Date"]; - } - - - - +Create a collection of `ExpandoObject` that will hold your dynamic data. Populate it with initial entries. + +```cs +private List? forecasts; + +protected override async Task OnInitializedAsync() { + forecasts = await ForecastService.GetForecastAsyncExpando(DateTime.Now); +} ``` -### 2. Handle edit model customization -Create your own editing model in the [CustomizeEditModel](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeEditModel) event handler: + +Implement a custom edit model in the [CustomizeEditModel](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.CustomizeEditModel) event handler: + ```cs private void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) { if (e.IsNew) { @@ -51,13 +39,14 @@ private void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) { } ``` -### 4. Save changes -Handle the [EditModelSaving](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditModelSaving). In the event handler, retrieve data from your custom edit model to update the corresponding ExpandoObject item: -```cs +Implement the [EditModelSaving](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EditModelSaving) event handler. It will retrieve data from your custom edit model and update the corresponding `ExpandoObject` instance. + +```cs private async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) { if (e.IsNew) { forecasts.Add((ExpandoObject)e.EditModel); - } else { + } + else { dynamic editableForecast = (ExpandoObject)e.EditModel; dynamic originalForecast = forecasts .Cast() @@ -69,29 +58,55 @@ private async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) { } ``` -### 5. Delete rows -In the [DataItemDeleting](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.DataItemDeleting) event handler, remove the item from the collection. +Implement the [DataItemDeleting](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.DataItemDeleting) event handler, which will remove an item from the `ExpandoObject` collection. + ```cs private async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) { forecasts.Remove((ExpandoObject)e.DataItem); } ``` +Add [DxGrid](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid) component to the [page](CS/Expando/Components/Pages/Index.razor) and bind it to the previously created `ExpandoObject` list. Attach event handlers to the corresponding grid properties. +Add a custom [CellEditTemplate](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridCommandColumn.CellEditTemplate) to each column to bind an inline editor to the `ExpandoObject` through `IDictionary`. + +```razor + + + + + + @{ + var editItem = (IDictionary)context.EditModel; + var date = (DateOnly)editItem["Date"]; + } + + + + + ... + + +``` ## Files to Review -- [Index.razor](./CS/Expando/Components/Pages/Index.razor) -- [WeatherForecastService.cs](./CS/Expando/Services/WeatherForecastService.cs) -- [Program.cs](./CS/Expando/Program.cs) +- [Index.razor](CS/Expando/Components/Pages/Index.razor) +- [WeatherForecastService.cs](CS/Expando/Services/WeatherForecastService.cs) +- [Program.cs](CS/Expando/Program.cs) ## Documentation +- [DxGrid Class](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid) - [Bind Blazor Grid to Data](https://docs.devexpress.com/Blazor/403737/components/grid/bind-to-data) +- [Editing and Validation in Blazor Grid](https://docs.devexpress.com/Blazor/403454/components/grid/editing-and-validation) -## More Examples - -- [WPF Data Grid - Bind to Dynamic Data](https://supportcenter.devexpress.com/ticket/details/t1091075/wpf-data-grid-bind-to-dynamic-data) ## Does this example address your development requirements/objectives? diff --git a/config.json b/config.json index d660d4a..038dbef 100644 --- a/config.json +++ b/config.json @@ -1,4 +1,4 @@ { - "autoGenerateVb": true, + "autoGenerateVb": false, "runOnWeb": false } \ No newline at end of file diff --git a/grid-edit-expandoobject.gif b/images/grid-edit-expandoobject.gif similarity index 100% rename from grid-edit-expandoobject.gif rename to images/grid-edit-expandoobject.gif From 7632fe1ce221fc08d158040bea79c4b3f5e972b3 Mon Sep 17 00:00:00 2001 From: Vladimir Lapin Date: Wed, 18 Jun 2025 06:07:04 +0400 Subject: [PATCH 3/3] Updated Readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0849f34..61c367d 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ The [DevExpress Blazor Grid's](https://docs.devexpress.com/Blazor/403143/components/grid) ability to create, modify, and delete rows extends to dynamic data sources. When bound to a collection of [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject) instances, the grid can adapt to user-defined schemas from sources like JSON files or NoSQL databases. It allows you to implement CRUD (Create, Read, Update, Delete) operations when your data structure is not defined at compile time. -This example implements a fully editable `DxGrid` bound to a dynamic `ExpandoObject` list, with support for adding, updating, and removing rows. +This example implements a fully editable `DxGrid` bound to a dynamic `ExpandoObject` list. ![Edit ExpandoObject Data in DxGrid](images/grid-edit-expandoobject.gif)