Vertical Grid Overview

Expand rowCollapse row
Ms. Nancy DavolioDr. Andrew Fuller
First Name 
Last Name 
Birth Date 
Hire Date 
AddressExpand categoryCollapse category
507 - 20th Ave. E. Apt. 2A908 W. Capital Way
PhoneExpand categoryCollapse category
Home Phone 
(206) 555-9857(206) 555-9482
About the Vertical Grid

The DevExpress ASP.NET Vertical Grid (ASPxVerticalGrid) is a feature-rich data presentation component that displays tabular data in an inverted manner. In contrast with the traditional grid, the Vertical Grid displays data records as grid columns and data fields as grid rows. The ASPxVerticalGrid control supports data editing and provides facilities for an end-user to sort and filter data against an unlimited number of data fields.

The following code will help you get started with the ASPxVerticalGrid control. The code demonstrates how to add a grid to your project, bind it to a data source and customize data rows and category rows. In this demo, the Entity data base is used as a data source.

 <dx:ASPxVerticalGrid ID="VerticalGrid" runat="server" DataSourceID="EmployeesDataSource">
        <dx:VerticalGridBinaryImageRow FieldName="Photo" />
        <dx:VerticalGridDataRow FieldName="PersonalInfo" Caption="Name" UnboundExpression="[TitleOfCourtesy] + ' ' + [FirstName] + ' ' + [LastName]" UnboundType="String" >
                <dx:VerticalGridDataRow FieldName="FirstName" />
                <dx:VerticalGridDataRow FieldName="LastName" />
                <dx:VerticalGridDataRow FieldName="BirthDate" />
                <dx:VerticalGridDataRow FieldName="HireDate" />
        <dx:VerticalGridCategoryRow Caption="Address">
                <dx:VerticalGridDataRow FieldName="Address" />
                <dx:VerticalGridDataRow FieldName="City" />
                <dx:VerticalGridDataRow FieldName="Country" />
        <dx:VerticalGridCategoryRow Caption="Phone">
                <dx:VerticalGridDataRow FieldName="HomePhone" />
                <dx:VerticalGridDataRow FieldName="Extension" />
<ef:EntityDataSource runat="server" ID="EmployeesDataSource" ContextTypeName="NorthwindContext" EntitySetName="Employees" Select="top(2) it.Photo, it.FirstName, it.LastName, it.TitleOfCourtesy, it.BirthDate, it.HireDate, it.Address, it.City, it.Country, it.HomePhone, it.Extension" />

Key Features
  • Data Sorting
    ASPxVerticalGrid makes it easy for end-users to sort data against an unlimited number of rows. When necessary, you can disable runtime sort options and handle all sort operations in code.
  • Data Filtering
    ASPxVerticalGrid provides multiple data filtering options, so you can address customer needs more effectively using the header filter or filter editor control.
  • Batch Editing
    ASPxVerticalGrid provides functionality that checks the data input by end-users to ensure that data is error-free. The data entered by an end-user in batch edit mode can be validated on the client before it is posted to a data source.
  • Category Rows
    DevExpress ASP.NET Vertical Grid (ASPxVerticalGrid) allows you to group rows in category rows. In this demo you can click a category row to expand or collapse it.
  • Total Summary
    The grid supports the usage of aggregate functions to display summarized information about columns within the ASPxVerticalGrid (e.g., the number of records or the maximum value across all columns in a dataset).
  • Data Export
    The grid's content can be exported to many popular formats (with the same layout as it appears on-screen), including RTF, PDF, XLSX and XLS.
Version: v2017 vol 1.6
Copyright © 2006-2017 Developer Express Inc
Your Next Great ASP.NET App Starts Here

Get started today and download your 30-day trial of ASP.NET Controls and Libraries (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress ASP.NET distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress ASP.NET Controls and Libraries ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.