Blazor: Grid-Edit Data

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. To hide unnecessary buttons, use the NewButtonVisible, EditButtonVisible, and DeleteButtonVisible properties.
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.
Specify the key data field to enable the Data Grid to identify individual data items.

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 (Default) – 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.

When a user clicks New or Edit, the Data Grid displays the Edit Form. This form consists of data editors for each visible column. The editor type depends on the corresponding column's type.

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;
    }
    ...
}

Cascading Editors

This module illustrates cascade comboboxes: City and Region. These comboboxes are displayed when you edit a grid row. The City combobox is dynamically populated with city names based on the value selected in the Region combobox.

Both the Region and City columns use the EditTemplate context cast to the CellEditContext type that contains:

An original cell value as a DataItem object.
An EditedValues dictionary with changed cell values.
A CellValue object that stores the current cell’s value.
Two overloads of the OnChanged method that allow one combobox to respond to another combobox’s value change.
The GetEditorValue method that returns a value of any grid cell.

Click Edit to see how the Region and City comboboxes communicate using the OnChanged and GetEditorValue methods to pass/get values to/from each other.

Region	City	Vacancy
Europe, Middle East, Africa	London	Support Engineer
Asia/Pacific	Tokyo	System Administrator
North America	New York	Software Developer

Razor

<DxDataGrid Data="@Vacancies"
            ShowPager="false"
            RowRemoving="@((dataItem) => OnRowRemoving(dataItem))"
            RowInserting="@((newValues) => OnRowInserting(newValues))"
            RowUpdating="@((updatingDataItem, newValues) => OnRowUpdating(updatingDataItem, newValues))"
            CssClass="mw-1100">
    <DxDataGridCommandColumn Width="150px"></DxDataGridCommandColumn>
    <DxDataGridColumn Field="@nameof(Vacancy.Description)" Caption="Vacancy"></DxDataGridColumn>

    <DxDataGridComboBoxColumn Field="@nameof(Vacancy.Region)" Data="@VacancyRepository.Regions">
        <EditTemplate>
            @{
                var editingContext = (CellEditContext)context;
                var region = (string)editingContext.GetEditorValue(nameof(Vacancy.Region));
            }
            <DxComboBox Data="@VacancyRepository.Regions"
                        NullText="Select Region..."
                        Value="@region"
                        ValueChanged="@((string newCellValue) => {
                                            editingContext.OnChanged(newCellValue);
                                            editingContext.OnChanged(nameof(Vacancy.City), null);
                                            OnRegionChanged();
                                            })">
            </DxComboBox>
        </EditTemplate>
    </DxDataGridComboBoxColumn>
    <DxDataGridColumn Field="@nameof(Vacancy.City)">
        <EditTemplate>
            @{
                var editingContext = (CellEditContext)context;

                var region = (string)editingContext.GetEditorValue(nameof(Vacancy.Region));
                var city = ((string)(editingContext.GetEditorValue(nameof(Vacancy.City))));

                var cities = VacancyRepository.GetOfficeLocationsByRegion(region).Select(x => x.City);
            }
            <DxComboBox Data="@cities"
                        NullText="Select City..."
                        Text="@city"
                        ValueChanged="@((string newCellValue) => editingContext.OnChanged(newCellValue))">
            </DxComboBox>
        </EditTemplate>
    </DxDataGridColumn>
</DxDataGrid>

@code {
    IEnumerable<Vacancy> Vacancies;

    protected override async Task OnInitializedAsync()
    {
        Vacancies = await VacancyRepository.GetVacancies(3);
    }

    public void OnRegionChanged()
    {
        InvokeAsync(StateHasChanged);
    }
    void OnRowUpdating(Vacancy vacancy, Dictionary<string, object> newValue)
    {
        foreach (var field in newValue.Keys)
        {
            switch (field)
            {
                case "Description":
                    vacancy.Description = (string)newValue[field];
                    break;
                case "Region":
                    vacancy.Region = (string)newValue[field];
                    break;
                case "City":
                    vacancy.City = (string)newValue[field];
                    break;
            }
        }
    }
    void OnRowRemoving(Vacancy vacancy)
    {
        Vacancies = Vacancies.Where(v => v != vacancy).ToArray();
        InvokeAsync(StateHasChanged);
    }
    void OnRowInserting(Dictionary<string, object> newValue)
    {
        var newVacancy = new Vacancy();
        OnRowUpdating(newVacancy, newValue);
        Vacancies = (new Vacancy[] { newVacancy }).Concat(Vacancies);

        InvokeAsync(StateHasChanged);
    }
}

Edit Data

Edit Modes Cascading Editors