Skip to main content
BuyLog In
.NET Multi-platform App UI
Search in…
Docs > Data Grid > Columns and Rows
All docs
V23.2
.NET Multi-platform App UI
Get Started (NuGet, Project Templates, and First App)
Featured Scenarios
Common Concepts
Data Grid
Get Started
Columns and Rows
Edit Cell Values in In-Place Mode
Data Validation
Data Summaries
Filtering
Sorting
Grouping
CRUD Operations
Pull to Refresh
Load More
Swipe Actions
Drag-and-Drop Operations
Export Data
Custom Appearance
Examples
Data Editors
Data Form
Collection View
HTML Edit
PDF Viewer
Form Items
Shimmer View
Image & ImageEdit
Slider & Range Slider
Radial Gauge
Radial Progress Bar
Charts
Scheduler & Calendar
Dialogs, Menu, & Navigation
Chips
Utility Controls
Layouts
Reporting
Office File API
Backend Web API Service / REST API
Migrate from Xamarin
Breaking Change Policy
API Reference

Columns and Rows

  • 7 minutes to read

Columns

DataGridView displays data source properties as columns. It automatically generates columns based on a bound data source. The AutoGenerateColumnsMode property specifies how DataGridView generates columns or prevents columns from automatically being generated.

You can also add columns to DataGridView and associate them with data source properties manually. DataGridView stores its columns in the DataGridView.Columns collection. An individual column is a GridColumn class descendant that corresponds to the column’s data type.

Supported Column Types

NumberColumn
A grid column used to display and edit numeric values.
TextColumn
A grid column used to display and edit text values.
AutoCompleteColumn
A grid column used to display and edit text values. The column suggests values as a user types in a cell.
ComboBoxColumn
A grid column used to display and edit text values. The column displays a drop-down list that contains available values.
DateColumn
A grid column used to display and edit date values.
TimeColumn
A grid column used to display and edit the time.
CheckBoxColumn
A grid column that displays Boolean values and allows a user to change a cell value by switching between two states.
ImageColumn
A grid column used to display images.
PickerColumn
A grid column that allows a user to edit a cell value by selecting an item from the predefined set.
TemplateColumn
A column type that allows you to define a custom template for column cells.

The GridColumn.FieldName property specifies the data source field to which the column is bound. Each column object has a set of properties to adjust column settings (for example, data display format, column width, header caption, content alignment) and manage grid data (sort and group).

Fix Grid Columns

DataGridView allows you to anchor (fix) columns to its left or right edge, so they always remain visible while a user scrolls the view horizontally. To fix a column, set its GridColumn.FixedStyle property to Start or End.

Example: Add Grid Columns Manually

This example shows how to create columns in DataGridView to display different types of data:

View Example

<dxg:DataGridView ItemsSource="{Binding Employees}" EditorShowMode="DoubleTap">
    <dxg:DataGridView.Columns>
        <dxg:ImageColumn FieldName="Photo"  
                         Width="100" VerticalContentAlignment="Center"/>
        <dxg:TemplateColumn FieldName="Name" Caption="Employee" 
                            IsReadOnly="true" AllowSort="False" MinWidth="200">
            <dxg:TemplateColumn.DisplayTemplate>
                <DataTemplate>
                    <Grid VerticalOptions="Center" Padding="15, 0, 0, 0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding Item.Name}" FontAttributes="Bold" FontSize="Medium" Grid.Row="0" />
                        <Label Text="{Binding Item.Position, StringFormat = 'Job Title: {0}'}"
                               FontSize="Small" Grid.Row="1"/>
                        <Label Text="{Binding Item.HireDate, StringFormat = 'Hire Date: {0:d}'}" 
                               FontSize="Small" Grid.Row="2" />
                    </Grid>
                </DataTemplate>
            </dxg:TemplateColumn.DisplayTemplate>
        </dxg:TemplateColumn>
        <dxg:TextColumn FieldName="Phone" 
                        MinWidth="130" VerticalContentAlignment="Center" />
        <dxg:TextColumn FieldName="Address" 
                        MinWidth="150" VerticalContentAlignment="Center" />
        <dxg:DateColumn FieldName="BirthDate" 
                        MinWidth="120" DisplayFormat="d" VerticalContentAlignment="Center"/>
        <dxg:PickerColumn FieldName="Access" Caption="Access Level" 
                          MinWidth="140" VerticalContentAlignment="Center"/>
        <dxg:CheckBoxColumn FieldName="OnVacation" 
                            MinWidth="130" VerticalContentAlignment="Center"/>
    </dxg:DataGridView.Columns>
</dxg:DataGridView>

Unbound Columns

In addition to columns bound to data source properties, you can create unbound columns to display data values calculated based on values of other columns. To create an unbound column in the grid, add a column object that corresponds to the type of data the column should display to the DataGridView.Columns collection, and set the following column properties:

FieldName
A unique string that does not match any field name in the grid’s underlying data source.
UnboundType
The type of data the column should display (Boolean, DateTime, Decimal, Integer, String, or Object).
UnboundExpression
A formula (string expression) that automatically calculates column values. The DataGridView.CustomUnboundData event is another way to populate an unbound column with data. It allows you to implement custom logic of any complexity to supply cell values. Also, use this event (not an expression) if you need to save changes that a user made in an unbound column.

Refer to the following help topic to learn how to implement column chooser functionality: DataGrid Column Chooser.

Column Chooser Featured Scenario

Rows

Data rows in the grid display records from the data source.

The grid automatically adjusts data row height to display the entire content of a cell. If you specify the DataGridView.RowHeight property, all data rows have the same height.

Grid Data Rows

When data is grouped, the grid also displays group rows to separate groups of data rows. Users can tap group rows to expand and collapse groups. The DataGridView.GroupRowHeight property changes the height of group rows.

Grid Group Rows

For more information on how to group data grid rows, refer to the following help topic: How to Group Rows in DevExpress Data Grid for .NET MAUI.

Row Handles

Grid rows are identified by unique integer values – row handles. Each row has a row handle, regardless of whether the row is currently visible (for example, the row might be scrolled off-screen or hidden within a collapsed group).

A row handle depends on the row’s current location in the grid and changes dynamically when rows are reordered (for example, when data is sorted or grouped).

  • Data row handles are zero-based indexes that correspond to row order from top to bottom.
  • Group row handles are negative values that start with -1. The order matches group row order from top to bottom.

Grid Row Handles

The grid exposes the following methods and properties to obtain row handles:

FindRowHandle(Predicate<Object> predicate)
Returns the handle of the first row that matches the specified criteria.
FindRowHandle(string fieldName, object value)
Searches for the value in the column and returns the handle of the corresponding row.
FindRowHandle(Object item)
Returns the handle of the DataGridView row that corresponds to a data object passed in the parameters.
GetRowHandle
Returns the handle of the row that corresponds to the specified record in the data source.
GetChildRowHandle
Returns the handle of a row at the specified position within the specified group.
SelectedRowHandle
Gets or sets the selected row handle. This is a bindable property.

You can pass row handles as parameters to the following methods that operate with rows:

GetCellValue
Returns the value of the specified data cell.
SetCellValue
Sets the specified cell’s value.
GetRowItem
Returns an object that represents a record in the grid’s underlying data source.
GetRowItemBySourceIndex
Returns the data source object by its index.
DeleteRow
Deletes the specified data row.
ScrollToRow
Scrolls the grid to make the specified row visible.
GetGroupValue
Returns an actual value displayed in the specified group row (group header).
GetGroupDisplayText
Returns an actual or formatted value displayed in the specified group row (group header).
GetGroupSummaryValue
Returns a summary value calculated against the specified group of rows.
GetChildRowCount
Returns the number of data rows in a specific group.
IsGroupCollapsed
Indicates whether the specified group row is collapsed.
CollapseGroupRow
Collapses the specified group of rows.
ExpandGroupRow
Expands the specified group of rows.

Cells

The grid displays data values in cells located at the intersection of columns and rows. Use the following methods and properties to obtain and set cell values, and prevent users from changing cell values:

GetCellValue
Returns the value of the specified data cell.
GetCellDisplayText
Gets the text displayed within the specified cell.
SetCellValue
Sets the specified cell’s value.
IsReadOnly
Gets or sets whether the grid is read-only. This is a bindable property.

Edit Cell Data

Users can use in-place editors to change cell data. Use the DataGridView.EditorShowMode property to specify a gesture that invokes an in-place editor for a cell. The DataGridView automatically determines the editor type based on the type of a column to which a cell belongs. Note a TemplateColumn requires you to manually assign an in-place editor.

For more information about in-place editing, refer to the following topic: Edit Cell Values in In-Place Mode.

Users can also edit cell data in detached forms. For more information on how to implement and invoke an edit form, refer to the following help topics: Show Built-In Forms to Display, Create, and Edit Items and Customize CRUD Forms.