Log In
[Expand]Welcome to DevExpress .NET Documentation
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Collapse]Vertical Grid
   [Expand]Product Information
   [Collapse]ASPxVerticalGrid Getting Started
     Lesson 1 - How to Create a Vertical Grid
    ASPxVerticalGrid Designer
   [Expand]Visual Elements
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Data Editors
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [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]Report Server
[Expand]eXpressApp Framework
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 1 - How to Create a Vertical Grid

This tutorial shows how to create a vertical grid and customize its settings.

This tutorial consists of the following steps.

Expanded Step 1. Create a New Project and Add a Vertical Grid Control

In this step, we will perform common actions required to add a Vertical Grid control to a website.

  • Create a new ASP.NET Empty Website project (Visual Studio 2012, 2013, or 2015) or open an existing project.
  • Add the ASPxVerticalGrid component to your project. To do this, locate the ASPxVerticalGrid item on the Visual Studio toolbox and drop it onto the form.

This creates a new ASPxVerticalGrid.

Expanded Step 2. Connect to a Data Source

To connect the vertical grid to a data source, click the smart tag and choose the New data source item.

In the opened wizard, different data source types are available. Select the SQL data source type and click OK.

Then, specify your database.

Choose the table and fields from the selected table.

Click Next and then Finish to complete the wizard. The Vertical Grid is now bound to the database.

Expanded Step 3. Configure Vertical Grid Control Settings

To enable the header filter, select the Designer item from the opened smart tag menu to open the ASPxVerticalGrid Designer. Select the Filtering/Header Filter menu item. Set the ShowHeaderFilterButton option to true and click OK.

Expanded Step 4. View the Result

Run the website to see the result.

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