How to: Create and Customize a GridLookUpEdit Control at Runtime

Nov 13, 2018
5 minutes to read

The following example demonstrates how to create and customize a GridLookUpEdit control at runtime.

In the example, a lookup editor is used to edit the values of the “ProductID” field in the “Order Details” table (the Northwind database). It must display a list of available products in the dropdown, which are stored in the “Products” table in the database. By selecting a row from the dropdown, an end user can change the current order’s product. Also, a data navigator will be created that will assist an end user to navigate through the “Order Details” table.

To implement the required functionality, the following key properties of the lookup editor must be set:

The editor’s BaseEdit.EditValue property is bound to the “ProductID” field in the “Order Details” table using the DataBindings property.
The editor’s RepositoryItemLookUpEditBase.DataSource property is set to a DataView object that contains rows from the “Products” table in the Northwind database.
The editor’s RepositoryItemLookUpEditBase.ValueMember property is set to the “ProductID” field in the “Products” table. This field’s value must match the editor’s edit value – the “ProductID” field in the “Order Details” table.
The editor’s RepositoryItemLookUpEditBase.DisplayMember property is set to the “ProductName” field in the “Products” table. This identifies the field in the DataSource whose values match the editor’s display text.
Two columns are created within the underlying View via the ColumnView.Columns property. These will display values from the “ProductID” and “ProductName” fields in the dropdown data source.

The result of the example is shown in the following image:

C#
VB.NET

csharp

using DevExpress.XtraEditors;
using DevExpress.XtraGrid.Columns;
using System.Data.OleDb;

// A lookup editor created at runtime.
GridLookUpEdit gridLookup;
// A navigator control to navigate the "Order Details" table.
DataNavigator dataNav;

// DataView for the "Order Details" table.
DataView dvMain;
// DataView for the "Products" table.
DataView dvDropDown;

//...

private void Form1_Load(object sender, System.EventArgs e) {
   gridLookup = new GridLookUpEdit();
   gridLookup.Bounds = new Rectangle(10, 40, 200, 20);
   this.Controls.Add(gridLookup);

   dataNav = new DataNavigator();
   dataNav.Bounds = new Rectangle(10, 10, 250, 20);
   this.Controls.Add(dataNav);

   InitData();
   InitLookUp();

   dataNav.DataSource = dvMain;
}

private void InitData() {
   // Dataset to provide data from the database
   DataSet ds = new DataSet();
   string connestionString = 
     "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\\DB\\nwind.mdb";

   // Connect to the "Order Details" table
   System.Data.OleDb.OleDbDataAdapter dbAdapter = 
     new OleDbDataAdapter("SELECT * FROM [Order Details]", connestionString);
   // Load data from the "Order Details" table to the dataset
   dbAdapter.Fill(ds, "Order Details");
   // Connect to the "Products" table
   dbAdapter = new OleDbDataAdapter("SELECT * FROM Products", connestionString);
   // Load data from the "Products" table into the dataset
   dbAdapter.Fill(ds, "Products");

   DataViewManager dvm = new DataViewManager(ds);               
   dvMain = dvm.CreateDataView(ds.Tables["Order Details"]);
   dvDropDown = dvm.CreateDataView(ds.Tables["Products"]);
}

private void InitLookUp() {
   // Bind the edit value to the ProductID field of the "Order Details" table;
   // the edit value matches the value of the ValueMember field.
   gridLookup.DataBindings.Add("EditValue", dvMain, "ProductID");

   // Prevent columns from being automatically created when a data source is assigned.
   gridLookup.Properties.PopupView.OptionsBehavior.AutoPopulateColumns = false;
   // The data source for the dropdown rows
   gridLookup.Properties.DataSource = dvDropDown;
   // The field for the editor's display text.
   gridLookup.Properties.DisplayMember = "ProductName";
   // The field matching the edit value.
   gridLookup.Properties.ValueMember = "ProductID";

   // Add two columns in the dropdown:
   // A column to display the values of the ProductID field;
   GridColumn col1 = gridLookup.Properties.PopupView.Columns.AddField("ProductID");
   col1.VisibleIndex = 0;
   col1.Caption = "Product ID";
   // A column to display the values of the ProductName field.
   GridColumn col2 = gridLookup.Properties.PopupView.Columns.AddField("ProductName");
   col2.VisibleIndex = 1;
   col2.Caption = "Product Name";

   // Set column widths according to their contents.
   gridLookup.Properties.PopupView.BestFitColumns();
   // Specify the total dropdown width.
   gridLookup.Properties.PopupFormWidth = 300;         
}

Imports DevExpress.XtraEditors
Imports DevExpress.XtraGrid.Columns
Imports System.Data.OleDb

 ' A lookup editor created at runtime.
Dim gridLookup As GridLookUpEdit
' A navigator control to navigate the "Order Details" table.
Dim dataNav As DataNavigator

' DataView for the "Order Details" table.
Dim dvMain As DataView
' DataView for the "Products" table.
Dim dvDropDown As DataView

'...

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) _
  Handles MyBase.Load
   gridLookup = New GridLookUpEdit()
   gridLookup.Bounds = New Rectangle(10, 40, 200, 20)
   Me.Controls.Add(gridLookup)

   dataNav = New DataNavigator()
   dataNav.Bounds = New Rectangle(10, 10, 250, 20)
   Me.Controls.Add(dataNav)

   InitData()
   InitLookUp()

   dataNav.DataSource = dvMain
End Sub

Private Sub InitData()
   ' Dataset to provide data from the database
   Dim ds As New DataSet()
   Dim connestionString As String = _
     "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\DB\nwind.mdb"

   ' Connect to the "Order Details" table
   Dim dbAdapter As New OleDbDataAdapter("SELECT * FROM [Order Details]", connestionString)
   ' Load data from the "Order Details" table to the dataset
   dbAdapter.Fill(ds, "Order Details")
   ' Connect to the "Products" table
   dbAdapter = New OleDbDataAdapter("SELECT * FROM Products", connestionString)
   ' Load data from the "Products" table into the dataset
   dbAdapter.Fill(ds, "Products")

   Dim dvm As New DataViewManager(ds)
   dvMain = dvm.CreateDataView(ds.Tables("Order Details"))
   dvDropDown = dvm.CreateDataView(ds.Tables("Products"))
End Sub

Private Sub InitLookUp()
   ' Bind the edit value to the ProductID field of the "Order Details" table;
   ' the edit value matches the value of the ValueMember field.
   gridLookup.DataBindings.Add("EditValue", dvMain, "ProductID")

   ' Prevent columns from being automatically created when a data source is assigned.
   gridLookup.Properties.PopupView.OptionsBehavior.AutoPopulateColumns = False
   ' The data source for the dropdown rows
   gridLookup.Properties.DataSource = dvDropDown
   ' The field for the editor's display text.
   gridLookup.Properties.DisplayMember = "ProductName"
   ' The field matching the edit value.
   gridLookup.Properties.ValueMember = "ProductID"

   ' Add two columns in the dropdown:
   ' A column to display the values of the ProductID field;
   Dim col1 As GridColumn = gridLookup.Properties.PopupView.Columns.AddField("ProductID")
   col1.VisibleIndex = 0
   col1.Caption = "Product ID"
   ' A column to display the values of the ProductName field.
   Dim col2 As GridColumn = gridLookup.Properties.PopupView.Columns.AddField("ProductName")
   col2.VisibleIndex = 1
   col2.Caption = "Product Name"

   ' Set column widths according to their contents.
   gridLookup.Properties.PopupView.BestFitColumns()
   ' Specify the total dropdown width.
   gridLookup.Properties.PopupFormWidth = 300
End Sub