Vertical Grid

• Feb 01, 2023
• 4 minutes to read

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.

Adding VerticalGrid to a Project Manually

Note

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.

Model

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.

View

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):

C#

@Html.Partial("VerticalGridPartial", Model)

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):

C#

@Html.DevExpress().VerticalGrid(
    settings => {
        settings.Name = "myVerticalGrid";
        settings.CallbackRouteValues = new { Controller = "Home", Action = "VerticalGridPart" };

        settings.Rows.Add("ContactName");
        settings.Rows.Add("CompanyName");
        settings.Rows.Add("City").SortOrder = DevExpress.Data.ColumnSortOrder.Ascending;
        settings.Rows.Add("Region");
        settings.Rows.Add("Country");
    }).Bind(Model).GetHtml()

Note

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

Controller

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”):

C#

public class HomeController : Controller {
    public ActionResult Index() {
        return View(GetCustomers());
    }

    public ActionResult VerticalGridPart() {
        return PartialView("VerticalGridPartial", GetCustomers());
    }

    public IEnumerable GetCustomers(){
        NWindDataContext DB = new NWindDataContext();
        return from customer in DB.Customers select customer;
    }
}

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.

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 v24.2…”

   

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.

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.

LEARN MORE

• Concepts
• Visual Elements

HOW TO

• Online Demos

REFERENCE

• Extension Sheet