New to Telerik UI for Blazor? Start a free 30-day trial
How to Copy Text from an ItemTemplate
Updated on Jun 17, 2025
Environment
Product | AutoComplete for Blazor | DropDownList for Blazor | ComboBox for Blazor | MultiSelect for Blazor |
Description
I want to allow users to copy the text from the dropdown list in the AutoComplete component.
Solution
To enable text copying from the dropdown list in the AutoComplete, use the ItemTemplate
to display the desired text alongside a button that uses JavaScript and the Clipboard API for copying. Here’s an example implementation:
@inject IJSRuntime JS
<style>
.autocomplete-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
</style>
<TelerikAutoComplete Data="@AutoCompleteData" @bind-Value="@Role" Placeholder="Write your position">
<ItemTemplate>
@{
var text = context.ToString();
}
<div class="autocomplete-item">
<strong>@text</strong>
<TelerikButton OnClick="@(() => CopyToClipboard(text))"
Icon="@SvgIcon.Copy"
FillMode="@ThemeConstants.Button.FillMode.Outline" />
</div>
</ItemTemplate>
</TelerikAutoComplete>
@code {
private string Role { get; set; }
private List<string> AutoCompleteData { get; set; }
private List<string> SourceData { get; set; } = new()
{
"Manager", "Developer", "QA", "Technical Writer", "Support Engineer", "Sales Agent", "Architect", "Designer"
};
protected override void OnInitialized()
{
AutoCompleteData = SourceData;
}
private void OnCheckBoxChangeHandler()
{
AutoCompleteData = new List<string>(SourceData);
}
private async Task CopyToClipboard(string text)
{
try
{
var isSupported = await JS.InvokeAsync<bool>("eval", "!!(navigator.clipboard && navigator.clipboard.writeText)");
if (isSupported)
{
await JS.InvokeVoidAsync("navigator.clipboard.writeText", text);
}
else
{
Console.WriteLine("Clipboard API not supported in this browser.");
// Optionally show a notification to the user
}
}
catch (Exception ex)
{
Console.Error.WriteLine($"Clipboard copy failed: {ex.Message}");
// Optionally show a fallback UI message to the user
}
}
}