Call CommitEdit from xaml

[joe castle]

Hi,

Is it possible to call CommitEdit on the grid without doing it in code behind? Basically to force the CommitEdit by clicking on an external button and bind the click event somehow to CommitEdit()... 

thanks joe

[Pavel Pavlov]

Hi joe castle,

You may use a command for this task :

Something like :

<telerik:RadButton Width="150" Content="Save insert/edit" Margin="0,0,5,0"
                               Command="telerikGrid:RadGridViewCommands.CommitEdit" CommandTarget="{Binding ElementName=RadGridView1}"  />

You can see this code in action in this online demo.


Regards,
Pavel Pavlov
the Telerik team

[Alexey Oyun]

Is it possible to do this in xaml?

<DataTemplate x:Key="ColorEditCellTemplate">
                <telerik:RadColorPicker SelectedColor="{Binding Color, Mode=TwoWay}" >
                    <i:Interaction.Triggers>
                        <i:EventTrigger EventName="SelectedColorChanged">
                            <i:InvokeCommandAction/>
                        </i:EventTrigger>
                        <i:EventTrigger EventName="DropDownClosed">
                            <i:InvokeCommandAction Command="telerik:RadGridViewCommands.CommitEdit"/>
                        </i:EventTrigger>
                    </i:Interaction.Triggers>
                </telerik:RadColorPicker>
            </DataTemplate>

[Maya]

Hello Alexey Oyun,

Your case is a bit more specific, so you need to do a couple things here:
1. Create your custom class that will be holding the desired command:

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

2. Define that class in the Resources section:

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

3. Set the DataTemplate as follows:

<DataTemplate>
   <telerik:RadColorPicker SelectedColor="HotPink" >
      <swi:Interaction.Triggers>
          <swi:EventTrigger EventName="SelectedColorChanged">

 <swi:InvokeCommandAction />
          </swi:EventTrigger>
          <swi:EventTrigger EventName="DropDownClosed">

  <swi:InvokeCommandAction Command="{Binding deleteCommand, Source={StaticResource telerikGridViewCommands}}"  CommandParameter="{Binding}"/> 
          </swi:EventTrigger>
       </swi:Interaction.Triggers>
   </telerik:RadColorPicker>
</DataTemplate>

I am sending you a sample project illustrating the proposed solution.
 

Best wishes,
Maya
the Telerik team

[Alexey Oyun]

Nice, thank you Maya.

Alex

[Abílio]

Hi there.

I´m having a issue with this solution.

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).    

All the best,
Maya
the Telerik team