We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

copy row excluding hidden colunms

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

3 Replies

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team January 12, 2023 02:54 PM UTC

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


Farveen sulthana T

PA Paul February 1, 2023 02:23 AM UTC

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" />


 <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">


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++) {




                var range = document.createRange();

                var selection = window.getSelection();








Attachment: Capture_14c140d2.zip

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team February 1, 2023 02:39 PM UTC


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));



                        .  .    .






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
property of the Grid.  

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

            .  .   .





    .e-grid.copyText .e-rowcell { 

        -moz-user-select: inherit; 

        -khtml-user-select: inherit; 

        -webkit-user-select: text; 

        -ms-user-select: inherit; 

        user-select: inherit; 



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.

Live Chat Icon For mobile
Up arrow icon