Bind a TextBox.Text to the current Item of a RadGridView

[Julien]

Hi!

I've a to display a list of  "households", I'm using a telerik component, the "RadGridView".

This is working, I've set the "Datacontext" on a parent element. I've no problem with that

<telerik:RadGridView Name="uxGridViewList" AutoGenerateColumns="False" ItemsSource="{Binding HouseHolds}" IsSynchronizedWithCurrentItem="True" >
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding FirstName}"/>
        <telerik:GridViewDataColumn Header="Last Name" DataMemberBinding="{Binding LastName}" />
        <telerik:GridViewDataColumn Header="City" DataMemberBinding="{Binding City}" />
        <telerik:GridViewDataColumn Header="Phone" DataMemberBinding="{Binding Phone1}"/>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Now, I'm trying to get get information in some textbox changing to have the current selectedrow.

Changes will be made in two ways, so I've made some tries, but the textbox is still empty.

First try:

<TextBox Name="uxTextFirstName" Text="{Binding FirstName}" DataContext="{Binding ElementName=uxGridViewList, Path=CurrentItem, Mode=TwoWay}" />

Second try

<TextBox Name="uxTextFirstName" Text="{Binding ElementName=uxGridViewList, Path=SelectedItem.Firstname, Mode=TwoWay}"/>

What should I do more?

I tried to do in my code behind to check if I was having data in the correct format.
uxTextFirstName.Text = ((HouseHold)uxGridViewList.SelectedItem).FirstName;
It display correct informations, but don't change when I change lines and I really have to do this in the Xaml code, not in code behind.

EDIT: I just saw I got an error in the "Output":

System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=uxGridViewList'. BindingExpression:Path=SelectedItem.Firstname; DataItem=null; target element is 'TextBox' (Name='uxTextFirstName'); target property is 'Text' (type 'String')

But I still don't understand what is wrong :(

[Maya]

Hi Julien,

You need to make some slight changes in both methods you have tried. In the first one you may try to use as a value for the Path - SelectedItem like follows:

<TextBox Name="MyTextBox" Text="{Binding Name}" DataContext="{Binding ElementName=playersGrid, Path=SelectedItem, Mode=TwoWay}" />

As for the second modification, you need to be quite careful when writing the names of your Properties as this is case-sensitive. Thus, as your property is FirstName, you have to define it with the same spelling:

<TextBox x:Name="MyTextBox1" Text="{Binding ElementName=playersGrid, Path=SelectedItem.FirstName, Mode=TwoWay}" />

Regards,
Maya
the Telerik team

[Julien]

In facts it seems it's a scope problem.

If a put the two elements directly in a StackPanel, it almost work:
-If I modify the FirstName in the TextBox, the GridView is only refreshed when I go in edit mode in this cell

But!

The main problem is that these two element(textbox & gridview) aren't directly at the same level, they are in two differents RadSplitContainer.

How to do this?

My actual code :

<telerik:RadDocking Name="uxMainDockingWindow">
    <telerik:RadSplitContainer InitialPosition="DockedTop" Orientation="Horizontal" Height="100">
        <telerik:RadPaneGroup >
            <telerik:RadPane Header="Current Item">
                <TextBox Text="aaaaa" />
            </telerik:RadPane>
        </telerik:RadPaneGroup>
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="Last events">
                <TextBox Text="aaaaa" />
            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    <telerik:RadSplitContainer Name="uxListSpliter" InitialPosition="DockedLeft" Width="450">
        <telerik:RadPaneGroup>
            <telerik:RadPane Header="List of Households">
                <telerik:RadGridView Name="uxGridViewList" AutoGenerateColumns="False" ItemsSource="{Binding HouseHolds}" IsSynchronizedWithCurrentItem="True">
                    <telerik:RadGridView.Columns>
                        <telerik:GridViewDataColumn Header="First Name" DataMemberBinding="{Binding FirstName}"/>
                        <telerik:GridViewDataColumn Header="Last Name" DataMemberBinding="{Binding LastName}" />
                        <telerik:GridViewDataColumn Header="City" DataMemberBinding="{Binding City}" />
                        <telerik:GridViewDataColumn Header="Phone" DataMemberBinding="{Binding Phone1}"/>
                    </telerik:RadGridView.Columns>
                </telerik:RadGridView>

            </telerik:RadPane>
        </telerik:RadPaneGroup>
    </telerik:RadSplitContainer>
    <telerik:RadDocking.DocumentHost>
        <telerik:RadSplitContainer>
            <telerik:RadPaneGroup>
                <telerik:RadDocumentPane Header="Households Details">
                    <Grid>
                        <StackPanel Orientation="Vertical">
                            <Label>First Name</Label>
                            <!--
                            Tried:
                            <TextBox Name="uxTextFirstName" Text="{Binding FirstName}" DataContext="{Binding ElementName=uxGridViewList, Path=CurrentItem, Mode=TwoWay}" />
                            <TextBox Name="uxTextFirstName" Text="{Binding FirstName}" DataContext="{Binding Source=uxGridViewList, Path=CurrentItem, Mode=TwoWay}" />
                            <TextBox Name="uxTextFirstName" Text="{Binding FirstName}" DataContext="{Binding ElementName=uxGridViewList, Path=SelectedItem, Mode=TwoWay}" />
                            <TextBox Name="uxTextFirstName"  Text="{Binding uxGridViewList, Path=SelectedItem.Content, Mode=TwoWay}"/>
                            <TextBox Name="uxTextFirstName"  Text="{Binding  Path=HouseHolds/FirstName, Mode=TwoWay}"/>
                            <TextBox Name="uxTextFirstName" Text="{Binding uxGridViewList, Path=/SelectedItem/Content, Mode=TwoWay}"/>
                            <TextBox Name="uxTextFirstName" Text="{Binding Path=uxGridViewList.SelectedItem.Content, Mode=TwoWay}"/>-->
                            <TextBox Name="uxTextFirstName" Text="{Binding ElementName=uxGridViewList, Path=SelectedItem.FirstName, Mode=TwoWay}"/>
                            <Button Content="TestBt" Click="Button_Click" />
                        </StackPanel>
                    </Grid>
                </telerik:RadDocumentPane>
                <telerik:RadDocumentPane Header="Orders"/>
            </telerik:RadPaneGroup>
        </telerik:RadSplitContainer>
    </telerik:RadDocking.DocumentHost>
</telerik:RadDocking>

[Maya]

Hi Julien,

You need to set the DataContext Property of the RadDocking Control so that all the elements inside know where to look for the items- if (as it is in your scenario) they need to share the same data.
I am sending you a sample project that implements the code-snippet you have sent and  illustrates the proposed solution. 

Best wishes,
Maya
the Telerik team

[Julien]

Thank you! In fact I've done this but in the code behind, if I was putting the ElementName, it wasn't able to find the element.

What is the difference between SelectedItem and CurrentItem?

[Maya]

Hello Julien,

You may find detailed information about the SelectedItem and CurrenItem, the difference between them as well as the way to select/deselect items programatically in our online documentation.

Kind regards,
Maya
the Telerik team