New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial
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:
- Add the following HTML markup for the button:
html
<asp:Button ID="CopyContentButton" runat="server" Text="Copy PageView Content" OnClientClick="copyPageViewContent(); return false;" />
- Add the following JavaScript code to define the
copyPageViewContent
function:
javascript
<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>
- Add the RadTabStrip and RadMultiPage controls to your page:
html
<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.