Edit Cells

• Feb 02, 2023
• 2 minutes to read

The GridView extension displays its edit cells in the Edit Form when the extension is in edit mode. Edit cells correspond to data columns and allow you to change data cells values.

An edit cell displays the name of its corresponding column. It also provides an editor (MVCxGridViewColumn.ColumnType) used to edit that column’s values.

Customize Edit Cells Using Style Settings

Customize edit cells at the extension level

The MVCxCardViewFormLayoutProperties.Styles property specifies edit cells’ style settings.

Note

Note that these style settings are in effect if you create the edit form layout (CardViewSettings.EditFormLayoutProperties).

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

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    ...
    settings.CardLayoutProperties.Items.Add("ContactName");
    settings.CardLayoutProperties.Items.Add("CompanyName");
    settings.CardLayoutProperties.Items.Add("Country");        
    settings.CardLayoutProperties.Items.Add("City"); 

    settings.EditFormLayoutProperties.Items.Add("ContactName");
    settings.EditFormLayoutProperties.Items.Add("CompanyName");
    settings.EditFormLayoutProperties.Items.Add("Country");        
    settings.EditFormLayoutProperties.Items.Add("City"); 

    settings.EditFormLayoutProperties.Styles.LayoutItem.BackColor = System.Drawing.Color.LightGray;
    settings.EditFormLayoutProperties.Styles.LayoutItem.BorderColor = System.Drawing.Color.Yellow;
    settings.EditFormLayoutProperties.Styles.LayoutItem.BorderStyle = BorderStyle.Solid;
    settings.EditFormLayoutProperties.Styles.LayoutItem.BorderWidth = 1;    
    ...
    settings.Columns.Add("ContactName");
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("City");
    settings.Columns.Add("Region");
    settings.Columns.Add("Country");

}).Bind(Model).GetHtml()

The image below illustrates the result.

Customize edit cells at the column level

Use the CardViewSettings.EditFormLayoutProperties property to customize edit cells’ appearance in a column. The MVCxCardViewColumn.EditorProperties method allows you to specify an editor’s style settings in a column’s edit cell.

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    ...
    settings.EditFormLayoutProperties.Items.Add(item => {
        item.ColumnName = "ContactName";
        item.CaptionCellStyle.BackColor = System.Drawing.Color.LightGray;
        item.CaptionStyle.ForeColor = System.Drawing.Color.DarkGreen;
        item.CaptionStyle.Font.Bold = true;
    });

    settings.EditFormLayoutProperties.Items.Add(item => {
        item.ColumnName = "CompanyName";
        item.BackColor = System.Drawing.Color.Yellow;
    });

    settings.EditFormLayoutProperties.Items.Add(item => {
        item.ColumnName = "Country";
    });

    settings.EditFormLayoutProperties.Items.Add(item => {
        item.ColumnName = "City";
    });
    ...
    settings.Columns.Add("ContactName");
    settings.Columns.Add(c => {
        c.FieldName = "CompanyName";
        c.EditorProperties().TextBox(p => p.Style.BackColor  = Color.Coral);
    });
    settings.Columns.Add("City");
    settings.Columns.Add("Region");
    settings.Columns.Add("Country");
}).Bind(Model).GetHtml()

The image below illustrates the result.