Start Building Professional
Web Apps Today

grid copy to clipboard

Hi There,

Greetings

I have some issues with DHTMLX grid copy to clipboard. i am using DHTMLX grid with tree view. when i try to copy from grid cells it seems its not working. Please refer my code and guide me how to copy grid cells to clipboard

<html&gt;
<head&gt;
<link rel='STYLESHEET' type='text/css' href='Grid/dhtmlxGrid/codebase/dhtmlxgrid.css'&gt;
<script src='Grid/dhtmlxGrid/codebase/dhtmlxcommon.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/dhtmlxgrid.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/dhtmlxgridcell.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxgrid_selection.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxgrid_nxml.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxgrid_group.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxtreegrid.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxtreegrid_filter.js'&gt;</script&gt;
<script src='Grid/dhtmlxGrid/codebase/ext/dhtmlxtreegrid_lines.js'&gt;</script&gt;

</head&gt;
<body&gt;
<div id='mygrid_container' style='width:880px;height:500px;'&gt;</div&gt; 
<div style='display:none'&gt;

  <div id='RoleFilterBox'&gt;<select style='width=100%' onclick='(arguments[0]||window.event).cancelBubble=true;' onChange='filterBy()'&gt;</select&gt;</div&gt;
  </div&gt;

<!--input type='text' id='companyfilter'--&gt;



<script&gt;

var mygrid;

doInitGrid();

function doInitGrid()
{
 mygrid = new dhtmlXGridObject('mygrid_container'); 
 mygrid.selMultiRows = true;
 mygrid.setImagePath('Images/');
 mygrid.setHeader('Company Name,Full Name,Business Phone, Mobile Phone, e-Mail Address, Fax, Role'); 
 
 mygrid.attachHeader('#text_filter,#text_filter,#rspan,#rspan,#rspan,#rspan,<div id='RoleFilter'&gt;</div&gt;'); 


 mygrid.setInitWidths('*,100,100,120,*,100,100'); 
 mygrid.setColAlign('left,left,left,left,left,left,left'); 
 mygrid.setSkin('modern'); 
 mygrid.setColSorting('str,str,na,na,na,na,str');
 mygrid.setColTypes('tree,ro,ro,ro,link,ro,ro'); 
 mygrid.enableAutoHeigth(true); 
 mygrid.enableAutoWidth(true); 
 mygrid.setSizes();
 mygrid.enableTreeGridLines();

 mygrid.init(); 
 mygrid.attachEvent('onKeyPress',onKeyPressed);
 mygrid.setActive();
 mygrid.loadXML('SampleData.xml', function(){
 var RoleFlt = document.getElementById('RoleFilter').appendChild(document.getElementById( 'RoleFilterBox').childNodes[0]);
  
  populateSelectWithRole(RoleFlt);}); 
}
 mygrid.enableBlockSelection(); 
 mygrid.copyBlockToClipboard();
function onKeyPressed(code,ctrl,shift)
{ 

  if(ctrl&amp;&amp;code==67)
 {
  mygrid.CopySelectionToClipboard();
  
  }
   
  if(ctrl&amp;&amp;code==86)
 {
  mygrid.PasteSelectionFromClipboard();
  }
   
  return true;
}
function filterBy()
{

  var aVal = document.getElementById('RoleFilter').childNodes[0].value.toLowerCase();
   
  for(var i=0; i< mygrid.getRowsNum();i++)
 {
  var aStr = mygrid.cells2(i,6).getValue().toString().toLowerCase();
  if((aVal=='' || aStr.indexOf(aVal)==0))
  mygrid.setRowHidden(mygrid.getRowId(i),false)
  else
  mygrid.setRowHidden(mygrid.getRowId(i),true)
  }
}
 
function populateSelectWithRole(selObj)
{
  selObj.options.add(new Option('All Roles',''))
 
  var usedRoleAr = new dhtmlxArray();
   
 for(var i=0;i<mygrid.getRowsNum();i++)
 {
  var RoleNm = mygrid.cells2(i,6).getValue();
   
  if(usedRoleAr._dhx_find(RoleNm)==-1)
  {
  selObj.options.add(new Option(RoleNm,RoleNm))
  usedRoleAr[usedRoleAr.length] = RoleNm;
  }
  }
}

</script&gt;
</body&gt;
</html&gt;

In your code there ate next method calls
       CopySelectionToClipboard
       PasteSelectionFromClipboard

But there are not such methods in grid, the correct names are
         copyBlockToClipboard
         pasteBlockFromClipboard

all other seems correct.

I have changed the code to

function onKeyPressed(code,ctrl,shift)
{   

    if(ctrl&&code==67)
    {
       
        mygrid.copyBlockToClipboard();
       
    }
       
    if(ctrl&&code==86)
    {
        mygrid.pasteBlockFromClipboard();
    }
       
    return true;
}

Now i am able to copy only single cell not a row complete , can you plz guide me how to achieve this

copyBlockToClipboard operation was designed to copy data from selected area, not the whole row ( if block selection covers whole row - whole row will be copied to clipboard )

The grid supports rowToClipboard methods which will copy whole row to clipboard, but you need to specify ID of row which need to be copied ( so it can't be used with block selection )

The only way, to achieve desired behavior - manual serialization

var data = [];
for (var i=0; i<mygrid.getRowsNum(); i++)
    if (mygrid.getLevel(mygrid.getRowId(i))
         data.push(mygrid._serializeRowToCVS(null,i).replace(/<[^>]*>/g,""));

mygrid.toClipBoard(data.join("\n"));