Setting a ComboBox for Use in a Field

Glossary Item Box

Infragistics(R) NetAdvantage(R) for WPF

Setting a ComboBox for Use in a Field

A popular editor to add to a Field is a ComboBox. Attaching a ComboBox to a Field allows end users to select new values for a Cell by selecting a value from a predefined list. To attach a ComboBox to a Field in the xamDataPresenter™, you need to make a custom ControlTemplate for the xamTextEditor™. Assign the custom ControlTemplate to the Field in the xamDataPresenter by setting the EditorStyle property off the FieldSettings object.

The following procedure assumes you have a data bound xamDataPresenter, where you want a field to allow for a combobox to be displayed to aid in the changing of the fields value. For more information, see Creating xamDataPresenter in XAML, the Employees.xml file is used instead of the Orders.xml.

  1. Define the ControlTemplate for xamTextEditor in the Grid Panel's Resource section. In the ControlTemplate, place the ComboBox inside a StackPanel for more control. The ComboBox's Text, and SelectedItem properties are all bound to the data shown in the grid. We then specify the items we want to show in the drop-down list when it appears. The following XAML defines the xamTextEditor's ControlTemplate.

    In XAML:

    <Style TargetType="{x:Type igEditors:XamTextEditor}" 
      x:Key="customComboBoxEditor">
    	<Setter Property="EditTemplate">
    		<Setter.Value>
    			<ControlTemplate TargetType="{x:Type igEditors:XamTextEditor}">
    				<StackPanel>
    					<ComboBox x:Name="cboComboboxEditor"
    					  Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay}"
    					  IsEditable="True"
    					  SelectedItem="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Text, Mode=TwoWay}">
    						<ComboBoxItem>Quality Assurance</ComboBoxItem>
    						<ComboBoxItem>Accounting</ComboBoxItem>
    						<ComboBoxItem>Development</ComboBoxItem>
    						<ComboBoxItem>Sales</ComboBoxItem>
    					</ComboBox>
    				</StackPanel>
    			</ControlTemplate>
    		</Setter.Value>
    	</Setter>
    </Style>
    </Grid.Resources>
    

  2. Create an instance of xamDataPresenter and name it.

    In XAML:

    <igDP:XamDataPresenter x:Name="XamDataPresenter1" 
      ...
      >
    	<igDP:XamDataPresenter.View>
    		<igDP:GridView/>
    	</igDP:XamDataPresenter.View>
      ...
    </igDP:XamDataPresenter>
    

  3. In between the xamDataPresenter tags, you need to place XAML to control the FieldLayoutSettings and FieldLayout. Off the FieldLayoutSettings, you need to set the AutoGenerateFields property to False so the xamDataPresenter won't attempt to generate the Fields. Specify the FieldLayouts. For more information on FieldLayouts and Fields, see Fields. The key for this topic is the Department Field. Off this Field, you specify the FieldSettings and the EditorStyle property is set to the StaticResource customComboBoxEditor, which is the Key to the ControlTemplate that you create earlier.

    In XAML:

    <igDP:XamDataPresenter.FieldLayoutSettings>
    	<igDP:FieldLayoutSettings AutoGenerateFields="False" />
    </igDP:XamDataPresenter.FieldLayoutSettings>
    <igDP:XamDataPresenter.FieldLayouts>
    	<igDP:FieldLayout>
    		<igDP:FieldLayout.Fields>
    			<igDP:Field Name="name" Label="Employee's Name"/>
    			<igDP:Field Name="department" Label="Department">
    				<igDP:Field.Settings>
    					<igDP:FieldSettings 
    					  EditorStyle="{StaticResource customComboBoxEditor}" />
    				</igDP:Field.Settings>
    			</igDP:Field>
    		</igDP:FieldLayout.Fields>
    	</igDP:FieldLayout>
    </igDP:XamDataPresenter.FieldLayouts>
    

  4. Build and run the project. There should be a ComboBox in the Department Field of the xamDataPresenter control similar to the image below.

E-mail your feedback on this topic.

Opinion about our help? Take our survey.

Copyright © 2003-2007 Infragistics, Inc. All rights reserved.

Build Version: 7.1.20071.1320