Data Cells

• Feb 01, 2023
• 3 minutes to read

The VeticalGrid displays data using data rows and columns. Each column 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 Using Style Settings

Customizing data cells at the extension level

You can use the VerticalGridStyles.Record (through VerticalGridSettings.Styles.Record) 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().VerticalGrid(settings =>
{
    settings.Name = "VerticalGrid";
    ...
    // Define the style settings for all the cells within the grid.
    settings.Styles.Record.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;

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

The image below illustrates the result.

Customizing data cells at the row level

Rows provide the VerticalGridRow.RecordStyle (through MVCxVerticalGridRow.RecordStyle) property used to paint their data cells. This allows you to provide a custom style for data cells that reside within individual rows.

The code sample below demonstrates how to define the style settings for the cells within an individual row.

C#

@Html.DevExpress().VerticalGrid(settings =>
{
    settings.Name = "VerticalGrid";
    ...
    // Add a customized row.
    settings.Rows.Add(row =>
    {
        row.FieldName = "LastName";
        // Define the style settings for the data cells within this row only.
        row.RecordStyle.BackColor = System.Drawing.Color.Yellow;
    });
    settings.Rows.Add("FirstName");
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.

Customizing Data Cells Using Templates

The VerticalGrid’s look and feel can be customized using 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 VerticalGridSettings.SetDataItemContent 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 VerticalGrid data cells.

C#

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

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

The image below illustrates the result.

Customizing data cells at the row level

Rows provide the MVCxVerticalGridRow.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 rows.

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

C#

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

The image below illustrates the result.