Edit in the new window

[Emmanuel]

I was searching internet for no avail for a sample for the following scenario.
Select a Row in the RadGrid, Show the information in a New Window, then Edit and save refresh the grid. I think is a general design in .net pages. Does Telerik have a sample fo this design, or someone can direct me to the right direction. I am using MVVM design patern, and Bind the selectedItem of the grid to the CurrentRecord Property on my ViewModel class. How to associate this property with a window let's say with a textbox binding to CurrentRecord.FirstName, I just start using telerik control and really like them, and would really appreciate any help.

[Dimitrina]

Hi Emmanuel,

In order to implement the editing scenario that you describe, you need to do the following:

1. Bind the SelectedItem of the grid to the SelectedItem (or CurrentRecord) property of the ViewModel, with Mode=TwoWay.
2. You may use a UserControl for the content of the Window
3. When you load the UserControl pass the DataContext of the GridView to the contructor of the UserControl
4. Bind the textboxes in the UserControl to SelectedItem.Name etc.
5. The values changed in the New Window are updated immediately in the ItemsSource  of the GridView.

I have prepared a sample project showing how the steps 1. through 5. are working, there you may see additional information. When you start the application you will have GridView populated with Players. When you click on a row, a new modal window with the content of  "SelectedItem" UserControl is shown. It will be populated with the properties of the selected Player. You may change the text in the TextBoxes, close the Window and notice how the original selected Player has is changed.

You may as well take a look at this online demo about showing RadWindow.

Greetings,
Didie
the Telerik team

[Emmanuel]

Thank you very much it was exactly what i was looking for. I will check your sample and adapt it to my needs.

[Emmanuel]

I checked your code and is working the way I want, but i noticed you're adding the following in MainPage.xalm.cs:
 

       this.playersGrid.AddHandler(GridViewRow.MouseLeftButtonUpEvent, new MouseButtonEventHandler(Row_Click), true);<br>

then on Row_ Click  you're making the window and show it, but in MVVM shouldn't we put all code in VM class? I tried to move your code on my VM of the first View without any luck. Could you please help me out with this one? Thanks again ,and I'll continue learning the new design.

[Dimitrina]

Hi Emmanuel, 

If you prefer to put the code in the ViewModel, you may use and event trigger on the RowActivated event. This event fires when the user double click on a row, as well as when the 'Enter' key is pressed.
You need to add the following to your xaml:

xmlns:swi="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
....
<swi:Interaction.Triggers>
                <swi:EventTrigger EventName="RowActivated">
                    <swi:InvokeCommandAction Command="{Binding MyCommand, Source={StaticResource MyViewModel}}"
                                             CommandParameter="{Binding ElementName=playersGrid}" />
                </swi:EventTrigger>
</swi:Interaction.Triggers>

I have attached a sample project showing how you may show the RadWindow from your ViewModel. You should the review the changes done in MyViewModel.cs and the newly created class DelegateCommand.cs.

You may as well look at this article about MVVM without code behind. Basically the MVVM does not deny the code behind. 

Could you please review the sample project and share with us whether this approach is meeting your requirements?

All the best,
Didie
the Telerik team