[Solved] Add a new row to the parent GridView from a child popup form

[HDD]

I am trying to add a new row to the radgridview.
Referring to the sample here: http://www.telerik.com/community/forums/silverlight/gridview/using-commands-on-button-in-grid-row.aspx
I have modified to have a button "Add New" above the gridview, which brings up a popup form (with few labels and textblocks).
This form lets the user to fill-in these details { Name, Number, Position, Country }.
This popup form needs to have a Save and a Cancel button.
Clicking "Save" would close the popup, and add the popup info as a new row to the gridview. And "Close" must simple close the popup without adding a new row.
Fairly basic requirement. How do we go about modifying this.
Thanks,
HDD

[Maya]

Hi HDD,

I am sending you a sample project illustrating how to add a new item using a new RadWindow for setting the properties of the object - in this application - a Player.
I hope that helps.
 

Regards,
Maya
the Telerik team

[HDD]

Maya,
Excellent !!! You have been providing me with great ideas and solutions.
Thanks much to you.
Can I request you to kindly let me understand how to extend this example to display data into another user control embedded in the same mainpage.xaml, based upon the row selected in the grid.
Let me explain you. I have this Grid "playersGrid" on my MainPage with the Add feature as provided by you.
Now I have another UserControl (or View) namely "PlayerDetails.xaml" which has few Labels/Textblocks to display the details of each Player below the "playersGrid" GridView.
So, when I select a row in this Grid, I want to implement commanding here, and display the details of the selected Player in those controls.
That means, via commanding I need to somehow notify the "PlayerDetails" view of the row changed.
Here's the modified xaml fro the MainPage, where I have added <my:PlayerDetails /> at the bottom.

<Grid x:Name="LayoutRoot" 
          Background="White" 
          DataContext="{StaticResource MyViewModel}">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
	
		<telerik:RadGridView Name="playersGrid" 
                                     ItemsSource="{Binding Players}" 
                                     AutoGenerateColumns="False">
			<telerik:RadGridView.Columns>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding Name}"/>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding Number}"/>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding Position}"/>
				<telerik:GridViewDataColumn DataMemberBinding="{Binding Country}"/>
			</telerik:RadGridView.Columns>
		</telerik:RadGridView>
		
		<StackPanel Grid.Row="1" Orientation="Vertical">
            <telerik:RadButton Name="Button1"
                Content="Add new player" 
                Click="Button1_Click"
                Margin="5"
                HorizontalAlignment="Left"/>
            <my:PlayerDetails />
        </StackPanel>

    </Grid>

Hope I am able to explain my thoughts clearly, any help with this.
Thanks in advance.
HDD.

[Maya]

Hello HDD,

Following up your requirements, I may suggest to you a couple of links where you can find more information about similar scenarios:
1. External Row Details - here you will find explanations as well as an example on how to display the RowDetails outside the grid.
2. Passing Grid's SelectedItem to RadWindow - reading this forum thread you will encounter both explanation and sample project illustrating how to pass the data for the SelectedItem to another control (in this case RadWindow)
3. Automatically re-order, re-sort and re-group RadGridView - in this blog post you can find another example of editing the selected items using RowDetails.

Regards,
Maya
the Telerik team

[HDD]

Maya,
Thanks for your response. Using the External Row details with a DetailsPresenter seems to look like a possible solution to this.
I will work on this. Appreciate your prompt response.

Thanks.
HDD

[HDD]

Maya,
Thanks to you, I got this working using the External Row details with a DetailsPresenter. 
The link had a straight forward example which had to reuse it:
<telerikGrid:RadGridView x:Name="radGridView" RowDetailsVisibilityMode="Collapsed">
   <telerikGrid:RadGridView.RowDetailsTemplate>
       <DataTemplate>
           <StackPanel Orientation="Horizontal" Margin="10,10,10,10">
               <TextBlock Text="City: " />
               <TextBlock Text="{Binding City}" />
           </StackPanel>
       </DataTemplate>
   </telerikGrid:RadGridView.RowDetailsTemplate>
   ...
</telerikGrid:RadGridView>
<telerikGridView:DetailsPresenter x:Name="ExternalPresenter" DetailsProvider="{Binding RowDetailsProvider, ElementName=radGridView}" />

I need a little more help as I am trying to implement a validation mechanism with this grid layout.
What I need to do is, when I select a row, I display the row details in the DetailsPresenter. Now I have a button "Validate", which will validate this record and update the notification displayed at the top "1 of 5 items validated." This would be done for each of the rows selected in the grid and the notification updated accordingly. 
What would be the best and easiest way of achieving this.
Thanks for time.
HDD.

[Maya]

Hi HDD,

Basically, RadGridView supports Validation at different levels: cell level, property level, row level or validating with Data Annotations and you can handle them either with provided by the grid events,  throwing an exception or using the System.ComponentModel.DataAnnotations assembly. You can find more information about those technique in our online documentation or in this blog post. 
However, if none of those is appropriate for you, please share more details about your exact scenario. Are you trying to validate a couple of rows at a time ?

 
Best wishes,
Maya
the Telerik team

[HDD]

Maya,
Thanks. Going forward with the above discussions, I have an Details Presenter as :

<telerik:DetailsPresenter x:Name="ExternalPresenter" 
			DetailsProvider="{Binding RowDetailsProvider, ElementName=radGridView}"  />

My DataTemplate for the RowDetailsTemplate has a Button control with MVVM commanding as follows:

<telerikGridView:RadGridView.RowDetailsTemplate>
	<DataTemplate>
 		<StackPanel Orientation="Vertical" >
			......
			<TextBlock Text="User:" />
                        <TextBox Name="UserName" Text="{Binding Path=UserName, Mode=TwoWay Width="190" Margin="5,0,5,0" />
                        <Button Content="Find User..." Name="FindUser" Command="{Binding FindUserCommand}" />
			.........
                  </StackPanel>
         </DataTemplate>
</telerikGridView:RadGridView.RowDetailsTemplate>


Now my DelegateCommand class has the below Execute method to call the show method in the ViewModel:

public void Execute(object parameter)
{
    _vm.ShowFindUser();
}

Finally, the ViewModel defines this method "ShowFindUser()" to bring the popup window "FindUser.xaml".
All looks okay, but the command doesn't seem to work. Nothing happens when I click the "FindUser..." button in the Details Presenter.
It hits the DelegateCommand class while instantiating but the Execute method is never hit.
Any clue here...
Thanks,
HDD.

[Maya]

Hi HDD,

You need to set the Source Property when defining the command in your xaml file. So, if the definition of your command is in your ViewModel, you have to define it as a Resource:

<UserControl.Resources>
    <my:MyViewModel x:Key="MyViewModel"/>
</UserControl.Resources>

The definition of the Button should look as:

<Button Content="Find User..." Name="FindUser" Command="{Binding FindUserCommand,
                                          Source={StaticResource MyViewModel}}" />

All the best,
Maya
the Telerik team