How to set the Copy and Paste option of the Grid by using ContextMenu and SfRibbion?

1 min read

In SfDataGrid, you can enable copy and paste option by setting value to SfDataGird.GridCopyoption and SfDataGrid.GridPasteoption. You can use the copy and paste options through keyboard shortcuts. And you can also copy, paste data programmatically in SfDataGrid using the following methods.

Cut - GridCopyPaste.CutData()
Copy - GridCopyPaste.Copy()
Paste – GridCopyPaste.Paste()

The following section explains how to integrate programmatic copy paste with Ribbon and ContextMenu

Integrating SfDataGrid copy paste with Ribbon

Here, Ribbon is designed with Button for performing copy paste operations and SfDataGrid is also defined in XAML. Ribbon button commands are bound with corresponding commands and SfDataGrid is passed as CommandParameter.

XAML

<syncfusion:Ribbon>
      <syncfusion:RibbonTab >
            <syncfusion:RibbonBar Header="Edit">
                  <syncfusion:RibbonButton Label="Paste" 
                                                              SizeForm="Large" 
                                                              CommandParameter="{Binding ElementName=sfdatagrid}"                                                              Command="local:ContextMenuCommands.Paste"  
                                                              >
                  </syncfusion:RibbonButton>
                  <syncfusion:RibbonButton Label="Cut"  
                                                              Command="local:ContextMenuCommands.Cut" 
                                                              CommandParameter="{Binding ElementName=sfdatagrid}"
                                                              >
                  </syncfusion:RibbonButton>
                  <syncfusion:RibbonButton Label="Copy"                                                                Command="local:ContextMenuCommands.Copy" 
                                                              CommandParameter="{Binding ElementName=sfdatagrid}" 
                                                              >
                  </syncfusion:RibbonButton>
            </syncfusion:RibbonBar>
      </syncfusion:RibbonTab >
<syncfusion:Ribbon>
<syncfusion:SfDataGrid x:Name="sfdatagrid"                                 
                               AllowEditing="True"
                               AllowFiltering=”True”                               
                               SelectionUnit="Cell"
                               ItemsSource="{Binding Path=Products}"
                               />

The following code example illustrates the RibbonButton actions for the cut, copy and paste operation.

public static class ContextMenuCommands
    {         
        static BaseCommand cut;
        public static BaseCommand Cut
        {
            get
            {
                if (cut == null)
                    cut = new BaseCommand(OnCutClicked);
                return cut;
            }
        }
        private static void OnCutClicked(object obj)
        {
             var grid = obj as SfDataGrid;
             var copypasteoption = grid.GridCopyOption;
             grid.GridCopyOption = GridCopyOption.CutData;
             grid.GridCopyPaste.Cut();
             grid.GridCopyOption = copypasteoption;
        }
        static BaseCommand copy;
        public static BaseCommand Copy
        {
            get
            {
                if (copy == null)
                    copy = new BaseCommand(OnCopyClicked);
                return copy;
            }
        }        
        private static void OnCopyClicked(object obj)
        {
            var grid = obj as SfDataGrid;
            grid.GridCopyPaste.Copy();
        }
         static BaseCommand paste;
        public static BaseCommand Paste
        {
            get
            {
                if (paste == null)
                    paste = new BaseCommand(OnPasteClicked);
                return paste;
            }
        }
        private static void OnPasteClicked(object obj)
        {
            var grid = obj as SfDataGrid;
            grid.GridCopyPaste.Paste();
        }              
    }

The following screenshot illustrates the cut, copy and paste operation in SfRibbon.

$C:\Users\Ganeshkumar L\Desktop\KB1.png$

Figure 1: Cut, copy and paste operation in SfRibbon

Integrating SfDataGrid copy paste with ContextMenu

You can set ContextMenu for record cells in SfDataGrid using SfDataGrid.RecordContextMenu as illustrated in the following code example. Here, copy and paste operations in SfDataGrid is integrated with ContextMenu through commands. Also default CommandParameter of RecordContextMenu from SfDataGrid (namely GridRecordContextMenuInfo) is passed to commands.

XAML

<syncfusion:SfDataGrid x:Name="sfdatagrid"  Grid.Row="1"
                        AutoGenerateColumns="True" 
                        ItemsSource="{Binding Path=Products}">
<syncfusion:SfDataGrid.RecordContextMenu>
    <ContextMenu Style="{x:Null}">
        <MenuItem Command="{Binding Source={x:Static
                    Member=local:ContextMenuCommands.Cut}}"
                    CommandParameter="{Binding}"
                    Header="Cut">
        </MenuItem>
        <MenuItem Command="{Binding Source={x:Static
                    Member=local:ContextMenuCommands.Copy}}"
                    CommandParameter="{Binding}"
                    Header="Copy">
        </MenuItem>
        <MenuItem Command="{Binding Source={x:Static 
                    Member=local:ContextMenuCommands.Paste}}"
                    CommandParameter="{Binding}"
                    Header="Paste">
        </MenuItem>
        <Separator />
    </ContextMenu>
</syncfusion:SfDataGrid.RecordContextMenu>
</syncfusion:SfDataGrid>

The following code example illustrates the actions for cut, copy and paste operation.

public static class ContextMenuCommands
    {
        static BaseCommand cut;
        public static BaseCommand Cut
        {
            get
            {
                if (cut == null)
                    cut = new BaseCommand(OnCutClicked);
                return cut;
            }
        }
        private static void OnCutClicked(object obj)
        {
                var grid = (obj as GridRecordContextMenuInfo).DataGrid;
                var copypasteoption = grid.GridCopyOption;
                grid.GridCopyOption = GridCopyOption.CutData;
                grid.GridCopyPaste.Cut();
                grid.GridCopyOption = copypasteoption;
        }        
        static BaseCommand copy;
        public static BaseCommand Copy
        {
            get
            {
                if (copy == null)
                    copy = new BaseCommand(OnCopyClicked);
                return copy;
            }
        }
        private static void OnCopyClicked(object obj)
        {
          var grid = (obj as GridRecordContextMenuInfo).DataGrid;
          grid.GridCopyPaste.Copy();
        }
         static BaseCommand paste;
        public static BaseCommand Paste
        {
            get
            {
                if (paste == null)
                    paste = new BaseCommand(OnPasteClicked);
                return paste;
            }
        }
        private static void OnPasteClicked(object obj)
        {
            var grid = (obj as GridRecordContextMenuInfo).DataGrid;
            grid.GridCopyPaste.Paste();
        }
  }

The following screenshot illustrates the cut, copy and paste operation in ContextMenu

$C:\Users\Ganeshkumar L\Desktop\KB2.png$

Figure 2: Cut, copy and paste operation in ContextMenu

Sample Link: CopyandPastebyContextMenu_WPF

To know more about CustomContextMenu in SfDataGrid refer to the following KB. http://www.syncfusion.com/kb/2422/how-to-enable-custom-context-menu-in-griddatacontrol

Did you find this information helpful?

Yes

Comments (0)