[Expand]General Information
[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]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Collapse]Vertical Grid
   [Expand]Product Information
   [Collapse]ASPxVerticalGrid Getting Started
     Lesson 1 - How to Create a Vertical Grid
    ASPxVerticalGrid Designer
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [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]Office File API
[Expand]Report and Dashboard 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?​​​​​​​