How to Add a Copy to Clipboard Button for RadTabStrip

Environment

Product	RadTabStrip for ASP.NET AJAX
Version	all

Description

I need to add a Copy to Clipboard button for a RadTabStrip in ASP.NET AJAX.

Solution

To add a Copy to Clipboard button for a RadTabStrip in ASP.NET AJAX, follow these steps:

1. Add the following HTML markup for the button:

<asp:Button ID="CopyContentButton" runat="server" Text="Copy PageView Content" OnClientClick="copyPageViewContent(); return false;" />

1. Add the following JavaScript code to define the copyPageViewContent function:

<script type="text/javascript">
    function copyPageViewContent() {
        var multiPage = $find("<%= RadMultiPage1.ClientID %>"); // Find the RadMultiPage control
        var selectedPageView = multiPage.get_selectedPageView(); // Get the currently selected page view
        var content = selectedPageView.get_element().innerHTML; // Get the content of the selected page view

        navigator.clipboard.writeText(content).then(function () {
            console.log('Copying to clipboard was successful!');
            console.log(content);
        }, function (err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

1. Add the RadTabStrip and RadMultiPage controls to your page:

<telerik:RadTabStrip RenderMode="Lightweight" runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" SelectedIndex="0" Skin="Silk">
    <Tabs>
        <telerik:RadTab Text="My Cook Book" Width="200px"></telerik:RadTab>
        <telerik:RadTab Text="Newest" Width="200px"></telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
    <telerik:RadPageView runat="server" ID="RadPageView1">
        <!-- Page view content goes here -->
    </telerik:RadPageView>

    <telerik:RadPageView runat="server" ID="RadPageView2">
        <!-- Page view content goes here -->
    </telerik:RadPageView>
</telerik:RadMultiPage>

Note:

• This solution uses the Clipboard API to copy the content to the clipboard. User permission may be required for copying actions, and they are usually only permitted as a direct result of user interaction.
• The script assumes that the inner HTML of the RadPageView is the content you want to copy. If you only want to copy text, additional processing of the content variable would be necessary to remove HTML tags.

See Also

• StackOverflow - How do I copy to the clipboard in JavaScript
• w3schools - How to Copy Text to the Clipboard
• MDN - Clipboard API - writeText