Button to copy grid to clipboard

7 posts, 0 answers
  1. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 23 Oct 2008 Link to this post

    I am putting a grid inside a tooltip, and have a command button which when clicked I want to copy to contents of the grid to the clipboard. Can someone help me with the javascript needed to do this?

    Thanks,
    Laura
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 24 Oct 2008 Link to this post

    Hello Laura,

    Check out the following online demo link which demonstrates on how to create Copy/Paste functionality by means of a RadContextMenu.
    Copy/Paste

    Thanks
    Princy.
  3. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 24 Oct 2008 Link to this post

    Thanks as always Princy. I really want this totally automated so that the user only has to hover over the number of users and a tooltip with a grid of users appears in the tooltip and in the tooltip is a button command that says copy. I don't want them to have to right click and select the grid...I want the copy button to automatically select all and do the copying for me. Do you know of any way to do this?

    Thanks
  4. Laura
    Laura avatar
    131 posts
    Member since:
    Aug 2008

    Posted 26 Oct 2008 Link to this post

    Since I have as yet received an answer I am trying to work on this to the best of my knowledge. This is what I am trying to do:

    I am iterating on the client side through the grid and i concatenate to one large string. I have 4 columns, so I am putting each column followed by a tab, and then at the end of each row a new line. Then I will write this string out to the clipboard. I tried doing it on the server, and the string was built, but I could not access the clipboard on the server side, so I am trying to write the code on the client. The grid I am trying to copy is a template inside a tooltip.

    I have a client settings on-command and it doesnt fire the javascript when I click the button( which is a command item). I put in a clientevent on key press, and it actually works if I highlight and press a key, but not on command(which is where my button is)  Here is the aspx:
     <telerik:RadToolTip runat="server" ID="RadToolTip2" TargetControlID="Label1"
                                    Skin="Inox" ShowDelay="500" AutoCloseDelay="200000" Font-Names="arial"
                                    Font-Size="XX-Large" BorderStyle="Inset" HideDelay="100000" ManualClose="False"
                                    Position="BottomRight" Sticky="True" Width="300">  
                                        <telerik:RadGrid ID="toolTipUsers" runat="server"  DataSourceID="ContentCentralActiveUsers"  
                                        GridLines="None" Skin="Default" AutoGenerateColumns="False"
                                           commanditemdisplay="Top">
                                          <MasterTableView  DataSourceID="ContentCentralActiveUsers"   CommandItemDisplay="Top"  NoMasterRecordsText="No users to display."   
                                                        GridLines="None"    ItemStyle-Wrap="false" >
                                          <CommandItemTemplate>
                                            <asp:Button ID="copy" runat="server" CommandName="Copy" Text="Copy to clipboard" >                               
                                            </asp:Button>
                                          </CommandItemTemplate>
                                          <ItemStyle  Font-Size="Larger"  Wrap="false"/>
                                          <AlternatingItemStyle  Font-Size="Larger" Wrap="false" />
                                            <Columns>
                                               <telerik:GridBoundColumn DataField="login_name" HeaderText="User name"  UniqueName="username"  ></telerik:GridBoundColumn>
                                               <telerik:GridBoundColumn DataField="password" HeaderText="Password"  UniqueName="password"  ></telerik:GridBoundColumn>
                                               <telerik:GridBoundColumn DataField="email" HeaderText="Email" UniqueName="email"  ></telerik:GridBoundColumn>
                                               <telerik:GridBoundColumn DataField="package_name" HeaderText="Package" UniqueName="package" ></telerik:GridBoundColumn>
                                            </Columns>
                                          </MasterTableView>
                                          <ClientSettings     ClientEvents-OnCommand="ButtonClicked"></ClientSettings>
                                   </telerik:RadGrid>
                                 </telerik:RadToolTip>


    and here is the javascript:

       function ButtonClicked(sender, args) {

                   var grid = sender;
                   var MasterTable = grid.get_masterTableView();
                    var rows = MasterTable.get_dataItems();
                    var cell;
                    var username;
                    var password;
                    var email;
                    var spackage;
                    var copyString;
                    copyString = "User name \t Password \t Email \t Package  \r\n";
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        
                        cell = MasterTable.getCellByColumnUniqueName(row, "username");
                        username = cell.innerHTML;
                        cell = MasterTable.getCellByColumnUniqueName(row, "password");
                        password = cell.innerHTML;
                        cell = MasterTable.getCellByColumnUniqueName(row, "email");
                        email = cell.innerHTML;
                        cell = MasterTable.getCellByColumnUniqueName(row, "package");
                        spackage = cell.innerHTML;
                        copyString = copyString + username +"\t"+password+"\t"+email+"\t"+spackage+"\r\n";
                    }
                    window.clipboardData.setData('text', copyString);
           }



  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 27 Oct 2008 Link to this post

    Hello Laura,

    You can either extract the grid data using your code or have a look at the attached sample and the solution provided there.

    Let me know if this helps.

    Regards,
    Iana
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. George
    George avatar
    1 posts
    Member since:
    May 2019

    Posted 24 May Link to this post

    The referenced example above no longer exists.
  7. Attila Antal
    Admin
    Attila Antal avatar
    429 posts

    Posted 29 May Link to this post

    Hi George,

    The location has changed over the years.

    Please try the following link to access the Copy/Paste CodeLibrary sample: Copy-Paste Cell/Row data through RadContextMenu with Batch Editing

    Kind regards,
    Attila Antal
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top