Native Blazor Components powered by DevExpress

Edit Modes

The Data Grid allows users to add, edit, and remove data rows.

Add DxDataGridCommandColumn to the Data Grid. This column displays the New, Edit, and Delete command buttons.
Handle the following events to post changes to an underlying data source:
- RowInserting/RowInsertingAsync - Fires when a user adds a new row.
- RowUpdating/RowUpdatingAsync - Fires when a user updates a data row.
- RowRemoving/RowRemovingAsync - Fires when a user deletes a data row.
Handle the InitNewRow event to initialize new data rows.

The Data Grid supports different edit modes. Use the Edit Mode option below (corresponds to the EditMode property) to switch between available modes.

DataGridEditMode.EditForm – The Data Grid displays the edit form instead of the edited row.
DataGridEditMode.PopupEditForm – The Data Grid displays the edit form in a pop-up window.

Edit Mode:

Supplier Name	Category	Delivery Method	Phone Number	Bank Account Branch	Bank Account Number
A Datum Corporation	Novelty Goods Supplier	Road Freight	(847) 555-0100	Woodgrove Bank Zionsville	8575824136
Contoso, Ltd.	Novelty Goods Supplier	Refrigerated Road Freight	(360) 555-0100	Woodgrove Bank Greenbank	4587965215
Consolidated Messenger	Courier Services Supplier		(415) 555-0100	Woodgrove Bank San Francisco	3254872158
Fabrikam, Inc.	Clothing Supplier	Road Freight	(203) 555-0104	Woodgrove Bank Lakeview Heights	4125863879
Graphic Design Institute	Novelty Goods Supplier	Refrigerated Air Freight	(406) 555-0105	Woodgrove Bank Lanagan	1025869354
Humongous Insurance	Insurance Services Supplier		(423) 555-0105	Woodgrove Bank Lancing	2569874521
Litware, Inc.	Packaging Supplier	Courier	(209) 555-0108	Woodgrove Bank Mokelumne Hill	3256896325
Lucerne Publishing	Novelty Goods Supplier	Refrigerated Air Freight	(423) 555-0103	Woodgrove Bank Jonesborough	3254123658
Nod Publishers	Novelty Goods Supplier	Refrigerated Air Freight	(252) 555-0100	Woodgrove Bank Elizabeth City	2021545878
Northwind Electric Cars	Toy Supplier	Air Freight	(201) 555-0105	Woodgrove Bank Crandon Lakes	3258786987
Trey Research	Marketing Services Supplier		(605) 555-0103	Woodgrove Bank Kadoka	1254785321
The Phone Company	Novelty Goods Supplier	Road Freight	(218) 555-0105	Woodgrove Bank Karlstad	7896236589
Woodgrove Bank	Financial Services Supplier		(415) 555-0103	Woodgrove Bank San Francisco	2147825698

Razor


<DxDataGrid ...
            Data="@SupplierService.Suppliers"
            RowRemovingAsync="@OnRowRemoving"
            RowUpdatingAsync="@OnRowUpdating"
            RowInsertingAsync="@OnRowInserting"
            InitNewRow="@OnInitNewRow"
            EditMode="@CurrentEditMode">
    <DxDataGridCommandColumn Width="100px" />
    <DxDataGridColumn Field="@nameof(Supplier.SupplierName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.SupplierCategoryID)"
                              Caption="Category"
                              Data="@SupplierService.SupplierCategories"
                              ValueFieldName="@nameof(SupplierCategory.SupplierCategoryID)"
                              TextFieldName="@nameof(SupplierCategory.SupplierCategoryName)" />
    <DxDataGridComboBoxColumn Field="@nameof(Supplier.DeliveryMethodID)"
                              Caption="Delivery Method"
                              Data="@SupplierService.DeliveryMethods"
                              ValueFieldName="@nameof(DeliveryMethod.DeliveryMethodID)"
                              TextFieldName="@nameof(DeliveryMethod.DeliveryMethodName)" />
    <DxDataGridColumn Field="@nameof(Supplier.PhoneNumber)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountBranch)" />
    <DxDataGridColumn Field="@nameof(Supplier.BankAccountNumber)" />
</DxDataGrid>

@code {
    DataGridEditMode CurrentEditMode { get; set; } = DataGridEditMode.EditForm;
    Task OnRowRemoving(Supplier dataItem) {
        return SupplierService.Remove(dataItem);
    }
    Task OnRowUpdating(Supplier dataItem, IDictionary<string, object> newValue) {
        return SupplierService.Update(dataItem, newValue);
    }
    Task OnRowInserting(IDictionary<string, object> newValue) {
        return SupplierService.Insert(newValue);
    }
    Task OnInitNewRow(Dictionary<string, object> values) {
        values.Add("SupplierCategoryID", 1);
        values.Add("DeliveryMethodID", 1);
        values.Add("PhoneNumber", "(000) 000-0000");
        values.Add("BankAccountNumber", "0000000000");
        ...
        return Task.CompletedTask;
    }
    ...
}