[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Charting
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Scheduler
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Collapse]Vertical Grid
    Overview - VerticalGrid
    Main Features
   [Collapse]Concepts
    [Expand]Binding to Data
    [Collapse]Data Representation Basics
     [Collapse]Cells
       Data Cells
       Command Cells
     [Expand]Rows
    [Expand]Data Editing and Validation
    [Expand]Focus and Navigation
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]SpellChecker
  [Expand]Query Builder
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Data Cells

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.

Expanded 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.

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.

The image below illustrates the result.

Expanded 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.

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.

The image below illustrates the result.

Expanded See Also

Is this topic helpful?​​​​​​​