Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[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]Card View
  [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]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [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]Document Server
[Expand]Reporting
[Expand]Report 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

How would you rate this topic?​​​​​​​