How to: Customize the In-place Editor

• May 22, 2020
• 2 minutes to read

This example demonstrates how to implement a custom in-place editor instead of a default one.

1. Create a custom in-place editor using the AppointmentInplaceEditorBase class.

   XAML

   
   <dxschui:AppointmentInplaceEditorBase
       x:Class="SilverlightApplication1.CustomInplaceEditor"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       xmlns:dxschui="http://schemas.devexpress.com/winfx/2008/xaml/scheduler"
       xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors"
       Height="164" Width="226">
   
       <Grid>
           <Border Background="#F3BBD2E8" CornerRadius="5"/>
           <Grid Margin="4">
               <Grid.ColumnDefinitions>
                   <ColumnDefinition Width="Auto"/>
                   <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
               <Grid.RowDefinitions>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="Auto"/>
                   <RowDefinition Height="*"/>
                   <RowDefinition Height="Auto"/>
               </Grid.RowDefinitions>
               <!--Subject-->
               <TextBlock  Grid.Row="0" HorizontalAlignment="Left" Text="Subject: "/>
               <dxe:TextEdit Margin="0,0,0,4"
                             Grid.Column="1"
                             Text="{Binding Subject, Mode=TwoWay}"/>
   
               <!--Label-->
               <TextBlock Grid.Row="1" HorizontalAlignment="Left" Text="Label: "/>
               <dxschui:AppointmentLabelEdit Margin="0,0,0,4" 
                                             Grid.Row="1" Grid.Column="1"
                                             Storage="{Binding Storage}" 
                                             EditValue="{Binding Label, Mode=TwoWay}"/>
   
               <!--Description-->
               <TextBlock Grid.Row="2" HorizontalAlignment="Left" Text="Description: "/>
               <dxe:TextEdit Margin="0,0,0,4"
                             Grid.Row="2" Grid.Column="1" 
                             TextWrapping="Wrap" VerticalContentAlignment="Top"
                             Text="{Binding Description, Mode=TwoWay}"/>
   
               <!--Buttons-->
               <StackPanel Grid.Row="3" Grid.ColumnSpan="2" 
                           Orientation="Horizontal" HorizontalAlignment="Right">
                   <Button Name="OK_button"
                           Width="60" Margin="0,0,4,0"
                           Content="OK" Click="OK_button_Click" />
                   <Button Name="Cancel_button" 
                           Width="60"
                           Content="Cancel" Click="Cancel_button_Click"/>
               </StackPanel>
           </Grid>
       </Grid>
   </dxschui:AppointmentInplaceEditorBase>
   

   C#

   
   using System.Windows;
   using DevExpress.Xpf.Scheduler;
   using DevExpress.Xpf.Scheduler.UI;
   using DevExpress.XtraScheduler;
   
   namespace SilverlightApplication1 {
       public partial class CustomInplaceEditor : AppointmentInplaceEditorBase {
           public CustomInplaceEditor(SchedulerControl control, Appointment apt)
               : base(control, apt) {
               InitializeComponent();
           }
   
           private void OK_button_Click(object sender, RoutedEventArgs e) {
               OnCommitChanges();
           }
   
           private void Cancel_button_Click(object sender, RoutedEventArgs e) {
               OnRollbackChanges();
           }
   
       }
   }
   

   VB.NET

   
   Imports Microsoft.VisualBasic
   Imports System.Windows
   Imports DevExpress.Xpf.Scheduler
   Imports DevExpress.Xpf.Scheduler.UI
   Imports DevExpress.XtraScheduler
   
   Partial Public Class CustomInplaceEditor
       Inherits AppointmentInplaceEditorBase
       Public Sub New(ByVal control As SchedulerControl, ByVal apt As Appointment)
           MyBase.New(control, apt)
           InitializeComponent()
       End Sub
   
       Private Sub OK_button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
           OnCommitChanges()
       End Sub
   
       Private Sub Cancel_button_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
           OnRollbackChanges()
       End Sub
   
   End Class
   

2. Replace a standard in-place editor with a custom one. To do this, handle the SchedulerControl.InplaceEditorShowing event and assign the newly created custom editor to the InplaceEditorEventArgs.InplaceEditor property.

   XAML

   
   <dxsch:SchedulerControl Name="schedulerControl1"
                       HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                       InplaceEditorShowing="schedulerControl1_InplaceEditorShowing">
   </dxsch:SchedulerControl>
   

   C#

   
   private void schedulerControl1_InplaceEditorShowing(object sender, InplaceEditorEventArgs e) {
       CustomInplaceEditor editor = new CustomInplaceEditor(this.schedulerControl1, e.Appointment);
       e.InplaceEditor = editor;
       editor.DataContext = editor;
       Point location = new Point(e.Bounds.Right, e.Bounds.Top);
       e.Bounds = new Rect(location, new Size(editor.Width, editor.Height));
   }
   

   VB.NET

   
   Private Sub schedulerControl1_InplaceEditorShowing(ByVal sender As Object, ByVal e As InplaceEditorEventArgs)
       Dim editor As New CustomInplaceEditor(Me.schedulerControl1, e.Appointment)
       e.InplaceEditor = editor
       editor.DataContext = editor
       Dim location As New Point(e.Bounds.Right, e.Bounds.Top)
       e.Bounds = New Rect(location, New Size(editor.Width, editor.Height))
   End Sub
   

3. As a result, when an end-user adds a new appointment by pressing Enter in the selected time cells or edits an existing appointment by clicking it repeatedly, the custom in-place editor will be shown.