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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Define Columns in ASP.NET MVC DataGrid.

Define Columns

You can define columns explicitly to display the needed items in DataGrid. You can also enhance the appearance of columns by setting the header text, text alignment, cell value format, and width.

Auto generate columns

Columns can be auto generated from the data source. When column collection is not specified, DataGrid will create columns’ definition for the users by creating column object from the data source.

Auto generate columns in ASP.NET MVC DataGrid.

Auto size in ASP.NET MVC DataGrid.

Auto size

Users can interactively auto size column width to show its full content by double clicking on column borders. It also supports triggering auto sizing to the required columns programmatically.

Cell Attributes

Users can decorate each cell element of the DataGrid with their own attributes to customize styles, add additional class names, etc.

Cell Attributes in ASP.NET MVC DataGrid.

Text wrap using in ASP.NET MVC DataGrid.

Text wrap

Wraps the DataGrid cell text to the next line when it is too large to fit inside a cell. Users can wrap either the header or content cell`s text by setting the available wrap mode options.

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.

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

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 in the desired column position will reorder the columns.


Column resize allows changing column width on the fly by simply dragging the right corner of the column header. A scroll bar appears when the DataGrid content width exceeds the element width.

Resize column width in the ASP.NET MVC DataGrid.

Column menu in ASP.NET MVC DataGrid.

Column menu

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


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

Freeze rows and columns in ASP.NET MVC DataGrid.

Cell spanning in ASP.NET MVC DataGrid.

Column spanning

DataGrid cells can be spanned based on the preferred criteria.

Foreign data source

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

Foreign key column with look-up data in ASP.NET MVC DataGrid.

Custom value getter using value accessor in ASP.NET MVC 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

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

Cell styling in ASP.NET MVC DataGrid.


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