Re: WPF Editable ComboBox In GridView - WPF Discussion Boards

3-Nov-11 13:18

I cannot seem to find what I'm looking for....

I need to provide a grid with 2 columns: Item and Quantity.

In the Item column I want to have an editable combobox so that the user can pick an item from the list or type something in. The value they type in does not have to be the combo's data collection.

I'm not sure how to do this so I don't know what to search for. Anyone done this? Got an example?

Many thanks

Everything makes sense in someone's mind

SledgeHammer013-Nov-11 16:13

3-Nov-11 16:13

Sounds like you want a PropertyGrid to me. Thats exactly what it does.

Kevin Marois4-Nov-11 7:57

4-Nov-11 7:57

Ok, I've been working with this for a while and I'm not gtting it. This post is a bit long but explains things better than my first post.

I have a Query view in my app. The user can type in any search terms they want. In this screenshot I entered Item1 - Item5.
www.maroisconsulting.com/image/Query1.png[^]

When the user clicks the Apply button, what I want to happen is to hide the textbox and show the grid. Both are on the view. The textbox is initially visible and the grid is initially hidden.

The Apply method converts the search terms into a list of objects:

private void apply()
{
    // The property 'SearchTerms' is bound to the textbox. This converts the text into an array
    string[] temp = SearchTerms.Split(new string[] { Environment.NewLine }, StringSplitOptions.None);

    // Convert the array into a list
    var temp2 = (from s in temp
                    where s != string.Empty
                    select new SearchItemModel
                    {
                        SearchTerm = s,
                        Quantity = 1
                    }).ToList();

    // Store the list to the SearchItems property. This property is bound to the grid's ItemSource
    SearchItems = new ObservableCollection<SearchItemModel>(temp2);
                
    // Togggle the textbox & grid visibility
    GridVisible = true;
    TextAreaVisible = false;
}

There are 2 columns on the grid. The first column is an editable combobox. It's source of data is a list of project names stored in a collection called 'BOMs' (Bills of Materials), something like

Project A4472A
BOM Project B2215B
Some Other BOM

The user should then be able to either type in any text to search on, or select a BOM project name from the combox box.

Here's the relevant XAML:

<DataGrid x:Name="grdItems"
            Grid.Row="4"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            AutoGenerateColumns="False"
            ItemsSource="{Binding SearchItems}"
            Visibility="{Binding GridVisible, Converter={StaticResource visibilityConverter}}"
            Margin="5">

    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Search Terms"
                                Width="*">
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox Height="22" 
                                IsEditable="True"
                                ItemsSource="{Binding BOMs}"
                                SelectedItem="{Binding SelectedBOMItem}"></ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="Quantity" 
                            Binding="{Binding Quantity}"
                            Width="100">
        </DataGridTextColumn>
    </DataGrid.Columns>

</DataGrid>

After the Apply method runs, I get this: http://www.maroisconsulting.com/image/Query2.png[^]

What I would like to get is this (mocked up):
http://www.maroisconsulting.com/image/Query3.png[^]

Hope this made sense. Any thoughts on how to do this?

[UPDATE]
The Output window shows 2 errors:
"BindingExpression path error: 'BOMs' property not found on 'object' ''SearchItemModel' ("
"BindingExpression path error: 'SelectedBOMItem' property not found on 'object' ''SearchItemModel'"

Everything makes sense in someone's mind

SledgeHammer014-Nov-11 8:14

4-Nov-11 8:14

Ah... ignore my suggestion of a property grid then since that'll only let you edit the right hand side.

Are the 'BOMs' and 'SelectedBOMItem' properties actually public properties in SearchItemModel? Seems like WPF is resolving to the proper DataContext (which I initially thought was the issue when I saw your XAML).

Are you sure that XAML you posted is EXACTLY the XAML you had when you got those error messages? Because if it is, it doesn't make sense. If BOMs and SelectedBOMItem are public props in SearchItemModel, they should be resolved since WPF seems to be looking at the right DataContext judging by those errors.

Kevin Marois4-Nov-11 8:18

4-Nov-11 8:18

BOMs is a collection on the VM, and SelectedBOMItem is a property on the VM.

What I think is happening is since the grid is bound to a collection of SearchItems models, the combo thinks the BOMs and SelectedBOMItem object are on that model. I'm not sure, but that's what I got out of those messages. And, assuming thats the problem, I'm not sure how to tell the combo to look on the DataContext, not the SearchItems.

Everything makes sense in someone's mind

SledgeHammer014-Nov-11 8:41

4-Nov-11 8:41

Ok, you confused me with your terminology / naming Smile | :)

... the problem is just as I originally suspected. The combobox is looking at the datacontext of the grid, not the VM. You can do something like (assuming your window has a name using the Name="myWindow" tag)...

<ComboBox DataContext={Binding ElementName=myWindow, Path=DataContext} ...

Kevin Marois4-Nov-11 8:49

4-Nov-11 8:49

Ok, I see where you're going. The problem now is, these controls are inside a user control which is inside the main window.

The user control is named QueryView, and its VM is QueryViewModel, so I tried:

<DataGrid x:Name="grdItems"
            Grid.Row="4"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            AutoGenerateColumns="False"
            ItemsSource="{Binding SearchItems}"
            Visibility="{Binding GridVisible, Converter={StaticResource visibilityConverter}}"
            Margin="5">

    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Search Terms"
                                Width="*">
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox Height="22" 
                                DataContext="{Binding ElementName=QueryViewModel, Path=DataContext}"
                                IsEditable="True"
                                ItemsSource="{Binding BOMs}"
                                SelectedItem="{Binding SelectedBOMItem}"></ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="Quantity" 
                            Binding="{Binding Quantity}"
                            Width="100">
        </DataGridTextColumn>
    </DataGrid.Columns>

</DataGrid>

But I get a binding error in the output window. If I understand what you're trying here, you're telling the combo to get it's data from some other datacontext? The question is, how to tell it about the QueryViewModel that's inside the MainWindowViewModel.

Everything makes sense in someone's mind

SledgeHammer014-Nov-11 8:55

4-Nov-11 8:55

You can't bind to the VM directly. ElementName needs a UIElement... thats why I mentioned that you have to have a Name tag on your top level window Smile | :)

. So its either going to be something like:

<Window Name=myWindow...>

<ComboBox DataContext="{Binding ElementName=QueryViewModel, Path=DataContext}" ... >

or maybe:

<UserControl Name=myWindow...>

Remember, your Window or UserControl DataContext points to your VM. You need to reference that one. I *think* you can also use the DataContext from the DataGrid, so something like:

<ComboBox DataContext="{Binding ElementName=grdItems, Path=DataContext}" ... >

One of those should work Smile | :)

Kevin Marois4-Nov-11 9:01

4-Nov-11 9:01

I dunno. I get what's supposed to happen, I just can't make it work. I'm really starting to think about a different approach.

Everything makes sense in someone's mind

SledgeHammer014-Nov-11 10:34

4-Nov-11 10:34

Should work as long as your are binding to a <b>UIElement</b> that has its DataContext set properly. We already the top level window has its DataContext set to your VM, so you must point your ComboBox's DataContext to the VM if you want to reference properties from the VM.

You might to post your full XAML and what error messages you are getting. Also, try turning on verbose WPF debugging.

Kevin Marois6-Nov-11 7:02

6-Nov-11 7:02

Here's the XAML as it is now:

<DataGrid x:Name="grdItems"
            Grid.Row="4"
            Grid.Column="0"
            Grid.ColumnSpan="2"
            AutoGenerateColumns="False"
            ItemsSource="{Binding SearchItems}"
            Visibility="{Binding GridVisible, Converter={StaticResource visibilityConverter}}"
            Margin="5">

    <DataGrid.Columns>
        <DataGridTemplateColumn Header="Search Terms"
                                Width="*">
            <DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <ComboBox x:Name="cboBOMs"
                                Height="22" 
                                DataContext="{Binding ElementName=QueryView, Path=DataContext}"
                                IsEditable="True"
                                ItemsSource="{Binding BOMs}"
                                SelectedItem="{Binding SelectedBOMItem}"></ComboBox>
                </DataTemplate>
            </DataGridTemplateColumn.CellEditingTemplate>
        </DataGridTemplateColumn>
        <DataGridTextColumn Header="Quantity" 
                            Binding="{Binding Quantity}"
                            Width="100">
        </DataGridTextColumn>
    </DataGrid.Columns>

</DataGrid>

I don't understand what's going on because this code is in QueryView.xaml. You can see the combo is looking for the DC on QueryView.

The output window shows the error:

Cannot find source for binding with reference 'ElementName=QueryView'. BindingExpression:Path=DataContext; DataItem=null; target element is 'ComboBox' (Name='cboBOMs'); target property is 'DataContext' (type 'Object')

This appeaars to be right. I don't get it and I'm tired of screwing with it. if the DB wasn't so damn big I'd post the entire app on my site and ask for more help. I'm fairly frustrated at this point.

Everything makes sense in someone's mind

SledgeHammer017-Nov-11 6:46

7-Nov-11 6:46

How about using grdItems for ElementName? What type is QueryView? Seems like this should be working to me too.

ColumnDefinition MinWidth=744

Abhinav S3-Nov-11 17:13

Abhinav S

3-Nov-11 17:13

Within a DataGrid, you need to use a DataGridComboBoxColumn in your template.
Here[^] is some code that might help you out.

indian1432-Nov-11 14:57

indian143

2-Nov-11 14:57

Hi All,

I have a parent grid in one xaml file in which we are loading the different regions. For that grid the column definitions are defined in the following way

<Grid.ColumnDefinitions>
                <ColumnDefinition Width="10" />
                <ColumnDefinition MinWidth="744" Width="*"  />           
               <ColumnDefinition Width="10" />
            </Grid.ColumnDefinitions>

in the second column we are loading a different user control, is there any way to get the MinWidth=744 value in the child user control dynamically through code.

I want to get that value what we set here in the user control which will be loaded in that second column. I have hard coded it but I want to use it in the following way in a different user control (means different xaml file)

if (assignmentOperator.ActualWidth > 744) //Checks if the LayoutGrid size is >= to 744 
            {
                double temp = gridFilterCriteria.ActualWidth; //Assigns gridFilterCriteria.ActualWidth to temp value
                this.textBlockCriteria.Width = temp * (0.99);//                                        
            }

here instead of 744 I want to set this if condition dynamically like
if (assignmentOperator.ActualWidth > <here i="" want="" some="" property="" which="" would="" give="" me="" this="" value="">)

can anybody help me please, I need it friends. Please help me yaar.

Thanks & Regards,

Abdul Aleem Mohammad
St Louis MO - USA

Re: ColumnDefinition MinWidth=744

Abhinav S2-Nov-11 18:04

Abhinav S

2-Nov-11 18:04

You can loop over the set of grids in your xaml, get the appropriate control (access the children and get the column name) and then set its MinWidth value to what you need. This is not the neatest way to do this, but will get the width set.

Trying To Shutdown WPF App - Application.Current is null

Kevin Marois2-Nov-11 6:55

Re: Trying To Shutdown WPF App - Application.Current is null

2-Nov-11 6:55

Here's the code

private void login()
{
    Login loginView = new Login();
    loginView.ShowDialog();

    if (MyAppEngine.CurrentUser == null)
    {
        Application.Current.Shutdown();
    }
}

The app is crashing with a null object ref exception on the Shutdown line when I fail to log in. Why would Application.Current ever be null??

Everything makes sense in someone's mind

SledgeHammer012-Nov-11 7:49

Re: Trying To Shutdown WPF App - Application.Current is null

2-Nov-11 7:49

Probably calling this method too early??

Kevin Marois2-Nov-11 8:38

Re: Trying To Shutdown WPF App - Application.Current is null

2-Nov-11 8:38

But during runtime you would thnk that Application.Current would exist.

Everything makes sense in someone's mind

SledgeHammer012-Nov-11 8:47