Edit radgridItem in a Radwindow with a button to Save and other to Cancel

[Abílio]

I have a radgrid view when I click in a row it opens a radwindow with a DataTemplate to edit the record of the respective row.

I need to have 2 Buttons inside the Template, one to Save or update the record, the other to cancel the editing of the record.

< DataTemplate x:Key="RowDetailsTemplate">
<Grid>
<Grid.ColumnDefinitions >
<ColumnDefinition Width="150" />
<ColumnDefinition Width="230"/>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="230"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>


<TextBlock Grid.Row="0" Grid.Column="0" Margin="5,5,5,2" Text="Name: " VerticalAlignment="Center" Foreground="Black" />
<TextBox x:Name="textBox1" Grid.Row="0" Grid.Column="1" Margin="5,5,5,2" Height="24" Text="{Binding Name, Mode=TwoWay}" VerticalContentAlignment="Center" />
<TextBlock Grid.Row="1" Grid.Column="0" Margin="5,2,5,2" Text="Established: " VerticalAlignment="Center" Foreground="Black" />
<telerik:RadDatePicker Grid.Row="1" Grid.Column="1" Margin="5,2,5,2" Height="24" DateTimeText="{Binding Established,Mode=TwoWay}" VerticalContentAlignment="Center" />
<TextBlock Grid.Row="2" Grid.Column="0" Margin="5,2,5,2" Text="StadiumCapacity: " VerticalAlignment="Center" Foreground="Black" />
<TextBox Grid.Row="2" Grid.Column="1" Margin="5,2,5,2" Height="24" Text="{Binding StadiumCapacity,Mode=TwoWay}" VerticalContentAlignment="Center" />


<telerik:RadButton Grid.Row="3" Grid.Column="0" Width="150" Content="Save" Click="RadButton_Click_1">
<swi:Interaction.Triggers>
<swi:EventTrigger EventName="Click" x:Name="Save">
<swi:InvokeCommandAction Command="{Binding editCommand, Source={StaticResource telerikGridViewCommands}}"
CommandParameter="{Binding }"/>
</swi:EventTrigger>
</swi:Interaction.Triggers>
</telerik:RadButton>


<telerik:RadButton x:Name="Cancel" Grid.Row="3" Grid.Column="1" Width="150" Content="Cancel" Click="RadButton_Click">
<swi:Interaction.Triggers>
<swi:EventTrigger EventName="Click" x:Name="Cancel">
<swi:InvokeCommandAction Command="{Binding cancelCommand, Source={StaticResource telerikGridViewCommands}}"
CommandParameter="{Binding }"/>
</swi:EventTrigger>
</swi:Interaction.Triggers>
</telerik:RadButton>


</Grid>
</DataTemplate>

I have a class with the 2 ICommands

public class TelerikGridViewCommands
{
//public ICommand deleteCommand
//{
// get
// {
// return RadGridViewCommands.Delete;
// }
//}


public ICommand cancelCommand
{
get
{
return RadGridViewCommands.CancelRowEdit;
}
}


public ICommand editCommand
{
get
{
return RadGridViewCommands.CommitEdit;
}
}
}

The problem is that it always catches the editCommand event.

It seems that being this one registed first the other buttons, inclusive the close button of the radwindow does the CommitEdit
Event.

Can you help me here?

Thanks in advanced

[Maya]

Hello Abilio,

The behavior you get is due to the fact that the binding is TwoWay and the value is updated once the TextBox in the window loses the focus. And since the grid does not enter edit mode, the editing cannot be canceled through the command.
You will need to implement your own custom logic for cancelling and saving the data in the grid (you can try handling Click events of the buttons for example).     
 

Regards,
Maya
the Telerik team

[Abílio]

HI there.
Thanks for the quick reply.
I´ve already tried the Events Click of the buttons, but the fields are updated before the click event is made.
I send you the code-behind of my xaml

public partial class MainPage : UserControl

{

 

 

 

 

 

RadWindow window;

 

 

 

 

 

object row;

 

 

 

 

 

public MainPage()

{

 

 

 

 

 

//System.Runtime.CompilerServices.RuntimeHelpers.RunClassConstructor(typeof(RadGridViewCommands).TypeHandle);

InitializeComponent();

 

 

 

 

 

this.window = new RadWindow();

 

 

 

 

 

this.window.Content = new DetailsPresenter()

{

 

 

 

 

 

// Link the external details presenter to our RadGridView.

DetailsProvider =

 

 

 

 

 

this.clubsGrid.RowDetailsProvider

};

 

 

 

 

 

this.window.WindowStartupLocation = Telerik.Windows.Controls.WindowStartupLocation.CenterOwner;

 

 

 

 

 

this.window.Header = "Details";

 

 

 

 

 

this.window.Width = 500;

 

 

 

 

 

this.window.Height = 300;

 

 

 

 

 

this.window.ResizeMode = ResizeMode.NoResize;

 

 

 

 

 

this.clubsGrid.RowDetailsProvider.PropertyChanged += new System.ComponentModel.PropertyChangedEventHandler(RowDetailsProvider_PropertyChanged);

}

 

 

 

 

 

void RowDetailsProvider_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)

{

 

 

 

 

 

if (e.PropertyName == "DataContext")

{

 

 

 

 

 

Club currentClub = this.clubsGrid.RowDetailsProvider.DataContext as Club;

 

 

 

 

 

if (currentClub != null)

{

row =

 

 

 

 

 

this.clubsGrid.ItemContainerGenerator.ContainerFromItem(currentClub) as GridViewRow;

 

 

 

 

 

this.window.Show();

}

 

 

 

 

 

else

{

 

 

 

 

 

this.window.Close();

}

}

}

 

 

 

 

 

private void RadButton_Click(object sender, RoutedEventArgs e)

{

 

 

 

 

 

var item = row as GridViewRow;

clubsGrid.CommitRowEdit(item);

 

 

 

 

 

this.window.Close();

}

 

 

 

 

 

private void RadButton_Click_1(object sender, RoutedEventArgs e)

{

clubsGrid.CancelEdit();

 

 

 

 

 

this.window.Close();

}

}

 

 

 

 

I´ve tried calling the radgrid commands here but before it enters in the event it already updated the fields.

I´ve changed the buttons xaml to this

<telerik:RadButton Grid.Row="3" Grid.Column="0" Width="150" Click="RadButton_Click" Content="Save insert/edit" Margin="0,0,5,0" CommandTarget="{Binding ElementName=clubsGrid}" />

 

 

<telerik:RadButton Grid.Row="3" Grid.Column="1" Width="150" Click="RadButton_Click_1" Content="Cancel insert/edit" CommandTarget="{Binding ElementName=clubsGrid}" />

If I put the fields to OneWay it´s never updated!

Can you give me an example on how I can do what you suggest.



Thanks in advanced.

[Maya]

Hi Abilio,

Actually, calling CancelEdit() method will be exactly the same as executing CancelEdit command. As mentioned previously, since RadGridView does not enter edit-mode when you update the properties through the corresponding RowDetails, using CancelEdit command or method will not revert the changes.
What you need to do is to implement your own custom logic inside. You can try working with IEditableObject for example.  

Kind regards,
Maya
the Telerik team

[Abílio]

Hi there.
I´m not finding a way to do this, I´ve been working for 2 days on a way to cancel the edition and nothing seems to work.
Can you show me an example?