DataGrid

• Sep 12, 2025
• 4 minutes to read

DataGrid is a responsive grid control that supports data editing, validation, searching, filtering, layout customization, and more.

Run Demo: DataGrid Read Tutorial

Getting Started

The DataGrid UI Control is based on the DevExtreme DataGrid component.

To add this control to your project, follow instructions in the following help topics:

• Configure a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

DataGridBasics.cshtml

@using ASP.NET_Core.Models.DataGrid
@model IEnumerable<SampleOrder>

@(Html.DevExtreme().DataGrid<SampleOrder>()
    .DataSource(Model)
    .KeyExpr("OrderID")
    .Columns(c => {
        c.AddFor(m => m.CustomerID);
        c.AddFor(m => m.OrderDate);
        c.AddFor(m => m.ShipCountry);
        c.AddFor(m => m.ShipCity);
        c.AddFor(m => m.CustomerName);
    })
)

DataGridController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASP.NET_Core.Models.DataGrid;

namespace ASP_NET_Core.Controllers {
    public class DataGridController : Controller {
        public IActionResult GettingStarted() {
            var model = new List<SampleOrder>() {
                new SampleOrder {
                    OrderID = 10248,
                    OrderDate = new DateTime(1996, 7, 4),
                    ShipCountry = "France",
                    ShipCity = "Reims",
                    CustomerName = "Paul Henriot"
                },
                new SampleOrder {
                    OrderID = 10249,
                    OrderDate = new DateTime(1996, 7, 5),
                    ShipCountry = "Germany",
                    ShipCity = "Münster",
                    CustomerName = "Karin Josephs"
                },
                new SampleOrder {
                    OrderID = 10250,
                    OrderDate = new DateTime(1996, 7, 8),
                    ShipCountry = "Brazil",
                    ShipCity = "Rio de Janeiro",
                    CustomerName = "Mario Pontes"
                }
            };

            return View(model);
        }
    }
}

DataGridModels.cs

using System;

namespace ASP.NET_Core.Models.DataGrid {
    public class SampleOrder {
        public int OrderID { get; set; }
        public DateTime OrderDate { get; set; }
        public string CustomerID { get; set; }
        public string CustomerName { get; set; }
        public string ShipCountry { get; set; }
        public string ShipCity { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Data Binding
  DataGrid can load and update data from different data source types. It handles large data sets and remote data efficiently.

• Various Edit Modes
  Edit DataGrid data in multiple modes, including form and popup modes.

• Filtering and Sorting
  Set up a filter row and header filter to filter data by column values, or use other ways to filter. You can sort DataGrid by single or multiple columns initially or at runtime.

• Grouping
  You can use a column header’s context menu or a group panel to group data in DataGrid.

• Virtual and Infinite Scrolling
  Enable virtual or infinite scrolling mode to reduce DataGrid load times and improve navigation with large datasets.

• Master–Detail View
  Use the masterDetail object to create a Master-Detail view in the DataGrid.

• State Persistence
  The DataGrid saves user changes like sorting, filtering, grouping, and column adjustments. These changes are automatically restored on reload.

• Total and Group Summaries
  Apply summaries to aggregate data by columns. Use a total summary to aggregate all data and a group summary to aggregate data on a group-by-group basis.

• Rich Customization
  DataGrid offers extensive appearance and behavior customization.

• Export to PDF and Excel
  Export grid data to Excel and PDF. Modify cell styles and other settings in the exported document to fit your needs.

API

Server-Side API

Initialization

Call the DataGrid() method to create a DataGrid control. This action initializes a DataGridBuilder<T> instance. Use the instance methods to specify DataGrid options and event handlers.

Options

For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the DataGrid options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme DataGrid options.

Methods

For a list of available methods, see DevExtreme DataGrid methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on DataGrid accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: DataGrid