copy row excluding hidden colunms

[Paul]

How can I exclude hidden columns when copying selected rows using the grid? 

[Farveen Sulthana Thameeztheen Basha]

Hi Paul,

Greetings from Syncfusion Support.

Query#:-How can I exclude hidden columns when copying selected rows using the grid?

Before proceeding this, we need some more additional information to find the cause of the issue. Share us the following details.

1. Complete Grid code example.
2. Share us the details of how you have copied the Selected rows?
3. Screenshot/Video Demo to replicate the issue.

Based on your provided details we will provide you solution earlier

Regards,

Farveen sulthana T

[Paul]

Here are my columns from the grid. eventdetail_id and player_id are hidden from the UI grid. However when I use the context menu to copy to clipboard these hidden columns are copied to. How do I prevent that?


Current output

506 99 1 max 1,000,000

Desired output

1 max 1,000,000

<ClientSideEvents ActionComplete="completeActive" EndAdd="endActiveAdd" EndEdit="endActiveEdit" RecordDoubleClick="doubleClick" ContextClick="contextClick" />

<Columns>

 <ej:Column Field="eventdetail_id" HeaderText="eventdetail_id" IsPrimaryKey="true" IsIdentity="true" TextAlign="Right" Width="25" Visible="False"></ej:Column>

<ej:Column Field="player_id" HeaderText="PlayerID" TextAlign="Left" Width="75" Visible="False" AllowEditing="false"></ej:Column>

<ej:Column Field="place" HeaderText="#" TextAlign="Left" Width="25" Format="{0:n0}" Visible="True" AllowEditing="false"></ej:Column>

<ej:Column Field="player_name" HeaderText="Player" TextAlign="Left" Width="200" Visible="True" AllowEditing="false"></ej:Column>

<ej:Column Field="points" HeaderText="Points" Width="60" Format="{0:n0}" EditType="NumericEdit" DefaultValue="0" TextAlign="Right">

</Columns>

function contextClick(args) {

            if (args.text == "Copy Row") {

                var rows = this.getSelectedRows();

                var clone = rows.clone();

                var table = $("<table></table>");

                for (var i = 0; i < clone.length; i++) {

                    table.append(clone[i]);

                }

                $("body").append(table);

                var range = document.createRange();

                var selection = window.getSelection();

                range.selectNode(table[0]);

                selection.removeAllRanges();

                selection.addRange(range);

                document.execCommand('copy');

                table.remove();

            }

        }

Attachment: Capture_14c140d2.zip

[Farveen Sulthana Thameeztheen Basha]

Paul,

Query#:- However when I use the context menu to copy to clipboard these hidden columns are copied to. How do I prevent that?

To achieve your requirement, we suggest to handle the remove the td which contains e-hide class(which set for hidden columns) from the tr. So we suggest to use below code the copy the row excluding the hidden columns.

function contextClick(args) {

     if (args.text == "Copy Row"){

             var rows = this.getSelectedRows();

              var clonedrow = rows.clone();

              var tds = Array.from(clonedrow[0].querySelectorAll('td'));

              var filteredTds = tds.filter(td => {

                   return !td.classList.contains("e-hide");   //exclude the hidden column by removing the corresponding td by which contains e-hide class

 

               });

             var newTds = filteredTds.map(td => $(td));

                $(clonedrow).empty();

                 $(clonedrow).append(newTds);

                        .  .    .

 

           

      }

},

 

Alternatively, you can use the below solutions while copying the Contents from the row.

Solution:- We have already discussed about select and copying the data in Grid in our Syncfusion Knowledge base. For your convenience please find the KB in following link.  KB link:  https://www.syncfusion.com/kb/6318/how-to-select-the-content-in-grid-cells 

Solution:- Using CSS property class 

By default, user-select property will be set to none in the ejGrid. If you would like to disable this, you must override this property in the Grid. This can be achieved by using the
CssClass
property of the Grid.  

<ej:Grid ID="Grid" runat="server" AllowPaging="True" CssClass="CopyText" > 

            .  .   .

</ej:Grid> 

 

 

<style> 

    .e-grid.copyText .e-rowcell { 

        -moz-user-select: inherit; 

        -khtml-user-select: inherit; 

        -webkit-user-select: text; 

        -ms-user-select: inherit; 

        user-select: inherit; 

    } 

</style> 

Documentation link:- https://help.syncfusion.com/aspnet/grid/columns?cs-save-lang=1&cs-lang=html

I hope anyone of these solutions will resolve your issue. If you need any further assistance, please don't hesitate to ask.