[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [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]Tree List
  [Expand]Card View
  [Expand]Pivot Grid
   Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Collapse]Vertical Grid
    Main Features
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Spell Checker
  [Expand]Query Builder
 [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]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Vertical Grid

The DevExpress ASP.NET MVC VerticalGrid is a data bound server extension with an advanced client-side API. The VerticalGrid is designed to display tabular information represented as an inverted grid with row headers representing data source fields and columns representing data source records. The VerticalGrid provides facilities for an end-user to sort and filter data against an unlimited number of rows.

Expanded Adding VerticalGrid to a Project Manually


Before you start, make sure your project is prepared for using DevExpress ASP.NET MVC Extensions. See this topic to learn how to prepare your project: Integration into an ASP.NET MVC Project.


The data model class is used to represent data records in a database. Each instance of a data model class will correspond to a row within a database table, and each property of the data model class will map to a column within a database table.

The image below demonstrates how the model class properties are represented within the VerticalGrid.


The DevExpress VerticalGrid updates itself (when paging, sorting, filtering, etc.) using AJAX callbacks to the server without updating and reloading the entire page. This mechanism requires you to declare the VerticalGrid extension in the Partial View. So, in the View code, place a link to the PartialView that will contain the VerticalGrid declaration.

View code - "Index" (Razor):

Now, declare the VerticalGrid code in the PartialView. To do this, invoke the ExtensionsFactory.VerticalGrid helper method. This method returns the VerticalGrid extension that is implemented by the VerticalGridExtension class.

To configure the VerticalGrid extension, pass the VerticalGridSettings object to the ExtensionsFactory.VerticalGrid helper method as a parameter. The VerticalGridSettings object contains all the VerticalGrid extension settings. It is necessary to define how the callbacks will be routed back to your controller using the GridSettingsBase.CallbackRouteValues property.

Partial View code - "VerticalGridPartial" (Razor):


The Partial View should contain only the extension's code.


In the controller code, define the action method that will handle the VerticalGrid's callbacks. The VerticalGridPart action method below handles the grid's callbacks. This method should return the PartialView with the VerticalGrid extension, and pass a model to the View.

Controller ("Home"):

In this example, the GetCustomers method returns a collection of items that will be displayed within a VerticalGrid. The controller passes this collection to the View as a Model. In the View code, the VerticalGrid is bound to the Model object using the VerticalGridExtension.Bind method.

The code result is demonstrated in the image below.

Expanded Adding VerticalGrid to a Project Using the Insert Extension Wizard

The Insert DevExpress MVC Extension Wizard allows you to insert DevExpress ASP.NET MVC extensions to your project with minimum or no coding.

Follow the steps below to insert the VerticalGrid extension to your project.

  1. Create a new data model (using the Entity Framework or LinqToSql ORM) with the code first or the database first approach.
  2. Open the required View file (Index.cshtml in this topic), focus on the position in the code where you would like to insert the VerticalGrid, right-click -> select "Insert DevExpress MVC Extension v19.1…"

  3. The Insert Extension Wizard opens. Navigate to the tab with the Data extensions and select VerticalGrid. Define the extension name and the partial view name. In the Model Type item, select the data model class; in the Model Context item, select the data context class. Select the data columns you want to display within the VerticalGrid and select the key field.

  4. Click the "Insert" button and the VerticalGrid will be added into your project.

After these manipulations, Insert Extension Wizard generates a partial view with the VerticalGrid's settings and inserts the required code into the corresponding controller class. As a result, you have a fully functional MVC Vertical Grid bound to a data source.

Expanded Client-Side API

In addition to the comprehensive server-side object model, the MVC VerticalGrid extension offers an advanced client-side API.

The VerticalGrid's client counterpart is represented by the MVCxClientVerticalGrid object. An extension client object can be accessed on the client using the extension name defined using the VerticalGridSettings.Name property. The VerticalGrid's client events can be accessed through the VerticalGridSettings.ClientSideEvents property.

Individual VerticalGrid rows are exposed on the client side as JS objects of the ASPxClientVerticalGridRow class.


Expanded HOW TO


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