Lesson 1 - How to Create a Vertical Grid

  • 2 minutes to read

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

This tutorial consists of the following steps.

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.

ASPxVerticalGrid-GettingStarted-toolbox

This creates a new ASPxVerticalGrid.

<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxVerticalGrid ID="ASPxVerticalGrid1" runat="server"></dx:ASPxVerticalGrid>
    </div>
    </form>
</body>

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.

ASPxVerticalGrid-GettingStarted-SmartTag

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

ASPxVerticalGrid-GettingStarted-DataSource-1

Then, specify your database.

ASPxVerticalGrid-GettingStarted-DataSource-2

Choose the table and fields from the selected table.

ASPxVerticalGrid-GettingStarted-SelectTablesFields

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

ASPxVerticalGrid-GettingStarted-Bound

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.

ASPxVerticalGrid-GettingStarted-Designer

Step 4. View the Result

Run the website to see the result.

ASPxVerticalGrid-GettingStarted-Result