Data Cells

• Feb 02, 2023
• 3 minutes to read

GridView displays data using data columns and rows. Each data row displays data cells. Each data cell value corresponds to a field value within a record.

You can customize data cells by changing their styles or by using templates.

Customizing Data Cells via Style Settings

Customizing data cells at the extension level

You can use the GridViewStyles.Cell (via GridViewSettings.Styles.Cell) property to customize the appearance settings used to paint data cells. These style settings are common to all data cells.

The code sample below demonstrates how to define the style settings common to all grid data cells.

C#

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    ...
    // Define the style settings for all the cells within the grid.
    settings.Styles.Cell.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;

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

The image below illustrates the result.

Customizing data cells at the column level

Columns provide the GridViewColumn.CellStyle (via MVCxGridViewColumn.CellStyle) property used to paint their data cells. This allows you to provide a custom style for data cells that reside within individual columns.

The code sample below demonstrates how to define the style settings for the cells 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 data cells within this column only.
        column.CellStyle.BackColor = System.Drawing.Color.Yellow;
    });
    settings.Columns.Add("FirstName");
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.

Customizing Data Cells Using Templates

The GridView’s look and feel can be customized via Templates. A template is a set of HTML elements and ASP.NET MVC extensions that define the layout for a particular element within the ASP.NET MVC extension (e.g., a data cell). When the extension runs in the web page, template content is rendered in place of the default HTML for the extension.

Customizing data cells at the extension level

You can use the GridViewSettings.SetDataItemTemplateContent method to set a template to render data cells. This template will be applied to all data cells.

The code sample below demonstrates how to define a template common to all grid data cells.

C#

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    ...
    // Set a template to render all data cells within the Grid.
    settings.SetDataItemTemplateContent(cell => {
        ViewContext.Writer.Write("<span style=\"color:red\">" + cell.Text + "</span>");
    });

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

The image below illustrates the result.

Customizing data cells at the column level

Columns provide the MVCxGridViewColumn.SetDataItemTemplateContent method used to set a template to render their data cells. This allows you to provide templates for data cells that reside within individual columns.

The code sample below demonstrates how to define a template for the cells within an individual column.

C#

@Html.DevExpress().GridView(settings =>
{
    settings.Name = "GridView";
    ...
    // Set a template to render all the data cells in the "LastName" column.
    settings.Columns.Add(column => {
        column.FieldName = "LastName";
        column.SetDataItemTemplateContent(cell => {
            ViewContext.Writer.Write("<b style=\"font-style:italic\">" + cell.Text + "</b>");
        });
    });
    settings.Columns.Add("FirstName");
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.