Grid for Blazor - Restrict data editing to rows that match specific conditions

This example disables our Blazor Grid’s Edit button whenever the Date field value is less than or equal to the current date.

Overview

Follow the steps below to enable row editing for field values that match a specific condition.

1. Create a custom Edit button

Declare the DxGridCommandColumn object in the Columns template to display a command column. The command column displays predefined New, Edit, and Delete command buttons. Define the column's cell display template to implement a custom Edit button.

<DxGrid @ref="myGrid" Data="@forecasts">
    <Columns>
        <DxGridCommandColumn NewButtonVisible=false>
            <CellDisplayTemplate>
                <DxButton Text="Edit"/>
            </CellDisplayTemplate>
        </DxGridCommandColumn>
    </Columns>
</DxGrid>

2. Customize Edit button behaviour

Use the cell display template's context parameter to access the grid object and the processed data item. Set the Edit button's Enabled property to true or false based on the data item's field values. Call the grid's StartEditDataItemAsync method to display an edit form when a user clicks the Edit button.

<CellDisplayTemplate>
    @{
        var date = context.DataItem != null ? (context.DataItem as WeatherForecast).Date : DateTime.Now;
            <DxButton Text="Edit"
                      Click="() => myGrid.StartEditDataItemAsync(context.DataItem)" 
                      Enabled="@(date <= DateTime.Now)" />
    }
</CellDisplayTemplate>

3. Define edit form template

The default edit form displays predefined Save and Cancel buttons. Use the edit form template to define the edit form's content. This example uses our Blazor DxFormLayout to display automatically generated editors in the edit form for all editable data columns.

<EditFormTemplate Context="editFormContext">
    <DxFormLayout>
        <DxFormLayoutItem Caption="Date:">
            @editFormContext.GetEditor("Date")
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Summary:">
            @editFormContext.GetEditor("Summary")
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Temperature (C):">
            @editFormContext.GetEditor("TemperatureC")
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Temperature (F):">
            @editFormContext.GetEditor("TemperatureF")
        </DxFormLayoutItem>
    </DxFormLayout>
</EditFormTemplate>

4. Save changes and reload data

The EditModelSaving event fires when a user submits an edit form and allows you to save changes. Use the following event argument properties to post changes to the data source:

• The EditModel property returns the edit model that stores all changes.
• The DataItem property returns the proccesed data item.
• The CopyChangesToDataItem method copies all changes made in the edit model to the data item.

The Blazor Grid automatically reloads its data after you post updates to the data source.

<DxGrid @ref="myGrid" Data="@forecasts" EditModelSaving="OnEditModelSaving">
    <!-- ... -->
</DxGrid>

@code {
    void OnEditModelSaving(GridEditModelSavingEventArgs e) {
        e.CopyChangesToDataItem();
    }
}

Files to Review

• Index.razor

Documentation

• Grid: Bind to Data
• Grid: Edit Data and Validate Input

More Examples

• Grid for Blazor - How to edit a row on a separate page
• Grid for Blazor - How to display a custom confirmation dialog

Does this example address your development requirements/objectives?

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