Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.EditFormButtonsVisible Property

Specifies whether the edit form contains the predefined Save and Cancel buttons.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[DefaultValue(true)]
[Parameter]
public bool EditFormButtonsVisible { get; set; }

#Property Value

Type Default Description
Boolean true

true if the edit form contains the Save and Cancel buttons; otherwise, false.

#Remarks

The default edit form shows only the predefined Save and Cancel buttons. Use the EditFormTemplate to define edit form content. To hide the predefined buttons and implement your own buttons, disable the EditFormButtonsVisible option. Note the following specifics:

Tip

For information on how to enable data editing, refer to the following topic: Editing and Validation in Blazor Grid.

The following example uses the DxFormLayout component to display automatically generated editors and custom Save and Cancel buttons:

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="GridDataSource"
        EditModelSaving="OnEditModelSaving"
        DataItemDeleting="OnDataItemDeleting"
        KeyFieldName="EmployeeId"
        EditFormButtonsVisible="false"
        @ref="MyGrid">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EditFormTemplate Context="editFormContext">
        <DxFormLayout>
            <DxFormLayoutItem Caption="First Name:">
                @editFormContext.GetEditor("FirstName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Last Name:">
                @editFormContext.GetEditor("LastName")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Title:">
                @editFormContext.GetEditor("Title")
            </DxFormLayoutItem>
            <DxFormLayoutItem Caption="Hire Date:">
                @editFormContext.GetEditor("HireDate")
            </DxFormLayoutItem>
            <DxFormLayoutItem ColSpanMd="12">
                <DxButton SubmitFormOnClick="true" Text="Save" />
                <DxButton Click="@(() => MyGrid.CancelEditAsync())" Text="Cancel" />
            </DxFormLayoutItem>
        </DxFormLayout>
    </EditFormTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    NorthwindContext Northwind { get; set; }
    IGrid MyGrid { get; set; }

    protected override async Task OnInitializedAsync() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
        var editModel = (Employee)e.EditModel;
        // Assign changes from the edit model to the data item.
        if (e.IsNew)
            await Northwind.AddAsync(editModel);
        else
            e.CopyChangesToDataItem();
        // Post changes to the database.
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
         // Remove the data item from the database.
        Northwind.Remove(e.DataItem);
        await Northwind.SaveChangesAsync();
        // Reload the entire Grid.
        GridDataSource = await Northwind.Employees.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Edit Form with Custom Buttons

See Also