The Task
I recently had a task for users to easily copy information displayed in a Gridview, then paste it into another application. They only needed a few pieces of information from the GridView to be copied. I searched Google for some quick code that I could plug in and make it possible. I quickly found some solutions, but, they only worked for Internet Explorer. That’s a problem because my customer only uses Google Chrome. I tested what I thought were the top 5 of the solutions, but I could not get them to work with Google Chrome, I did eventually solve the problem, but, it was easy 10+ hours later with trial and error. I thought my solution might help others, so here goes.
The HTML Page
In my ASPX page I added a LinkButton and a Hidden field inside my GridView’s TemplateField where I also had my existing checkbox to make a row selection. I placed the LinkButton just below it so it would be easy for the user’s to click right away and not have to scroll right, just click, go to their other application and paste. Just a note about security, there is a security issue because you really don’t want a website you visit to have control of your computers clipboard (where the information is temporarily stored during a copy and paste). For that reason a user interaction has to be performed (in this case a LinkButton), which signals that the operation is OK to do.
<asp:GridView ID="GridView1" runat="server" CellPadding="4" ForeColor="#333333" AutoGenerateColumns="False" DataKeyNames="ReportID" HorizontalAlign="Left" ShowFooter="True" AllowSorting="True" OnSorting="GridView1_Sorting">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="CB1" runat="server" onclick="Check_Click(this)" ClientIDMode="Static" />
<asp:LinkButton ID="lbCopyClipboard" ClientIDMode="Static" runat="server"><span style="font-size:12px;background-color:paleturquoise;">CB</span></asp:LinkButton>
<asp:HiddenField ID="CBData" ClientIDMode="Static" runat="server" Value='<%# GatherCB(Eval("Project"), Eval("Job_No"), Eval("Service1"), Eval("Service2"), Eval("Service3"), Eval("Service4"), Eval("Time"), Eval("Technician"))%>'/>
</ItemTemplate>
<ItemStyle Width="20px" />
</asp:TemplateField>
... (rest of the gridview specification)...
Looking at the code you can see that the actual clipboard data I’m going to send is in the HiddenField I created a “GatherCB” function to format the data I’m going to send to the clipboard.
Add this Javascript to your documents Head section
<script>
function copyToClipboard(thistext) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", thistext);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
</script>
Now the Codebehind…
First I’ll start with my “GatherCB” function, so you can see how I assembled the data that I’m going to copy to the clipboard, then the actual function that copies the text from the LinkButton, this code is vb, but you can easily convert it to c# with an online converter there is one available from telerix here.
Protected Function GatherCB(PJName As String, PJNo As String, Svc1 As String, Svc2 As String, Svc3 As String, Svc4 As String, Tme As String, Tch As String) As String
Dim Ret As String = ""
Dim MyServices As String = ""
If Svc1.Trim <> "" Then
MyServices = " " & Svc1.Trim
End If
If Svc2.Trim <> "" Then
MyServices &= ", " & Svc2.Trim
End If
If Svc3.Trim <> "" Then
MyServices &= ", " & Svc3.Trim
End If
If Svc4.Trim <> "" Then
MyServices &= ", " & Svc4.Trim
End If
If Tch.Trim = "" Then
Ret = PJName.Trim & " " & PJNo.Trim & MyServices & " / " & Tme.Trim & " No tech has been assigned yet "
Else
Ret = PJName.Trim & " " & PJNo.Trim & MyServices & " / " & Tme.Trim & " " & Tch.Trim
End If
Return Ret
End Function
in the GridView Row databound event...
Private Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
' Copy to Clipboard
Dim button As LinkButton = DirectCast(e.Row.FindControl("lbCopyClipboard"), LinkButton)
Dim CBData As HiddenField = TryCast(e.Row.FindControl("CBData"), HiddenField)
button.Attributes.Add("onclick", "copyToClipboard('" & CBData.Value & "');")
End If
End Sub
That’s it, a cool and simple way, it works with most browsers. Need something unique for your business computing? Give me a call 972.571.4808.