Welcome to the Xceed Community Sign in | Join | Help
Community Search  

Combobox column item display different from value

Sort Posts: Previous Next
  •  04-27-2008, 7:13 PM Post no. 11773

    Combobox column item display different from value

    I have a combobox column that allows the user to select an item from a drop down. How can I differentiate between what the user sees and the value selected? For example, in the database I want to store "NW", but I want the user to see "NorthWest". Is there a way I can have two lists, one that stores the abbreviation and the other the verbose term:

    List<String> shortList = new List<String>();

    shortList.Add("NW");

    shortList.Add("N");

    ...

    List <String> longList = new List<String>();

    longList.Add("NorthWest");

    longList.Add("North");

    ...

     

    The code I use to load my combo boxes looks like this:

                List<String> itemList = new List<String>();
                itemList.Add("NW");
                itemList.Add("N");
                itemList.Add("NE");
                itemList.Add("E");
                itemList.Add("SE");
                itemList.Add("S");
                itemList.Add("SW");
                itemList.Add("W");

                Binding binding = new Binding();
                binding.Source = itemList;

                FrameworkElementFactory factory = new FrameworkElementFactory(typeof(ComboBox));
                factory.SetValue(ComboBox.ItemsSourceProperty, binding);

                Xceed.Wpf.DataGrid.Markup.CellEditorBindingExtension cellEditorBindingExtension = new Xceed.Wpf.DataGrid.Markup.CellEditorBindingExtension();
                factory.SetValue(ComboBox.SelectedValueProperty, cellEditorBindingExtension.ProvideValue(null) as BindingBase);

                DataTemplate editTemplate = new DataTemplate(typeof(ComboBox));
               
                editTemplate.VisualTree = factory;

                CellEditor cellEditor = new CellEditor();
                cellEditor.EditTemplate = editTemplate;
                dataGridControl.Columns[0].CellEditor = cellEditor;

    I would think I would want to do something like this:

                Binding shortBinding = new Binding();
               
    shortBinding .Source = shortList;

                FrameworkElementFactory factory = new FrameworkElementFactory(typeof(ComboBox));
                factory.SetValue(ComboBox.ItemsSourceProperty,
    shortBinding);

                Binding longBinding = new Binding();
               
    longBinding .Source = longList;


                factory.SetValue(ComboBox.SelectedValueProperty,
    longBinding);
     

    However, if I do that I lose the CellEditorBindingExtension object, which, I believe, makes the whole thing work properly when the user makes a selection from the list. Even if I could store the items in a class which just had a ShortName and a LongName property and I could just specify which property to use for the display and the value, that would work for my purposes.

    What is the best way to accomplish this? 

  •  04-28-2008, 4:30 AM Post no. 11780 in reply to 11773

    Re: Combobox column item display different from value

    If you had a class which has a ShortName and LongName property, the following should work:

    List<BindingClass> bindingList = values..

                DataTemplate myEditorTemplate = new DataTemplate();
                myEditorTemplate.VisualTree = new FrameworkElementFactory(typeof(ComboBox));
                myEditorTemplate.VisualTree.SetValue(ComboBox.ItemsSourceProperty, bindingList);
                myEditorTemplate.VisualTree.SetValue(ComboBox.SelectedValuePathProperty, "ShortName");
                myEditorTemplate.VisualTree.SetValue(ComboBox.DisplayMemberPathProperty, "LongName");
                CellEditorBindingExtension cellbinding = new CellEditorBindingExtension();
                myEditorTemplate.VisualTree.SetBinding(ComboBox.SelectedValueProperty, (BindingBase)cellbinding.ProvideValue(null));
                CellEditor cellEdit = new CellEditor();
                cellEdit.EditTemplate = myEditorTemplate;

                dataGridControl.Columns[0].CellEditor = cellEditor;

    Hope that helps!

    Cheerios,

    Serene
     


    "ASCII and ye shall receive."
  •  04-28-2008, 9:38 AM Post no. 11786 in reply to 11780

    Re: Combobox column item display different from value

    Thanks, Serene! That worked. The only problem is, when focus isn't on that field (in other words the user isn't selecting a new value), the short value (NW) is shown. This wasn't really covered in the scope of my original question, but is there a way for the field to show the long value even if the user hasn't initiated a drop-down? I don't want the user to ever see the short version.

    Thanks again!

     

    EDIT:
    Also, why can't I mark Serene's post as the answer? I only have the option to mark this post as the answer.
     

  •  04-28-2008, 10:33 AM Post no. 11797 in reply to 11786

    Re: Combobox column item display different from value

    Hi Mike,

    You will also need to change the CellContentTemplate to display the long value rather than the short. The SolidFoundation sample demonstrates how to do this for the "ShipVia/Shippers" column.

    As for the "Mark as answer" option, I will look into it.


    Technical Writer - Xceed Software

    Of all the things I've lost, I miss my mind the most. - Mark Twain
    Filed under:
  •  04-28-2008, 10:47 AM Post no. 11799 in reply to 11786

    Re: Combobox column item display different from value

    Hmm... I get shown the short value only after I make a selection (which is unfortunately something that I have not yet gotten past Sad)

    But otherwise, the long value is shown by default.

    I vaguely remember having this similar problem with a previous version of the grid though... do you have the latest updated version
     


    "ASCII and ye shall receive."
  •  04-28-2008, 11:41 AM Post no. 11804 in reply to 11799

    Re: Combobox column item display different from value

    The latest package can be download here.
    Technical Writer - Xceed Software

    Of all the things I've lost, I miss my mind the most. - Mark Twain
  •  04-28-2008, 2:18 PM Post no. 11810 in reply to 11804

    Re: Combobox column item display different from value

    Thank you for the responses.

    I downloaded the grid less than a week ago, so I'm pretty sure I have the latest version.

    I definitely see the short version unless I've made a selection, at which time I see the long version.  Once I move off the row the short value returns.

    I'm sifting through SolidFoundation, but I'm finding it difficult to determine what is going on because of the size of the sample. This is what I've found:


          <DataTemplate x:Key="shipperGroupValueDataTemplate">
             <local:ShipperIDDictionary Key="{TemplateBinding Content}"
                                        ContentTemplate="{StaticResource shipperGroupDataTemplate}">
             </local:ShipperIDDictionary>
          </DataTemplate>

    I'm really not sure how this is applicable to my problem, but I'm still new to XAML so maybe I'm just missing something. I think once I can figure out what's going on in XAML (and I'm sure there's more to it than the above snippet but there's a ton of XAML in that sample and it's difficult to find out what everything does), I can start to translate what I need to know to work a solution in code.


    Is there a chance, though, that I can do something similar to what I've already done? It looks like both the CellEditor and the CellContentTemplate both take a DataTemplate object. I've tried to construct a DataTemplate object for the CellContentTemplate in a manner similar to that of the EditTemplate but I'm not entirely sure what type it should be and what exactly to bind. This is what I'm using for the CellEditor:


                DataTemplate editTemplate = new DataTemplate(typeof(ComboBox));

                Xceed.Wpf.DataGrid.Markup.CellEditorBindingExtension cellEditorBindingExtension = new Xceed.Wpf.DataGrid.Markup.CellEditorBindingExtension();

                editTemplate.VisualTree = new FrameworkElementFactory(typeof(ComboBox));
                editTemplate.VisualTree.SetValue(ComboBox.DisplayMemberPathProperty, "Long");
                editTemplate.VisualTree.SetValue(ComboBox.ItemsSourceProperty, binding); // Bound to my list of direction items
                editTemplate.VisualTree.SetValue(ComboBox.SelectedValueProperty, cellEditorBindingExtension);
                editTemplate.VisualTree.SetValue(ComboBox.SelectedValuePathProperty, "Short");

     Can something similar not be done for the CellContentTemplate? I found this in SolidFoundation:

          <DataTemplate x:Key="shipperDataTemplate">
             <TextBlock Text="{Binding CompanyName}"
                        TextTrimming="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type xcdg:Cell}}, Path=ParentColumn.TextTrimming}"
                        TextWrapping="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type xcdg:Cell}}, Path=ParentColumn.TextWrapping}"/>
          </DataTemplate>

    Should I maybe set my DataTemplate to a TextBlock and then somehow bind its TextProperty to the Long property of my type? I tried doing that, but couldn't quite get it (as there is no TextPathProperty), but I think I'm still missing some steps so I'm probably not as close as I think.

  •  04-28-2008, 3:19 PM Post no. 11814 in reply to 11810

    Re: Combobox column item display different from value

    The main issue in this scenario is that there is no SelectedValuePath/ItemsSource equivalent for the TextBlock that is used as the CellContentTemplate. In the SolidFoundation sample, a DataTable dictionary was created to workaround this problem. The DataTableDictionary and ShipperIDDictionary classes are there for that reason. That said, add them both to your project and define you CellContentTemplate in the following manner (I have simplified the code from the SolidFoundation sample)

       <Grid xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid">
          <Grid.Resources>
             <xcdg:DataGridCollectionViewSource x:Key="cvs_orders"
                                                Source="{Binding Source={x:Static Application.Current},
                                                             Path=Orders}" />
          </Grid.Resources>

          <xcdg:DataGridControl x:Name="OrdersGrid"
                                ItemsSource="{Binding Source={StaticResource cvs_orders}}">
             <xcdg:DataGridControl.Columns>
                <xcdg:Column FieldName="ShipVia">
                   <xcdg:Column.CellContentTemplate>
                      <DataTemplate>
                         <local:ShipperIDDictionary Key="{TemplateBinding Content}"
                                                    MinHeight="22">
                            <local:ShipperIDDictionary.ContentTemplate>
                               <DataTemplate>
                                  <TextBlock Text="{Binding CompanyName}" />
                               </DataTemplate>
                            </local:ShipperIDDictionary.ContentTemplate>
                         </local:ShipperIDDictionary>
                      </DataTemplate>
                   </xcdg:Column.CellContentTemplate>
                   <xcdg:Column.CellEditor>
                      <xcdg:CellEditor>
                         <xcdg:CellEditor.EditTemplate>
                            <DataTemplate>
                               <ComboBox BorderThickness="0"
                                         Background="Transparent"
                                         Foreground="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=(TextElement.Foreground)}"
                                         MinHeight="22"
                                         VerticalContentAlignment="Top"
                                         SelectedValuePath="ShipperID"
                                         ItemsSource="{Binding Source={x:Static Application.Current},Path=Shippers}"
                                         SelectedValue="{xcdg:CellEditorBinding}">
                                  <ComboBox.ItemTemplate>
                                     <DataTemplate>
                                        <TextBlock Text="{Binding Path=CompanyName}" />
                                     </DataTemplate>
                                  </ComboBox.ItemTemplate>
                                  <ComboBox.Resources>
                                     <Style TargetType="Popup">
                                        <Setter Property="TextElement.Foreground"
                                                Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
                                     </Style>
                                  </ComboBox.Resources>
                               </ComboBox>
                            </DataTemplate>
                         </xcdg:CellEditor.EditTemplate>
                         <xcdg:CellEditor.ActivationGestures>
                            <xcdg:KeyActivationGesture SystemKey="Down"
                                                       Modifiers="Alt" />
                            <xcdg:KeyActivationGesture Key="Up"
                                                       Modifiers="Alt" />
                            <xcdg:KeyActivationGesture Key="F4" />
                            <xcdg:KeyActivationGesture Key="Space" />
                         </xcdg:CellEditor.ActivationGestures>
                      </xcdg:CellEditor>
                   </xcdg:Column.CellEditor>
                </xcdg:Column>
             </xcdg:DataGridControl.Columns>
          </xcdg:DataGridControl>
       </Grid>


    Technical Writer - Xceed Software

    Of all the things I've lost, I miss my mind the most. - Mark Twain
  •  04-28-2008, 3:59 PM Post no. 11817 in reply to 11814

    Re: Combobox column item display different from value

    Thank you, Jenny. I appreciate your time.
  •  04-28-2008, 4:03 PM Post no. 11818 in reply to 11817

    Re: Combobox column item display different from value

    Glad I could help Smile

     


    Technical Writer - Xceed Software

    Of all the things I've lost, I miss my mind the most. - Mark Twain
  •  05-11-2008, 6:44 AM Post no. 12153 in reply to 11818

    Re: Combobox column item display different from value

    I have similar situation except I use observable collection as table data source. I've made dictionary with id/value (int/string) pairs which i use as combo box items source. I just don't know, how to create cell data template to display value and not int (observable collection item id). My column definition in C#:

    DataTemplate template = new DataTemplate();
    FrameworkElementFactory factory = new FrameworkElementFactory(typeof(ComboBox));
    factory.SetValue(ComboBox.ItemsSourceProperty, PList);
    factory.SetValue(ComboBox.DisplayMemberPathProperty, "Value");
    factory.SetValue(ComboBox.SelectedValuePathProperty, "Key");
    CellEditorBindingExtension binding = new CellEditorBindingExtension();
    factory.SetValue(ComboBox.SelectedValueProperty, binding);
    template.VisualTree = factory;

    Column column = this.Table.Columns["payee_id_fk"];
    CellEditor cellEditor = new CellEditor();
    cellEditor.EditTemplate = template;
    column.CellEditor = cellEditor;
    column.CellContentTemplate = this.grid1.FindResource("payeeCellDataTemplate") as DataTemplate;
    column.CellEditorDisplayConditions = CellEditorDisplayConditions.MouseOverCell;
    column.Title = "Payee";

    And xaml part:

    <!--A data template that I want to represent a payee with its name-->
      <DataTemplate x:Key="payeeCellDataTemplate">
        <TextBlock Text="{Binding}"
          TextTrimming="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type xcdg:Cell}}, Path=ParentColumn.TextTrimming}"
          TextWrapping="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type xcdg:Cell}}, Path=ParentColumn.TextWrapping}"/>
      </DataTemplate>

    When not in editor, the displayed value is int (actualy foreign key). When I enter edit mode (on mouse over), editor (combo box) is displayed exactly as I want. Even when I change value, it is also writen in observable collection (as I want). But when I leave editing, cell displayed value is back on Int.

     My question is, how to change cell data template to show value (text) part of dictionary item when not in edit mode. Is this possible?


     

     

View as RSS news feed in XML
Contact | Site Map | Reviews | Legal Terms of Use | Trademarks | Privacy Statement Copyright 2008 Xceed Software Inc.