THEMES
THEME SETTINGS

Vertical Grid Overview

Photo 
Expand rowCollapse row
Name 
Ms. Nancy DavolioDr. Andrew Fuller
First Name 
NancyAndrew
Last Name 
DavolioFuller
Birth Date 
12/8/1948 12:00:00 AM2/19/1952 12:00:00 AM
Hire Date 
5/1/1992 12:00:00 AM8/14/1992 12:00:00 AM
AddressExpand categoryCollapse category
Address 
507 - 20th Ave. E. Apt. 2A908 W. Capital Way
City 
SeattleTacoma
Country 
USAUSA
PhoneExpand categoryCollapse category
Home Phone 
(206) 555-9857(206) 555-9482
Extension 
54673457
About the Vertical Grid

The DevExpress ASP.NET MVC Vertical Grid extension is a feature-reach data presentation component that displays tabular data in an inverted manner. In contrast with the traditional grid, the Vertical Grid displays data records as grid columns and data fields as grid rows. The Vertical Grid supports data editing and provides facilities for an end-user to sort and filter data against an unlimited number of data fields.

The following code demonstrates how to add a grid to your project, bind it to a data source and customize data rows and category rows.

Partial View code:

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

    settings.Rows.Add("Photo", MVCxVerticalGridRowType.BinaryImage);

    settings.Rows.Add(r => {
        r.FieldName = "PersonalInfo";
        r.Caption = "Name";
        r.UnboundType = UnboundColumnType.String;
        r.UnboundExpression = "[TitleOfCourtesy] + ' ' + [FirstName] + ' ' + [LastName]";

        r.Rows.Add("FirstName");
        r.Rows.Add("LastName");
        r.Rows.Add("BirthDate");
        r.Rows.Add("HireDate");
    });

    settings.Rows.AddCategory(c => {
        c.Caption = "Address";
        c.Rows.Add("Address");
        c.Rows.Add("City");
        c.Rows.Add("Country");
    });

    settings.Rows.AddCategory(c => {
        c.Caption = "Phone";
        c.Rows.Add("HomePhone");
        c.Rows.Add("Extension");
    });

}).Bind(Model).GetHtml()

The controller is where you will need to define the action methods that handle grid's callbacks. The "OverviewPartial" action method below handles the callbacks. While the GetSalesPerson action method gets the data from the model to pass to the View. As you can see, the native DevExpress VerticalGrid extension follows the ASP.NET MVC pattern while providing powerful features for your end-users.

Controller code:

public partial class HomeController : Controller {
  public ActionResult Index() {
      return View("Overview", GetEmployees());
  }
  public ActionResult OverviewPartial() {
      return PartialView("OverviewPartial", GetEmployees());
  }
  public static IEnumerable GetEmployees() {
      NorthwindContext DB = new NorthwindContext();
      return DB.Employees.Take(2).ToList();
  }
}

Key Features
  • Data Sorting
    VerticalGrid makes it easy for end-users to sort data against an unlimited number of rows. When necessary, you can disable runtime sort options and handle all sort operations in code.
  • Data Filtering
    VerticalGrid provides multiple data filtering options, so you can address customer needs more effectively using the header filter or filter editor control.
  • Batch Editing
    VerticalGrid provides functionality that checks the data input by end-users to ensure that data is error-free. The data entered by an end-user in batch edit mode can be validated on the client before it is posted to a data source.
  • Category Rows
    DevExpress ASP.NET MVC Vertical Grid allows you to group rows in category rows. In this demo you can click a category row to expand or collapse it.
  • Total Summary
    The grid supports the usage of aggregate functions to display summarized information about columns within the VerticalGrid (e.g., the number of records or the maximum value across all columns in a dataset).
  • Data Export
    The grid's content can be exported to many popular formats (with the same layout as it appears on-screen), including RTF, PDF, XLSX and XLS.
Version: v2017 vol 1.5
Copyright © 2006-2017 Developer Express Inc
Your Next Great MVC App Starts Here

Get started today and download your 30-day trial of DevExpress MVC Extensions (includes 30 days of free technical support).

All demos ship with full source code and are included in the DevExpress MVC distribution. Refer to the Demos and Sample Applications topic to learn more.

DevExpress MVC Extensions ship as part of DevExpress Universal, DXperience and ASP.NET Subscriptions and are backed by a 60 day unconditional money-back guarantee.
To learn more and obtain pricing information, visit the Compare Features and Pricing webpage. For immediate assistance, contact us by Email at info@devexpress.com or by phone at +1 (818) 844-3383 between 7:30am and 4:30pm Pacific Time.