THEMES
THEME SETTINGS

Grid View Overview

Ship Name 
Ship City 
Ship Postal Code 
Ship Country 
Vins et alcools ChevalierReims51100France
Toms SpezialitätenMünster44087Germany
Hanari CarnesRio de Janeiro05454-876Brazil
Victuailles en stockLyon69004France
Suprêmes délicesCharleroiB-6000Belgium
Hanari CarnesRio de Janeiro05454-876Brazil
Chop-suey ChineseBern3012Switzerland
Richter SupermarktGenève1204Switzerland
Wellington ImportadoraResende08737-363Brazil
HILARION-AbastosSan Cristóbal5022Venezuela
Page 1 of 83 (830 items)Prev12348283Next
About the Grid View

The high performance DevExpress ASP.NET MVC Grid View extension is a powerful editing and data shaping component that allows end-users to easily manage information and provide powerful data filtering options. The Grid View provides layout features, such as cell merging, templates, and support for master-detail data presentation allowing you to build grid layouts of any complexity. Additionally, the Grid View includes a built-in printing engine for instant ad-hoc reporting, without fear of performance penalties.

Follow the three simple steps below to add a DevExpress GridView extension and bind it to your data. It's easy as “M”, “V”, and “C”.

1. Model (the "M" in MVC). First, you will need a Model object for the DevExpress ASP.NET MVC Grid View to bind to. Create a new data model using the Entity Framework wizard or LinqToSQL ORM from Visual Studio. However, you can use any model that supports the IEnumerable or IQueryable interface (learn more in our online documentation).

2. View (the "V" in MVC). Next, declare the ASP.NET MVC Grid View extension inside of the View. Specifically, we'll create a Partial View because the DevExpress GridView extension provides AJAX callbacks by default to give your end-users a better experience without updating the entire page. However, because ASP.NET MVC does not support callbacks, declare the GridView extension inside of the Partial View and define how the callbacks will be routed back to your controller using the CallbackRouteValues property:

Partial View code:

@Html.DevExpress().GridView(settings => {
    settings.Name = "gvOverview";
    settings.CallbackRouteValues = new {
      Controller = "Overview", Action = "OverviewPartial" };
    settings.Columns.Add("ShipName");
    settings.Columns.Add("ShipCity");
    settings.Columns.Add("ShipPostalCode");
    settings.Columns.Add("ShipCountry");
    settings.SettingsPager.NumericButtonCount = 6;
}).Bind(Model).GetHtml()


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

Controller code:

public class HomeController: Controller {
  public ActionResult Index() {
    return View("Overview", GetOrders());
  }
  public ActionResult OverviewPartial() {
    return PartialView("OverviewPartial", GetOrders());
  }
  public IEnumerable GetOrders() {
    NorthwindDataContext DB = new NorthwindDataContextExt();
    return from order in DB.Orders select order;
  }
}

Watch a short nine-minute getting started video now to learn about the DevExpress GridView extension for ASP.NET MVC.

Key Features
  • Binding to Large Data
    Regardless of the dataset size, you can use countless GridView's features (including a built-in printing engine) for instant ad-hoc reporting, without compromising performance.
  • Master-Detail Support
    GridView allows you to present master-detail information of any complexity.
  • Built-in Edit Modes
    GridView provides four built-in edit modes: via the Edit Form and Popup Edit Form, Batch editing and In-Line editing.
  • Automatic Data Sorting and Grouping
    GridView allows your end-users to sort and group data against an unlimited number of columns, providing tools for analyzing and editing information.
  • Full Data Summaries
    Summaries allow you to present statistical information such as MIN, MAX, AVG, SUM and COUNT directly within the grid itself, without the need for a workaround that requires the use of individual edit controls. You can also handle summary-specific events to implement complex functions with ease. Standard deviation and many other statistical formulas are now included.
  • Filtering by Values and Display Text
    For each column, you can specify the way in which to filter the column's data - by edit values or display values.
  • Band Columns
    The GridView's multi-row headers feature allows you to organize grid columns in logical groups (bands).
  • Built-in Pager
    GridView automatically splits content across multiple pages, and provides a built-in pager that enables end-users to navigate through data.
  • Template Technology
    Templates are fully supported. For each element within GridView, you can customize the appearance or layout using any HTML content.
  • Rich Client-Side Functionality
    A comprehensive client-side API is available for GridView. This functionality, coupled with the ability to handle events on the client side, allows you to have full control over the grid's behavior on the client side.
  • Export
    GridView allows you to export its data to PDF, XLS and RTF formats.
Version: v2016 vol 2.6
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.