How to: Create a SearchLookUpEdit and Bind it to Data

  • 3 minutes to read

The SearchLookUpEdit editor combines the functionality of the LookUpEdit with the built-in Find box feature that allows you to quickly locate data.

This document demonstrates how to create a SearchLookUpEdit control and bind it to data.

Create a New Project and Add a SearchLookUpEdit

  1. Run MS Visual Studio.
  2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose the WPF Application.
  3. Add a LookUpEdit component to the project.

    To do this, open the Visual Studio toolbox, choose the LookUpEdit toolbox item and drop it onto the window.

    Toolbox LookUpEdit

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit VerticalAlignment="Top" HorizontalAlignment="Stretch" Name="searchLookUpEdit" Height="30" />
        </Grid>
    </Window>
    
    NOTE

    To apply the custom "Office2010Black" theme, manually add a reference to the DevExpress.Xpf.Core.v20.1.dll library.

  4. To enable the Find box feature, set the StyleSettings property to "SearchLookUpEditStyleSettings":

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit Name="searchLookUpEdit" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="30">
                <dxg:LookUpEdit.StyleSettings>
                    <dxg:SearchLookUpEditStyleSettings/>
                </dxg:LookUpEdit.StyleSettings>
            </dxg:LookUpEdit>
        </Grid>
    </Window>
    

Create Data Objects

Add a data source to your WPF Application. For this, follow the steps below.

  1. Open the Data menu and click the Add New Data Source item.

    DXGrid_GettingStarted1_02

  2. Choose a Database as a type of a data source.

    Data Source Type Window

  3. Then choose a Dataset as a Database Model.

    Database Model Type Window

  4. As a data source, choose the Microsoft Access Database File. As a data connection, choose the nwind database. By default, it is stored in the following path.C:\Users\Public\Documents\DevExpress Demos 20.1\Components\Data

    Data Connection Window

  5. In the Tables menu, choose Customers.

    DataBase Objects customers

  6. After this, click Finish to close the wizard.

Bind SearchLookUpEdit to Data

  1. Bind the SearchLookUpEdit to the data source. Add the following code.

    using System.Windows;
    
    namespace SearchLookUpEdit
    {
        public partial class MainWindow : Window
        {
            public MainWindow()
            {
                InitializeComponent();
                searchLookUpEdit.ItemsSource = new nwindDataSetTableAdapters.CustomersTableAdapter().GetData();
            }
        }
    }
    

    Set the ValueMember property to "CustomerID". Set the DisplayMember property to "ContactName":

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit
                    Name="searchLookUpEdit"
                    DisplayMember="ContactName"
                    ValueMember="CustomerID"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch"
                    Height="30">
                <dxg:LookUpEdit.StyleSettings>
                    <dxg:SearchLookUpEditStyleSettings/>
                </dxg:LookUpEdit.StyleSettings>
            </dxg:LookUpEdit>
        </Grid>
    </Window>
    
  2. To disable automatic column creation, set the AutoPopulateColumns property to "False". Create required columns and bind them to corresponding data fields:

    <Window x:Class="SearchLookUpEdit.MainWindow"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="MainWindow" Height="375" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid"
            xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" dx:ThemeManager.ThemeName="Office2010Black"
            xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
        <Grid>
            <dxg:LookUpEdit
                    Name="searchLookUpEdit"
                    AutoPopulateColumns="False"
                    DisplayMember="ContactName"
                    VerticalAlignment="Top"
                    HorizontalAlignment="Stretch"
                    Height="30">
                <dxg:LookUpEdit.StyleSettings>
                    <dxg:SearchLookUpEditStyleSettings/>
                </dxg:LookUpEdit.StyleSettings>
                <dxg:LookUpEdit.PopupContentTemplate>
                    <ControlTemplate>
                        <dxg:GridControl Name="PART_GridControl">
                            <dxg:GridControl.Columns>
                                <dxg:GridColumn FieldName="CompanyName"/>
                                <dxg:GridColumn FieldName="ContactName"/>
                                <dxg:GridColumn FieldName="ContactTitle"/>
                                <dxg:GridColumn FieldName="City"/>
                            </dxg:GridControl.Columns>
                            <dxg:GridControl.View>
                                <dxg:TableView AutoWidth="True"/>
                            </dxg:GridControl.View>
                        </dxg:GridControl>
                    </ControlTemplate>
                </dxg:LookUpEdit.PopupContentTemplate>
            </dxg:LookUpEdit>
        </Grid>
    </Window>
    
  3. Run the application to see the result.

    SearchLookUpEdit