Data Cells

• Feb 02, 2023
• 2 minutes to read

The DevExpress ASP.NET MVC CardView extension displays its data using cards. Each card contains data cells that correspond to field values in database records. You can use templates or change style settings to customize data cells.

Customize Data Cells using Style Settings

Use the MVCxCardViewColumnLayoutItem class to customize data cells’ appearance.

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    ...
    settings.CardLayoutProperties.Items.Add(i => { 
        i.ColumnName = "FirstName"; 
        i.ColumnSpan = 1; 
        i.Border.BorderWidth = 1;
        i.Border.BorderColor = System.Drawing.Color.Red;
        i.Border.BorderStyle = BorderStyle.Solid;
        i.CaptionStyle.ForeColor = System.Drawing.Color.Red;
    });
    settings.CardLayoutProperties.Items.Add(i => {
        i.ColumnName = "LastName";                
        i.NestedControlCellStyle.BackColor = System.Drawing.Color.Yellow;
        i.CaptionCellStyle.BackColor = System.Drawing.Color.LightGray;
    });
    settings.CardLayoutProperties.Items.Add("Title");
    settings.CardLayoutProperties.Items.Add("HomePhone");
    settings.CardLayoutProperties.Items.Add("HireDate");
    settings.CardLayoutProperties.Items.Add("BirthDate");
    settings.CardLayoutProperties.Items.Add(i => {
        i.ColumnName = "Notes";
        i.CaptionSettings.Location = LayoutItemCaptionLocation.Top;
        i.VerticalAlign = FormLayoutVerticalAlign.Top;
        i.ColumnSpan = 2;
    });
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.

Customize Data Cells Using Templates

You can use templates to customize data cells’ appearance. A template is a set of HTML elements and ASP.NET MVC extensions that define the layout for the ASP.NET MVC extension’s particular element (for example, the CardView’s data cell). When you load a page with a CardView extension, the CardView renders the template’s content instead of the default HTML.

Customize data cells at the extension level

Use the CardViewSettings.SetDataItemTemplateContent method to specify a template the CardView uses to display its data cells.

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    ...
    settings.SetDataItemTemplateContent(cell => {                
        ViewContext.Writer.Write("<span style='color:blue'>"+cell.Text+"</span>");
    });
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.

Customize data cells at a column level

CardView columns provide the MVCxCardViewColumn.SetDataItemTemplateContent method to specify a template the Card View uses to displaydata cells in a column.

C#

@Html.DevExpress().CardView(settings =>
{
    settings.Name = "CardView";
    ...
    settings.Columns.Add(column => {
        column.FieldName = "ProductName";
        column.Caption = "Product Name";
        column.SetDataItemTemplateContent(cell => {                
            ViewContext.Writer.Write("<span style='color:blue'>"+cell.Text+"</span>");
        });
    });             
    ...
}).Bind(Model).GetHtml()

The image below illustrates the result.