This example demonstrates how to enable inline data editing in the DevExpress Blazor Grid component.
Set the Grid's EditMode property to EditRow to display inline editors instead of the edited row.
The Grid automatically generates and configues editors for data columns based on assosiated data types. Use a data column's EditSettings property to customize the default editor generated for this column. This example customizes the spin editor generated for the Unit Price column and replaces the Category Name column's spin editor with a combo box.
Documentation
Files to Review:
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
EditRow/Pages/Index.razor
Razor@page "/"
@implements IDisposable
@using AutoMapper
@using DevExpress.Blazor.Internal
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@inject IGlobalOptionsService GlobalOptionsService
@if(IsLoading) {
<text>Loading...</text>
}else {
<DxGrid Data="Products"
EditMode="GridEditMode.EditRow"
CustomizeEditModel="Grid_CustomizeEditModel"
EditModelSaving="Grid_EditModelSaving">
<Columns>
<DxGridCommandColumn DeleteButtonVisible="false" Width="15%" />
<DxGridDataColumn FieldName="ProductName" Width="25%" />
<DxGridDataColumn FieldName="CategoryId" Caption="Category Name" Width="10%">
<EditSettings>
<DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName"/>
</EditSettings>
</DxGridDataColumn>
<DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%">
<EditSettings>
<DxSpinEditSettings MinValue="0M" Mask="n3" />
</EditSettings>
</DxGridDataColumn>
<DxGridDataColumn FieldName="UnitsInStock" />
<DxGridDataColumn FieldName="QuantityPerUnit" Width="15%" />
<DxGridDataColumn FieldName="Discontinued" />
</Columns>
</DxGrid>
}
@code {
NorthwindContext Northwind { get; set; }
List<Product> Products { get; set; }
List<Category> Categories { get; set; }
IMapper ProductMapper { get; set; }
bool IsLoading { get; set; } = true;
protected override async Task OnInitializedAsync() {
var config = new MapperConfiguration(c => c.CreateMap<Product, EditableProduct>().ReverseMap());
ProductMapper = config.CreateMapper();
Northwind = NorthwindContextFactory.CreateDbContext();
Products = await Northwind.Products.ToListAsync();
Categories = await Northwind.Categories.ToListAsync();
GlobalOptionsService.GlobalOptions.ShowValidationIcon = true;
IsLoading = false;
}
void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
var editableProduct = new EditableProduct();
if(!e.IsNew)
ProductMapper.Map((Product)e.DataItem, editableProduct);
e.EditModel = editableProduct;
}
async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
var editableProduct = (EditableProduct)e.EditModel;
var product = e.IsNew
? new Product()
: Northwind.Products.Find(e.Grid.GetDataItemValue(e.DataItem, "ProductId"));
ProductMapper.Map(editableProduct, product);
if(e.IsNew)
await Northwind.Products.AddAsync(product);
await Northwind.SaveChangesAsync();
Products = await Northwind.Products.ToListAsync();
}
public void Dispose() {
Northwind?.Dispose();
}
}