Interactive Features in UWP CellGrid (SfCellGrid)

10 May 202113 minutes to read

This section explains interactive operations in the SfCellGrid.

Clipboard operations

The supported clipboard operations, cut, copy, and paste are managed in GridCopyPaste class. This class can be accessed by using the CopyPaste property of the SfCellGrid that provides methods to perform clipboard operations.

Cut

The selected range of cells or data can be cut by using the Cut method or keyboard keys Ctrl + X combination.

//To cut the selected ranges,
cellGrid.CopyPaste.Cut();

//To cut the ranges passed at runtime,
var range = GridRangeInfo.Cells(2, 3, 4, 5);
cellGrid.CopyPaste.Copy(range, true);

The ClipboardCut event occurs when performing cut operation in the SfCellGrid. It receives an argument of type GridCutPasteEventArgs that provides an option to get the copied range and handles this event.

cellGrid.Model.ClipboardCut += Model_ClipboardCut;

private void Model_ClipboardCut(object sender, GridCutPasteEventArgs e)
{
    var range = e.Range;
    e.Handled = true;        
}

Copy

The selected range of cells or data can be copied by using the Copy method or keyboard keys Ctrl + C combination.

//To copy the selected ranges,
cellGrid.CopyPaste.Copy();

//To copy the ranges passed at runtime,
var range = GridRangeInfo.Cells(2, 3, 4, 5);
cellGrid.CopyPaste.Copy(range, false);

The ClipboardCopy event occurs when performing copy operation in the SfCellGrid. It receives an argument of type GridCutPasteEventArgs that provides an option to get the copied range and handles this event.

cellGrid.Model.ClipboardCopy += Model_ClipboardCopy;
private void Model_ClipboardCopy(object sender, GridCutPasteEventArgs e)
{
    var range = e.Range;
    e.Handled = true;        
}

Paste

The copied ranges from the SfCellGrid can be pasted by using the Paste method or keyboard keys Ctrl + V combination.

//To paste the copied ranges including formatting,

cellGrid.Model.CopyPasteOptions = CopyPasteOptions.All;
cellGrid.CopyPaste.Paste();

Copy paste options

The following list of paste enum options can be used to perform paste operation.

Options Description
All Pastes with all the format options.
Formulas Pastes the formulas alone.
Formats Maintains the formatting of copied range.
Values Pastes the values alone.
Comments Pastes the comments without formats and values.
Transpose Copies the vertical range of cells and pastes in horizontal range and vice-versa.
ClipboardOnly Copies and pastes from the clipboard without pasting any styles.

The ClipboardPaste event occurs when performing paste operation in the SfCellGrid. It receives an argument of type GridCutPasteEventArgs that provides an option to get or set the pasting range and handles this event.

cellGrid.Model.ClipboardPaste += Model_ClipboardPaste;
private void Model_ClipboardPaste(object sender, GridCutPasteEventArgs e)
{
    var range = e.Range;
    e.Handled = true;        
}

Tooltip

The SfCellGrid provides support for adding tooltip for individual cells. Tooltip will be displayed as small pop-up window when the mouse hover the cells.

To display the tooltip, set the ShowTooltip property to true.

cellGrid.ShowTooltip  = true;

Adding tooltip

Tooltip can be added to the cell by setting the Tooltip property. The assigned text will be displayed in the tooltip window.

//To add the tooltip for cell,
cellGrid.Model[3, 3].Tooltip = "Syncfusion";

//To add the tooltip for header cells alone,
cellGrid.Model.HeaderStyle.Tooltip = "Syncfusion";

//To add the tooltip for the footer cells alone,
cellGrid.Model.FooterStyle.Tooltip = "Syncfusion";

//To add the tooltip for the column,
cellGrid.Model.ColStyles[4].Tooltip = "Syncfusion");

//To add the tooltip for the row,
cellGrid.Model.RowStyles[3].Tooltip = "Syncfusion";

Customization of tooltip

The tooltip can be customized by defining a custom data template and assign to the TooltipTemplate property of the SfCellGrid.

<syncfusion:SfCellGrid.Resources>
    <DataTemplate x:Key="Customtool">
       <Border BorderThickness="2"
            Background="Orange"
             BorderBrush="Green">
            <TextBlock Text="{Binding Path=Tooltip}" 
                 FontSize="12"
                 Foreground="Black"
                 Padding="2"/>
        </Border>
    </DataTemplate>
</syncfusion:SfCellGrid.Resources>
cellGrid.Model[3, 3].TooltipTemplate = cellGrid.Resources["Customtool"] as DataTemplate;
cellGrid.Model[3, 3].Tooltip = "Custom Tooltip";

NOTE

Customized data template should be defined in SfCellGrid.Resources in XAML file.

Reset tooltip

The ResetTooltip method is used to reset or remove the tooltip from the SfCellGrid.

cellGrid.Model[3, 3].ResetTooltip();

Reset tooltip template

The ResetTooltipTemplate method is used to reset or remove the defined custom tooltip template from the SfCellGrid.

cellGrid.Model[3, 3].ResetTooltipTemplate();

CellTooltipOpening event

The CellTooltipOpening event occurs when opening the tooltip in the SfCellGrid. It receives an argument of type CellTooltipOpeningEventArgs containing the following information about the event.

Property Description
Cell Gets or sets the value that indicates cell tooltip index.
Cancel Gets or sets whether the event should be canceled or not.
Tooltip Gets or sets the tooltip text.
cellGrid.CellTooltipOpening += CellGrid_CellTooltipOpening;

private void CellGrid_CellTooltipOpening(object sender, CellTooltipOpeningEventArgs e)
{
    var cellIndex = e.Cell;
    var text = e.Tooltip;
    e.Cancel = true;
}

Comment tip

The SfCellGrid provides support for adding the Excel-like comment tip to the individual cells. This acts as note that provides more information about the data in an individual cell on mouse hover.

When a cell has a comment, a red indicator appears in the corner of the cell. When resetting the pointer on the cell, the comment appears.

To display the comment, set the ShowComment property to true.

cellGrid.ShowComment  = true;

Adding comment

The comment tip can be added to the cell by setting the Comment property. The assigned text will be displayed in the comment window.

//To add the Comment for cell,
cellGrid.Model[3, 3].Comment = "Syncfusion";

//To add the Comment for header cells alone,
cellGrid.Model.HeaderStyle.Comment = "Syncfusion";

//To add the Comment for the footer cells alone,
cellGrid.Model.FooterStyle.Comment= "Syncfusion";

//To add the Comment for the column,
cellGrid.Model.ColStyles[4].Comment = "Syncfusion");

//To add the Comment for the row,
cellGrid.Model.RowStyles[3].Comment = "Syncfusion";

Comment brush

The CommentBrush property is used to determine the color of the rectangle at the top corner of the comment cell.

cellGrid.Model[5, 5].CommentBrush = new SolidColorBrush(Colors.GreenYellow);

Customization of comment

The comment can be customized by defining a custom data template and assign to the CommentTemplate property of the SfCellGrid.

<syncfusion:SfCellGrid.Resources>
    <DataTemplate x:Key="custom">
       <Border BorderThickness="2"
            Background="Orange"
             BorderBrush="Green">
            <TextBlock Text="{Binding Path=Comment}" 
                 FontSize="12"
                 Foreground="Green"
                 Padding="2"/>
        </Border>
    </DataTemplate>
</syncfusion:SfCellGrid.Resources>
cellGrid.Model[3, 3].CommentTemplate = cellGrid.Resources["custom"] as DataTemplate;
cellGrid.Model[3, 3].Comment = "CustomComment";

NOTE

Customized data template should be defined in the SfCellGrid.Resources in XAML file.

Reset comment

The ResetComment method is used to reset or remove the comment from the SfCellGrid.

cellGrid.Model[3, 3].ResetComment();

Reset comment template

The ResetCommentTemplate method is used to reset or remove the custom comment template defined in the SfCellGrid.

cellGrid.Model[3, 3].ResetCommentTemplate();

CellCommentOpening event

The CellCommentOpening event occurs when opening the comment in the SfCellGrid. It receives an argument of type CellCommentOpeningEventArgs containing the following information about the event.

Property Description
Cell Gets or sets the value that indicates cell comment index.
Cancel Gets or sets whether the event should be cancel or not.
Comment Gets or sets the comment text.
CommentBrush Gets or sets the comment brush color.
cellGrid.CellCommentOpening += CellGrid_CellCommentOpening;

private void CellGrid_CellCommentOpening(object sender, CellCommentOpeningEventArgs e)
{
    var cellIndex = e.Cell;
    var text = e.Comment;
    var color = e.CommentBrush;
    e.Cancel = true;
}

Context menu

Context menu is a customizable menu used for various functionalities. The context menu opens when the user right-click the cell or selection of cells in the SfCellGrid.

User can add their own menu items and assign to the CellContextMenu property.

cellGrid.CellContextMenu = menu();

public ContextMenu menu()
{
    var menu = new ContextMenu();
           
    var insertRow = new MenuFlyoutItem() { Text = "InsertRow", Height = 50 };
    insertRow.BorderThickness = new Thickness(0);
    insertRow.Click += insertRow_Click;
    menu.Items.Add(insertRow);

    var deleteRow = new MenuFlyoutItem() { Text = "DeleteRow", Height = 50 };
    deleteRow.BorderThickness = new Thickness(0);
    deleteRow.Click += deleteRow_Click;
    menu.Items.Add(deleteRow);
    return menu;         
}

CellContextMenuOpening event

This event occurs when the context menu opens in the SfCellGrid. It receives an argument of type CellContextMenuOpeningEventArgs containing the following information about the event.

Property Description
Cell Gets or sets the row or column index of the cell.
Handled Gets or sets whether the event should be handled or not.
CellContextMenu Gets or sets the context menu for the cell.

User can add or delete the context menu items at runtime by using the CellContextMenuOpening event.

cellGrid.CellContextMenuOpening += CellGrid_CellContextMenuOpening;

private void CellGrid_CellContextMenuOpening(object sender, CellContextMenuOpeningEventArgs e)
{
    var cellIndex = e.Cell;
    
    //To remove the context menu 
    e.CellContextMenu.Items.RemoveAt(0);
    
    e.Handled = true;
}