New to Telerik UI for Blazor? Start a free 30-day trial
Copy Text from Grid Row to Clipboard
Updated on Dec 4, 2025
Environment
| Product | Grid for Blazor |
Description
I want to add a right-click context menu to a Grid, which allows copying text from the Grid to the clipboard. The copied text can then be pasted into an Editor or anywhere else.
Solution
To achieve this, implement a context menu for the Grid and include a "Copy to Clipboard" option. Follow these steps:
- Define the context menu and its items.
- Handle the right-click event to show the context menu.
- Implement the logic to copy the selected row's text to the clipboard by using the navigator clipboard API.
@using System.Collections.Generic
@using System.Collections.ObjectModel
@inject IJSRuntime JS
<TelerikTextBox @bind-Value="@TheEditorValue" Placeholder="Paste text here.." Width="300px"></TelerikTextBox>
<br/>
<br/>
<TelerikContextMenu @ref="@ContextMenuRef" Data="@MenuItems"
OnClick="@((MenuItem item) => ContextMenuClickHandler(item))">
</TelerikContextMenu>
<TelerikGrid Data="@GridData" @ref="@GridRef"
Pageable="true"
OnRowContextMenu="@OnContextMenu">
<GridColumns>
<GridColumn Field=@nameof(SampleData.ID) />
<GridColumn Field=@nameof(SampleData.Name) />
</GridColumns>
</TelerikGrid>
@code {
private string TheEditorValue { get; set; }
private ObservableCollection<SampleData> GridData { get; set; }
private List<MenuItem> MenuItems { get; set; }
private SampleData SelectedPerson { get; set; }
private TelerikContextMenu<MenuItem> ContextMenuRef { get; set; }
private TelerikGrid<SampleData> GridRef { get; set; }
private async Task OnContextMenu(GridRowClickEventArgs args)
{
SelectedPerson = args.Item as SampleData;
if (args.EventArgs is MouseEventArgs mouseEventArgs)
{
await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY);
}
}
private async Task ContextMenuClickHandler(MenuItem item)
{
if (item.Action != null)
{
item.Action.Invoke();
}
else if (item.CommandName == "CopyRow" && SelectedPerson != null)
{
string rowText = $"ID: {SelectedPerson.ID}, Name: {SelectedPerson.Name}";
await CopyToClipboard(rowText);
}
SelectedPerson = null;
}
private async Task CopyToClipboard(string text)
{
await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
}
protected override void OnInitialized()
{
MenuItems = new List<MenuItem>()
{
new MenuItem(){ Text = "Copy Row Text", Icon = SvgIcon.Copy, CommandName="CopyRow" },
new MenuItem(){ Text = "Delete", Icon = SvgIcon.Trash, Action = DeleteItem }
};
GridData = new ObservableCollection<SampleData>();
for (int i = 1; i <= 20; i++)
{
GridData.Add(new SampleData()
{
ID = i,
Name = $"Employee {i}"
});
}
}
private void DeleteItem()
{
if (SelectedPerson != null)
{
GridData.Remove(SelectedPerson);
}
}
public class MenuItem
{
public string Text { get; set; }
public ISvgIcon Icon { get; set; }
public Action Action { get; set; }
public string CommandName { get; set; }
}
public class SampleData
{
public int ID { get; set; }
public string Name { get; set; }
}
}