Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [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
  [Collapse]Grid View
    Overview - GridView
    Main Features - GridView
   [Expand]Concepts
   [Expand]Visual Elements
   [Expand]Examples
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [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]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Overview - GridView

The DevExpress ASP.NET MVC GridView is a data bound server extension with advanced client-side API. GridView provides a two-dimensional representation of data from a data source in a grid format. It provides facilities for an end-user to sort, filter and group data against an unlimited number of columns. Delivers group and total summaries.

See Also

GridView - Online Demos  |  GridView - Getting Started Video (YouTube)  |  GridView Main Features

Expanded Contents

Expanded Adding GridView to a Project Manually

Note

Project requirements.

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 GridView.

The GridView extension can be bound to an IQueriable or IEnumerable collection of model class instances. To learn more about various approaches of binding the GridView to data, refer to the Binding to Data documentation section.

View

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

View code - "Index" (ASPX):

View code - "Index" (Razor):

Now, you should declare the GridView code in the PartialView. To do this, invoke the ExtensionsFactory.GridView helper method. This method returns the GridView extension that is implemented by the GridViewExtension class.

To configure the GridView extension, pass the GridViewSettings object to the ExtensionsFactory.GridView helper method as a parameter. The GridViewSettings object contains all the GridView 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 - "GridViewPartial" (ASPX):

Partial View code - "GridViewPartial" (Razor):

Controller

In the controller code, define the action method that will handle GridView's callbacks. The GridViewPart action method below handles the grid's callbacks. This method should return the PartialView with the GridView 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 GridView. The controller passes this collection to the View as a Model. In the View code, the GridView is bound to the Model object using the GridViewExtension.Bind method.

The code result is demonstrated in the image below.

Expanded Adding GridView 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 GridView 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 GridView, right-click -> select "Insert DevExpress MVC Extension v17.2…"

  3. The Insert Extension Wizard opens. Navigate to the tab with the Data extensions and select GridView. 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 columns you want to display within the GridView and select the key field.

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

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

Expanded Client-Side API

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

The GridView's client counterpart is represented by the MVCxClientGridView object. An extension client object can be accessed on the client using the extension name defined using the GridViewSettings.Name property. The GridView's client events can be accessed via the GridViewSettings.ClientSideEvents property.

Individual GridView columns are exposed on the client side as JS objects of the ASPxClientGridViewColumn class.

Example

The code sample below demonstrates how to start row editing when an end-user double clicks this row. In this example, the GridView's client RowDblClick event is handled. The event sender is the MVCxClientGridView object. When the event is fired, the sender's ASPxClientGridView.StartEditRow method is called. This method turns the GridView to edit mode and opens an edit form for the specified row.

Expanded Next Steps

How would you rate this topic?​​​​​​​