Skip to main content

DevExpress v24.1 Update — Your Feedback Matters

Our What's New in v24.1 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

How to: Create and Customize a GridLookUpEdit Control at Runtime

  • 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:

GridLookupEdit_ex

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;         
}