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);
Event related with cut operation
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);
Event related with copy operation
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. |
Event related with paste operation
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;
}