AutoCompleteBox not works on DataGridTemplateColumn

Question

hi everyone,

I have a window that has a DataGrid like this:

        <DataGrid Margin="21,162,11,102" Name="voucherDataGrid" CanUserAddRows="True" AutoGenerateColumns="False" Grid.Row="0"
                  HorizontalGridLinesBrush="LightGray" VerticalGridLinesBrush="LightGray" TabIndex="6" 
                  ItemsSource="{Binding VoucherRows,ValidatesOnDataErrors=True}" CanUserDeleteRows="True" CanUserResizeColumns="True" CanUserSortColumns="True">
            ...
            <DataGrid.Columns>
                ...
                <DataGridTemplateColumn Header="کد حساب" Width="100">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <toolkit:AutoCompleteBox 
                                    ItemsSource="{Binding DataContext.Codings, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" 
                                    Text="{Binding DataContext.AccountingCode, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnTargetUpdated=True, 
                                RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGrid}}}">
                                <toolkit:AutoCompleteBox.ItemTemplate>
                                    <DataTemplate>
                                        <TextBlock Text="{Binding Title}"/>
                                    </DataTemplate>
                                </toolkit:AutoCompleteBox.ItemTemplate>
                            </toolkit:AutoCompleteBox>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
                ...
            </DataGrid.Columns>
        </DataGrid>

and DataContext object is like this:

public class VoucherViewModel : NotificationObject, IDialogViewModel
{
    public ObservableCollection<Models.Coding> Codings { get; set; }

    public ObservableCollection<Models.VoucherRow> VoucherRows { get; set; }

    ...
}

and i set Window.DataContext of window manually:

var viewModel = new VoucherViewModel();
viewModel.Codings = new ObservableCollection<Models.Coding>(codingRepository.GetAll());// returns 7 rows, i'm sure! 
voucherWindow.DataContext = viewModel;
var result = voucherWindow.ShowDialog();
...

but AutoCompleteBox not works! I also check this question but got no result.

---

Jalalx

Answer 1

it is MVVM pattern 

---

I'm a 13 years old kid.

Answer 2

Hi Jalal,

I find in your code:

   <toolkit:AutoCompleteBox 
       ItemsSource="{Binding DataContext.Codings, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" 
       , Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnTargetUpdated=True, 
       RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type D.ataGrid}}}">

Add datacontext in your binding, it is not correct. Modify binding like ItemsSource="{Binding Codings, RelativeSource....... should work.

Also you can set ViewModel as datacontext in xaml like this:

<StackPanel.DataContext> 
<local:VoucherViewModel/> 
</StackPanel.DataContext> 

Then just binding like ItemsSource="{Binding Codings, RelativeSource.......

Here is a simple sample about how to bind in MVVM pattren for your reference:

http://www.codeproject.com/Articles/36545/WPF-MVVM-Model-View-View-Model-Simplified

Hope it helps.

If you have any additional questions, please feel free to let me know.

Have a nice day.

---

Annabella Luo[MSFT]
MSDN Community Support | Feedback to us

Answer 3

Hi Annabella!

Thank you for feedback

The DataContext of AutoCompleteBox is not same as DataContext of DataGrid. Each row is bind to VoucherRow (in VoucherViewModel.VoucherRows), and Main Window is bind to VoucherViewModel, so they are not same! I also tried this one just for testing ItemsSource but it not worked too! :(

                    <DataGridTemplateColumn Header="کد حساب" Width="100">
                        <DataGridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <TextBox Text="{Binding AccountingCode, Mode=TwoWay}"></TextBox>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellTemplate>
                        <DataGridTemplateColumn.CellEditingTemplate>
                            <DataTemplate>
                                <StackPanel>
                                    <toolkit:AutoCompleteBox
                                        Text="{Binding AccountingCode, Mode=TwoWay}">
                                        <toolkit:AutoCompleteBox.ItemsSource>
                                            <list:StringCollection>
                                                <system:String>January</system:String>
                                                <system:String>February</system:String>
                                                <system:String>March</system:String>
                                                <system:String>April</system:String>
                                                <system:String>May</system:String>
                                                <system:String>June</system:String>
                                                <system:String>July</system:String>
                                                <system:String>August</system:String>
                                                <system:String>September</system:String>
                                                <system:String>October</system:String>
                                                <system:String>November</system:String>
                                                <system:String>December</system:String>
                                            </list:StringCollection>
                                        </toolkit:AutoCompleteBox.ItemsSource>
                                    </toolkit:AutoCompleteBox>
                                </StackPanel>
                            </DataTemplate>
                        </DataGridTemplateColumn.CellEditingTemplate>
                    </DataGridTemplateColumn>

Can you please give me a sample of using AutoCompleteBox in DataGrid while AutoCompleteBox.ItemsSource is bind to a property in DataGrid's DataContext? 

Thanks in advance

---

Jalalx