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.