We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.


The DataGrid, or DataTable, for ASP.NET MVC is a feature-rich control used to display data in a tabular format. Its wide range of functionalities includes data binding, editing, filtering, grouping, paging, freezing rows and columns, aggregation of rows, and exporting to Excel, CSV, and PDF formats. It is designed and optimized for high performance. A high volume of data can be loaded without performance degradation by using row and column virtualization.

Data binding

The datagrid can be bound to data from a variety of data sources in the form of JavaScript object array collections. It uses the Essential JS 2 data manager to handle data and supports customizing data requests and processing.

Local databinding in ASP.NET MVC DataGrid

JavaScript array collection

The array of JavaScript objects can be bound to the datagrid, allowing it to work smoothly in single-page applications.

Remote databinding in ASP.NET MVC DataGrid

Remote data binding

Binding the datagrid with RESTful services allows data from services to be consumed using the Essential JS 2 data manager. It supports various data adaptors such as JSON, OData, ODataV4, URL, and Web API for working with a particular data service.

Extensible data handling in ASP.NET MVC DataGrid

Extensible data handling

Data handling is extensible in the datagrid. The appropriate events are raised with the datagrid state when data needs to be processed. Preferred data processing logic can be provided.

Hierarchical binding in ASP.NET MVC DataGrid

Hierarchical binding

The datagrid can be configured to show one-to-many relationship data using hierarchical binding. An n-level hierarchy datagrid can be built with minimal configuration that helps users to visualize data in parent and child relationships.

Optimized for mobile

The datagrid is highly optimized to work on mobile devices.

Touch support in ASP.NET MVC DataGrid

Touch support

All datagrid features will work on touch devices with zero configuration. This enables features such as sorting, grouping, and selection to be used without any customization.

Responsiveness in ASP.NET MVC DataGrid


Responsive features allow the datagrid layout to be viewed on various devices. It is also possible to hide specific columns for particular screen sizes using column-based media query support.

Adaptable pager UI in ASP.NET MVC DataGrid

Adaptable pager UI

The pager UI is adaptable in mobile views. When the datagrid is rendered in a smaller screen, the pager UI will be rendered without a page number list, making it suitable for smaller devices.


The datagrid provides full support for create, read, update, and delete operations. Editing can be enabled and customized with simple property settings.

Type of edit modes in ASP.NET MVC DataGrid

Edit modes

The datagrid supports various edit modes such as inline, dialog, and batch edit. These provide an interactive UI to add and edit records. In addition, editing can be performed programmatically.

Batch editing and saving bulk changes in ASP.NET MVC DataGrid

Bulk changes

Bulk changes allow saving added, edited, and deleted records in a single request. This feature can be used in a datagrid through batch editing mode, which provides an Excel-like editing experience and saves the changes in bulk.

ASP.NET MVC DataGrid using custom edit UI

Customizable edit UI

An editor for a datagrid cell can be specified by providing the edit type. The preferred editor can also be defined for specific columns.


Aggregates for column values can be easily visualized using the aggregate feature. Aggregates can be customized to display their value in individual summary rows, individual group summary rows, or in group caption rows.

ASP.NET MVC DataGrid aggregate row values using built-in aggregate types

Built-in aggregate types

The datagrid relies on the Essential JS 2 data manager to aggregate column values. Default aggregate types such as sum, max, min, average, and count can be used. Aggregate values can be formatted before being displayed in the cell.

ASP.NET MVC DataGrid aggregate value using user-defined or custom aggregate

User-defined aggregate types

Custom aggregate logic can be provided for a column. This requires a custom aggregate function that holds custom logic to calculate the aggregate value.


Through paging, a segment of data can be viewed from the assigned data source.

ASP.NET MVC DataGrid on-demand data loading using paging


The pager UI of the datagrid can be used to request on-demand data based on page details. Using simple properties, the pager can be customized.

ASP.NET MVC DataGrid change page size using drop-down

Page size drop-down

The page size can be changed on the fly using the page size drop-down in the pager. The page size values in the drop-down can be customized.

ASP.NET MVC DataGrid customized pager UI

Customizable pager UI

The pager UI can be customized using a pager template.


Filtering allows data compaction. The datagrid supports various filter types such as filter bar, menu, check box, and Excel-like filter. The appropriate filter type can be chosen based on the application. Options to customize filter operators, case sensitivity, and diacritics are also available.

ASP.NET MVC DataGrid filter rows using Excel filter

Powerful Excel-like filter

The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a check box list. Additionally, the advanced filter can be used to build complex filter criteria.

ASP.NET MVC DataGrid customized filter UI

Extensible filter UI

Filter UI and logic for a column will be applied based on the column type. It is possible to use a preferred filter UI and filtering logic for a column.

ASP.NET MVC DataGrid search data

DataGrid rows can be searched either by using the built-in search box available in the toolbar or programmatically. The search options can be customized.


DataGrid rows can be sorted against a column simply by clicking the desired column header. The data can be sorted either in ascending or descending order.

ASP.NET MVC DataGrid sort rows by multiple columns

Sort multiple columns

Sort datagrid rows using multiple columns by clicking the desired column headers and holding Ctrl or Command.

ASP.NET MVC DataGrid apply custom sort logic

Customize sort comparer

Sorting logic for a column can be user-defined. The custom sort comparer can use the preferred sorting logic.


The datagrid supports grouping to visualize data in an organized way. Data can be grouped in ascending or descending order. Rows can be grouped by dragging and dropping the desired columns in the interactive drop area.

Group rows in ASP.NET MVC DataGrid

N-level column grouping

N-level grouping can be performed without any restrictions. Hiding or showing grouped columns can also be defined.

Group rows by format in ASP.NET MVC DataGrid

Group by format

By default, grouping will be done based on the field value. A column can be grouped by the formatted value instead of the raw value to make viewing formatted date columns easier.


Rows or cells can be selected in the datagrid. One or more rows or cells can also be selected by holding Ctrl or Command, or programmatically.

Select range of cells and rows in ASP.NET MVC DataGrid

Range selection

A range of cells can be selected by dragging the pointer over cells. This helps in selecting rows or cells to be copied to the clipboard.

Select rows using check box column in ASP.NET MVC DataGrid

Check box selection

Check box selection allows the selection of rows using a check box column. This selection can persist even after other datagrid actions are performed. All the rows can also be selected by using the header Select All check box.


Templates can be used to create custom user experiences in the datagrid. The datagrid provides various template options, including templates for headers, columns, rows, detail rows, and toolbars.


Choose visible columns using column chooser in ASP.NET MVC DataGrid

Column chooser

The column chooser provides a list of column names paired with check boxes that allow the visibility to be toggled on the fly. This helps users control the column visibility through an interactive UI.

Reorder columns in ASP.NET MVC DataGrid


In the datagrid, columns can be reordered either through user interaction or programmatically. Simply dragging and dropping a column header into the desired column position will reorder the columns.

Resize column width in ASP.NET MVC DataGrid


Resizing allows changing column width on the fly by simply dragging the right corner of the column header. The scroll bar will appear when the datagrid content width exceeds the element width.

Column menu in ASP.NET MVC DataGrid

Column menu

Various column-based actions can be performed with the help of the column menu. The menu items can also be customized to list only preferred actions.

Freeze rows and columns in ASP.NET MVC DataGrid


Columns and rows can be frozen to allow scrolling and comparing cell values.

Cell spanning in ASP.NET MVC DataGrid

Cell spanning

DataGrid cells can be spanned based on the preferred criteria.

Foreign key column with lookup data in ASP.NET MVC DataGrid

Foreign data source

It is possible to show values from external or lookup data sources in a column based on foreign key/value mapping. Sorting, filtering, editing, grouping, and other operations can be performed in the foreign data column.

Custom value getter using value accessor in ASP.NET MVC DataGrid

Value accessors

The value accessors specifies how the cell value is to be retrieved from the data. The preferred value accessors can be used when the row data is not just a simple object.

Cell styling in ASP.NET MVC DataGrid

Cell styling

DataGrid cell styles can be customized either by using CSS or programmatically.

Context menu

The context menu provides a list of actions to be performed in the datagrid. It appears when a cell, header, or the pager is right-clicked. The context menu items can be customized according to user preference.


Selected rows and cells can be copied from the datagrid. Use the Ctrl+C and Ctrl+Shift+H keyboard combinations to copy datagrid data with and without headers, respectively.

Stacked headers

Stacked headers allow grouping and visualizing column headers in a stacked manner. There is no limit to the number of columns that can be grouped. The data columns can still be grouped, sorted, and filtered.

Row height

Row heights can be adjusted to visualize more rows in the view port. It is also possible to set row height conditionally.


Export to PDF, CSV, and Excel formats in ASP.NET MVC DataGrid

Excel, PDF, CSV export

Export datagrid data to Excel, PDF, and CSV formats. The exported document can also be customized programmatically. This allows data from the datagrid to be used in other applications.

Print ASP.NET MVC DataGrid content


Print datagrid data either by using the print option from the toolbar or programmatically. All the rows in the datagrid will be printed regardless of paging. It is also possible to print the current view page only. The scroll bar will be removed before printing.


Keyboard navigation in ASP.NET MVC DataGrid

Keyboard navigation

The datagrid ensures that every cell is accessible using the keyboard. Major features like sorting, selection, and editing can be performed using keyboard commands alone, no mouse interaction required. This helps in creating highly accessible applications using the datagrid component.

Accessibility and screen reader support in ASP.NET MVC DataGrid

Screen reader

All datagrid cells are added with ARIA attributes to help them be recognized when using a screen reader.

Globalization and localization

Format date and number in ASP.NET MVC DataGrid


The datagrid enables users from different locales to use it by formatting the date, currency, and numbering to suit locale preferences. The datagrid uses the Essential JS 2 internalization library for handling value formatting.

Show right-to-left language in ASP.NET MVC DataGrid

Right to left (RTL)

The datagrid supports right-to-left rendering, allowing the text direction and layout of the datagrid to be displayed from right to left. This improves the user experience and accessibility RTL languages.

Localize ASP.NET MVC DataGrid UI strings


All the datagrid strings in the user interface can be localized as needed. The datagrid uses the Essential JS 2 localization library to localize UI strings.


Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.