Data Binding

  • 5 minutes to read

DevExpress data-aware controls are compatible with any data access technology (ADO.NET, Entity Framework, XPO, etc.) and capable to display data from any data source that implements the IList, IBindingList, or ITypedList interface. Refer to these help topics for more details: Traditional Data Binding Methods and Data Binding Common Concepts. Note that Server and Instant Feedback Modes impose certain restrictions on data binding.

Data Grid (or any other DevExpress data-aware control) shows data from its source as is. If you need to display initially filtered or sorted records, or merge multiple data sources into one, do that at the data source level before you bind a data-aware control to this source.

Create a New Data Source

The quickest way to set up a new data source is to utilize the Data Source Configuration Wizard.

Data Source Wizzard First Page

Invoke this dialog through the Data Grid smart tag or by clicking the icon in the Grid's bottom left corner.

Grid Control - SQL Data Source - Wizard 1

The Wizard guides you through the binding process to the following supported sources.

The UnboundSource component allows you to mix different data source types or add virtual rows to a bound Data Grid.

For code-first data sources, it is possible to mark data class properties with Data Annotation Attributes to pre-customize a Grid (e.g., skip adding a column for a specific data field or change the type of its in-place editor).

Choose an Existing Data Source

If you already have a data source ready, use the Data Grid smart tag to select this source in the "Choose Data Source" editor.

Data Grid - Binding - Choose DS

In code, assign a valid source to the GridControl.DataSource property.


using System.Data.OleDb;
// ... 
// Create a connection object. 
OleDbConnection connection = new OleDbConnection(
  "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=E:\\DBs\\NWIND.MDB");

// Create a data adapter. 
OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT * FROM Products", connection);

// Create and fill a dataset. 
DataSet sourceDataSet = new DataSet();
adapter.Fill(sourceDataSet);

// Specify the data source for the grid control. 
gridControl1.DataSource = sourceDataSet.Tables[0];

Switch to Another Data Source

Once you have chosen a data source for the first time, the Data Grid automatically generates all required columns. Should you choose another data source later, previously created columns will remain and you'll need to update them manually. To do so, launch the Data Grid Designer, switch to the "Columns" tab and click the "Retrieve Fields" button.

Data Grid - Binding - Retrieve Fields

Post Changes to a Source

For most data source types, the Data Grid allows end-users to edit data at runtime, but these changes are not automatically saved to an underlying source. Refer to the Post Data to an Underlying Data Source article to learn how to support saving edits.

Fluent API Support

The traditional approach to customize grid columns or bind them to data assumes that you will be accessing columns using their string field names. If for any reason, it is impossible to populate grid columns at runtime or you need custom logic to obtain column settings, you can use fluent API instead. In this approach, the Visual Studio's IntelliSense allows you to observe all the data source properties and bind the required fields to grid columns.

This approach creates a fail-safe code when modifying the data source structure (e.g., removing a data source field) or a typo in a field name (attempts to access a field that does not exist) immediately causes an exception that cannot be missed. The traditional approach can ignore such errors in certain cases, creating 'dead' code that is hard to detect.

To use this functionality, refer to the XtraGrid.Extension namespace from your code.


using DevExpress.XtraGrid.Extensions;

Now, you can call the ColumnView.With method to add and configure columns. The following code snippet illustrates an example.


gridView1.With<Customer>(settings => {
                settings.Columns
                    .Add(f => f.ContactName, col => {
                        col.Caption = "Contact";
                        col.SortOrder = DevExpress.Data.ColumnSortOrder.Descending;
                        col.SortIndex = 0;
                    })
                    .Add((f => f.Phone), c => { c.Caption = "Phone Number"; })
                    .Add(p => p.CompanyName)
                        .WithCaption("Company Name")
                        .WithGrouping()
                        .With(col => { });
 });

With fluent API, you are also able to obtain existing columns and tweak their settings. To do so, use the ColumnView.GetColumnViewSettings method. For instance, the following code is the GridView.RowCellStyle event handler that identifies the column related to the row cell and fills it in red if the column is 'Phone'.


void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventArgs e) {
    GridColumn col = (sender as ColumnView).GetColumnViewSettings<Customer>().Columns[c => c.Phone].AsColumn();
        if((col!=null) && (e.Column == col)) {
        e.Appearance.BackColor = Color.Red;
    }
}
See Also