Skip to content

Implement a fully editable DevExpress Blazor Grid bound to a collection of ExpandoObject instances.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/blazor-editable-grid-with-expandoobject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DevExpress Blazor Grid - ExpandoObject Collection Support

The DevExpress Blazor Grid's ability to create, modify, and delete rows extends to dynamic data sources. When bound to ExpandoObject collections, our Blazor grid can use user-defined schemas from sources such as JSON files or NoSQL databases. This, in turn, allows you to introduce CRUD (Create, Read, Update, Delete) operations if your data structure is not defined at compile time.

This example illustrates how you can add a fully editable DevExpress Blazor Grid (DxGrid) bound to a dynamic ExpandoObject list in your next great Blazor app.

Edit ExpandoObject Data in DxGrid

Implementation Details

Create a ExpandoObject collection to store dynamic data. Populate it with initial entries.

private List<ExpandoObject>? forecasts;

protected override async Task OnInitializedAsync() {
    forecasts = await ForecastService.GetForecastAsyncExpando(DateTime.Now);
}

Implement a custom edit model in the CustomizeEditModel event handler:

private void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
    if (e.IsNew) {
        dynamic forecast = new ExpandoObject();
        forecast.Id = Guid.NewGuid();
        forecast.Date = DateOnly.FromDateTime(DateTime.Now.AddDays(1));
        forecast.TemperatureC = 0;
        forecast.Summary = "";
        e.EditModel = forecast;
    }
}

Use the EditModelSaving event handler to retrieve data from your custom edit model and update the corresponding ExpandoObject instance.

private async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
    if (e.IsNew) {
        forecasts.Add((ExpandoObject)e.EditModel);
    }
    else {
        dynamic editableForecast = (ExpandoObject)e.EditModel;
        dynamic originalForecast = forecasts
            .Cast<dynamic>()
            .First(s => (Guid)s.Id == (Guid)editableForecast.Id);
        originalForecast.Date = editableForecast.Date;
        originalForecast.TemperatureC = editableForecast.TemperatureC;
        originalForecast.Summary = editableForecast.Summary;
    }
}

Use the DataItemDeleting event handler to remove an item from the ExpandoObject collection.

private async Task Grid_DataItemDeleting(GridDataItemDeletingEventArgs e) {
    forecasts.Remove((ExpandoObject)e.DataItem);
}

Add our Blazor Grid (DxGrid) component to the page and bind it to the ExpandoObject list. Attach event handlers to corresponding grid properties.

Add a custom CellEditTemplate to each column to bind an inline editor to the ExpandoObject through IDictionary<string, object>.

<DxGrid Data="@forecasts"
        EditMode="GridEditMode.EditRow"
        CustomizeEditModel="Grid_CustomizeEditModel"
        EditModelSaving="Grid_EditModelSaving"
        DataItemDeleting="Grid_DataItemDeleting">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn Caption="Date" FieldName="Date">
            <CellEditTemplate>
                @{
                    var editItem = (IDictionary<string, object>)context.EditModel;
                    var date = (DateOnly)editItem["Date"];
                }
                <DxDateEdit Date="@(date)"
                            DateChanged="@((DateOnly newVal) => editItem["Date"] = newVal)"
                            DateExpression="@(() => date)">
                </DxDateEdit>
            </CellEditTemplate>
        </DxGridDataColumn>
        ...
    </Columns>
</DxGrid>

Files to Review

Documentation

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

About

Implement a fully editable DevExpress Blazor Grid bound to a collection of ExpandoObject instances.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •