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.
Syncfusion Feedback

Overview

The DataGrid control, or DataTable, for ASP.NET Core 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 control 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 data binding in ASP.NET Core DataGrid.

JavaScript array collection

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

Remote data binding in ASP.NET Core DataGrid.

Remote data binding

Binding a grid 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 Core DataGrid.

Extensible data handling

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

Hierarchical binding in ASP.NET Core DataGrid.

Hierarchical binding

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


Optimized for mobile

The DataGrid control is highly optimized to work on mobile devices.

Touch support in ASP.NET Core DataGrid.

Touch support

All grid 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 Core DataGrid.

Responsiveness

Responsive features allow the grid 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 Core DataGrid.

Adaptable pager UI

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


Editing

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

Types of edit modes in ASP.NET Core DataGrid.

Edit modes

The DataGrid control 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 Core DataGrid.

Bulk changes

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

ASP.NET Core DataGrid using custom edit UI.

Customizable edit UI

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


Aggregation

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 Core DataGrid aggregate row values using built-in aggregate types.

Built-in aggregate types

The DataGrid control 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 Core 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.


Paging

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

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

On-demand

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

Change page size using a drop-down in the ASP.NET Core DataGrid.

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 Core DataGrid customized pager UI.

Customizable pager UI

The pager UI can be customized using a pager template.


Filtering

Filtering allows data compaction. The DataGrid control 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.

Filter rows using Excel filter in ASP.NET Core DataGrid.

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 Core 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 Core DataGrid search data.

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


Sorting

Data grid 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 Core DataGrid sort rows by multiple columns.

Sort multiple columns

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

ASP.NET Core DataGrid apply custom sorting logic.

Customize sort comparer

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


Grouping

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

Group rows in ASP.NET Core 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 Core 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.


Selection

Rows or cells can be selected in a grid. 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 Core 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 Core DataGrid.

Check box selection

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


Templates

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


Column

Choose visible columns using column chooser in ASP.NET Core 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 Core DataGrid.

Reorder

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

Resize column width in ASP.NET Core DataGrid.

Resize

Change column width on the fly by simply dragging the right corner of the column header. The scroll bar will appear when the grid content width exceeds the element width.

Column menu in ASP.NET Core 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 Core DataGrid.

Freeze

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

Cell spanning in ASP.NET Core DataGrid.

Cell spanning

Data grid cells can be spanned based on the preferred criteria.

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

Foreign data source

Show values from external data sources or look up data sources in a column based on foreign key or 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 Core DataGrid.

Value accessors

The value accessors specify 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 Core DataGrid.

Cell styling

Data grid 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 a grid. It appears when a cell, header, or the pager is right-clicked. The context menu items can be customized according to user preference.


Clipboard

Selected rows and cells can be copied from a grid. Use the Ctrl+C and Ctrl+Shift+H keyboard combinations to copy grid 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.


Exporting

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

Excel, PDF, CSV export

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

Print ASP.NET Core DataGrid content.

Print

Print grid data either by using the print option from the toolbar or programmatically. All the rows in the grid 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.


Accessibility

Keyboard navigation in ASP.NET Core DataGrid.

Keyboard navigation

The DataGrid control 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 Core DataGrid.

Screen reader

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


Globalization and localization

Format dates and numbers in ASP.NET Core DataGrid.

Globalization

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

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

Right to left (RTL)

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

Localize ASP.NET Core DataGrid UI strings.

Localization

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


50+ ASP.NET CORE CONTROLS

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

Scroll up icon

Warning Icon 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.Close Icon