Edit Cells

• Feb 02, 2023
• 2 minutes to read

Edit cells are displayed within the Edit Form when a GridView is in edit mode. They correspond to data columns and allow the corresponding values within the edited row to be changed.

An edit cell displays the name of the column to which it corresponds. It also provides an editor used to edit the values in that column. The editor displayed within the edit cell is specified by the column’s MVCxGridViewColumn.ColumnType property.

Customizing Edit Cells via Style Settings

Customizing edit cells at the extension level

The style settings used to paint edit cells can be accessed via the GridViewStyles.EditFormCell (via GridViewSettings.Styles.EditFormCell) property.

The style settings used to paint edit cell captions can be accessed via the GridViewStyles.EditFormColumnCaption (via GridViewSettings.Styles.EditFormColumnCaption) property.

The code sample below demonstrates how to define the style settings common to all grid edit cells and their captions.

C#

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    ...
    // Define the style settings for all edit cells within the grid.
    settings.Styles.EditFormCell.BackColor = System.Drawing.Color.LightBlue;
    // Define the style settings for all edit cell captions within the grid.
    settings.Styles.EditFormColumnCaption.BackColor = System.Drawing.Color.LightGreen;

    settings.Columns.Add("LastName");
    settings.Columns.Add("FirstName");
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.

Customizing edit cells at the column level

Columns provide the GridViewDataColumn.EditCellStyle (via MVCxGridViewColumn.EditCellStyle) property, which is used to paint edit cells. The style settings used to paint edit cell captions at the column level can be accessed via the GridViewDataColumn.EditFormCaptionStyle (via MVCxGridViewColumn.EditFormCaptionStyle) property.

These properties allow you to provide a custom style for edit cells and their captions that reside within individual columns.

The code sample below demonstrates how to define the style settings for the edit cell and its caption within an individual column.

C#

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    ...
    // Add a customized column.
    settings.Columns.Add(column =>
    {
        column.FieldName = "LastName";
        // Define the style settings for the edit cell within this column only.
        column.EditCellStyle.BackColor = System.Drawing.Color.LightBlue;
        // Define the style settings for the edit cell caption within this column only.
        column.EditFormCaptionStyle.BackColor = System.Drawing.Color.LightGreen;
    });
    settings.Columns.Add("FirstName");
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.