Filter WPF DataGrid values from TextBox in Column Header

Question

I followed the advice in the following link (filter wpf datagrid values from a textbox) to create Figure A. Which allows me to filter the DataGrid based on what is in the TextBox when I press the Button.

However once I move the Button and TextBox within the column headers of the DataGrid like in Figure B. The Button still works but the Binding of the TextBox doesn't as it is showing up null within the code.

http://i42.tinypic.com/2quivpx.png

The only real change between what was done in the link is my XAML where I have put my TextBox and Button within the DataGridTemplateColumn Header.

<Grid DataContext="{Binding ElementName=UI}" >
    <DataGrid AutoGenerateColumns="False" Height="184" HorizontalAlignment="Left" Margin="12,23,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="384" ItemsSource="{Binding DataGridCollection}">
           <DataGrid.Columns>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBox Name="IDSearcBox" Text="{Binding FilterString}" Width="100"/>
                            <Button  Name="IDSearchButton" Click="IDButton_Click"  Content="I" Width="30"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding ID}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTemplateColumn>
                <DataGridTemplateColumn.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBox Name="NameSearchBox" Text="{Binding FilterString}" Width="100"/>
                            <Button  Name="NameSearchButton" Click="NameSearchButton_Click"  Content="N" Width="30"/>
                        </StackPanel>
                    </DataTemplate>
                </DataGridTemplateColumn.HeaderTemplate>
                <DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}"/>
                    </DataTemplate>
                </DataGridTemplateColumn.CellTemplate>
            </DataGridTemplateColumn>
            <DataGridTextColumn Header="SomethingElse" Binding="{Binding SomethingElse}"/>
        </DataGrid.Columns>
    </DataGrid>
</Grid>

Any assistance on this would be greatly appreciated! I've been scratching my brain all day on this one!

(I would have posted on the other post for some advice but I couldn't see any option!)

Answer 1

The Textbox is now inside the DataGrids ItemSource DataContext,

Try setting the DataContext of the TextBox back you your out to the UI DataContext

<TextBox Name="IDSearcBox" Text="{Binding FilterString, ElementName=UI}"