Skip to main content

Create Columns and Bind Them to Data Properties

  • 4 minutes to read

Create Columns Automatically

At Design Time

Open the GridControl‘s Quick Actions. Select Generate Columns to generate columns for each data field in XAML. The FieldName property is used to bind each column to data.

Generate Columns Design Time

At Runtime

Use the DataControlBase.AutoGenerateColumns property to enable automatic column generation.

The grid generates columns for all properties in the data source. The order of columns is the same as the order of properties in the data source.

Once all columns are created and added to the collection, the grid fires the DataControlBase.AutoGeneratedColumns event. Handle this event to specify column settings (assign column editors, hide individual columns, and so on).

Create Columns Manually

Create GridColumn objects and add them to the GridControl.Columns collection.

Bind Columns to Data

Use the ColumnBase.FieldName and ColumnBase.Binding properties to bind columns to data source properties.

You cannot use both the Binding and the FieldName properties simultaneously if they refer to an existing data source property.

The FieldName Property

The FieldName property exhibits better performance than the Binding property because the GridControl obtains property values using PropertyDescriptor objects.

The following code shows how to use the FieldName property:

<dxg:GridControl x:Name="grid">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="ProductName"/>
        <dxg:GridColumn FieldName="UnitPrice"/>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TableView />
    </dxg:GridControl.View>
</dxg:GridControl>

Limitations:

  • Dynamic Object properties are not supported (binding to the ExpandoObject is supported).
  • Columns cannot access collection members.
  • Collection properties cannot be edited.
  • Only objects of the same type in the ItemsSource collection are supported.

    The GridControl caches the PropertyDescriptor object obtained from the collection type or the first data source item and uses it for all data source items.

  • A column ignores a nested property’s changes when the field name has a complex path (such as “ClientClasses.Count“). To avoid this limitation, set the DataControlBase.DetectNestedPropertyChanges property to true.

The Binding Property

You can use the Binding property to avoid the FieldName property’s limitations. The Binding property has the following limitations:

Columns with the specified Binding property are read-only. Set the binding’s Mode property to TwoWay to allow users to edit these columns.

The following XAML snippet shows how to use the Binding property:

<dxg:GridControl x:Name="grid"> 
    <dxg:GridControl.Columns> 
        <dxg:GridColumn Header="Unit Price" Binding="{Binding UnitPrice, Mode=TwoWay}"/>
        <dxg:GridColumn Header="Product Name" Binding="{Binding ProductName, Mode=TwoWay}"/>
    </dxg:GridControl.Columns> 
    <dxg:GridControl.View> 
        <dxg:TableView /> 
    </dxg:GridControl.View> 
</dxg:GridControl>

Note

When working with data structures that contain Dynamic Objects, use the ColumnBase.Binding property instead of the ColumnBase.FieldName property.

Code Behind Technique

The following example shows how to create a column and bind it to a data property:

  • With the GridColumn.FieldName property.

    using DevExpress.Xpf.Grid;
    // ...
    GridColumn column = new GridColumn();
    column.FieldName = "ProductName";
    grid.Columns.Add(column);
    
  • With the GridColumn.Binding property.

    using DevExpress.Xpf.Grid;
    // ... 
    GridColumn column = new GridColumn();
    Binding bindingExpression = new Binding("ProductName") { Mode=BindingMode.TwoWay };
    column.Binding = bindingExpression;
    gridControl1.Columns.Add(column);
    

To create columns for all properties in a data source, call the DataControlBase.PopulateColumns method. This method clears the grid’s GridControl.Columns collection, and repopulates it with columns or card fields that correspond to all properties in a data source.

Use the AddRange method to add a list of columns to the GridControl.Columns collection.

Create Columns in a ViewModel

You can define columns in a ViewModel and display them in the GridControl.

View Example: How to Bind the GridControl to a Collection of Columns Specified in a ViewModel

For more information, refer to the following help topic: How to: Bind the Grid to a Collection of Columns.

See Also