:: Forum >> Version 1 >>

Copy & Paste

My users need to copy data from the table to paste them outside, for example excel.. any suggestion?
reganissu
Monday, March 22, 2004
Current grid does not support copy/paste through clipboard. If you are OK with copying just text (non-rectangular) - you may try to enable selection and right-mouse click menu:

/javascript.forum.651.2/
Alex (ActiveWidgets)
Monday, March 22, 2004
Tried to add your copy/paste suggestion but does not work. Any suggestions or new advice on enabling copy/paste functionality?
Tim Gist
Wednesday, April 7, 2004
Howdy, I could use this functionality and see that this thread has gone stale but... I do have a possible suggestion.

How about capturing the CTL-C key in the grid, clearing and populating a hidden textarea with the standard excel format (tab delimited) and do the sort of magic copy like so?

txtBuffer.focus()
txtBuffer.select()
if (
document.all){
var 
selText=txtBuffer.createTextRange()
selText.execCommand("Copy")
 
Granted this may only work with ie unless you sign your code
http://www.krikkit.net/howto_javascript_copy_clipboard.html
B Hatt
Saturday, April 30, 2005
In case anyone is interested in this sort of thing, here is what I am using. To run it, save the code in a file cpexcel.htm and modify the css and js link at the top to point to your local copies

<html>
<
head>
<!--
Edit the below 2 references to point your grid.js and grid.css
-->
    <
link href="http://www.activewidgets.com/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
    <
script src="http://www.activewidgets.com/runtime/lib/grid.js"></script>


<
title>Copy to Excel Hack</title>
<
style type="text/css">
body background-colorwhite; }
a.tab 
  
colorblack;
  
border-styleoutset outset none outset
  
border-color#cbc7b8
  
border-width1px 1px 0px 1px
  
background-color:  #fbfcff
  
padding0px 1em 0px 1em
  
margin0px;
  
font-familyarial
  
text-decorationnone;
}
a.tabSelected
  
color:  black;
  
border-styleoutset outset none outset
  
border-color:  #cbc7b8
  
border-width1px 1px 0px 1px
  
background-color#ebeadb
  
padding2px 1em 1px 1em
  
margin-top0px;
  
font-familyarial
  
text-decorationnone;
  
z-index:1000;
  
position:relative;
  
overflow:visible;
  
top:2
  
}
a.tabSelected:hover 
}

a.tab:hover 
border-colorblack
background-colorwhite
}
.
panel borderoutset 1px blackbackground-color#ebeadbpadding-bottom1pxpadding0px;  height300pxoverflowauto;}
</
style>
<
script language="JavaScript" type="text/javascript">
var 
tabCount 3;
var 
selectedTab null;

function 
showPanel(tab){
  for(
1<= tabCounti++){
    
document.getElementById('panel' +i).style.display = (tab.target == 'panel'i'block':'none';
    
document.getElementById('tab' +i).className 'tab'
  
}
  
selectedTab tab;
  
selectedTab.className 'tabSelected';

return 
false;
}
</
script>

<!-- 
grid format -->
<
style>
.
active-controls-grid {height100%; fontmenu;background-color:white}

.
active-column-{width80px;}
.
active-column-{width200px;}
.
active-column-{text-alignright;}
.
active-column-{text-alignright;}
.
active-column-{text-alignright;}

.
active-grid-column {border-right1px solid threedlightshadow;}
.
active-grid-row {border-bottom1px solid threedlightshadow;}
</
style>

<!-- 
grid data -->
<
script>
var 
myData = [
[
"MSFT","Microsoft Corporation""314,571.156""32,187.000""55000"],
[
"ORCL""Oracle Corporation""62,615.266""9,519.000""40650"],
[
"SAP""SAP AG (ADR)""40,986.328""8,296.420""28961"],
[
"CA""Computer Associates Inter""15,606.335""3,164.000""16000"],
[
"ERTS""Electronic Arts Inc.""14,490.895""2,503.727""4000"],
[
"SFTBF""Softbank Corp. (ADR)""14,485.840"".000""6865"],
[
"VRTS""Veritas Software Corp.""14,444.272""1,578.658""5647"],
[
"SYMC""Symantec Corporation""9,932.483""1,482.029""4300"],
[
"INFY""Infosys Technologies Ltd.""9,763.851""830.748""15400"],
[
"INTU""Intuit Inc.""9,702.477""1,650.743""6700"],
[
"ADBE""Adobe Systems Incorporate""9,533.050""1,230.817""3341"],
[
"PSFT""PeopleSoft, Inc.""8,246.467""1,941.167""8180"],
[
"SEBL""Siebel Systems, Inc.""5,434.649""1,417.952""5909"],
[
"BEAS""BEA Systems, Inc.""5,111.813""965.694""3063"],
[
"SNPS""Synopsys, Inc.""4,482.535""1,169.786""4254"],
[
"CHKP""Check Point Software Tech""4,396.853""424.769""1203"],
[
"MERQ""Mercury Interactive Corp.""4,325.488""444.063""1822"],
[
"DOX""Amdocs Limited""4,288.017""1,427.088""9400"],
[
"CTXS""Citrix Systems, Inc.""3,946.485""554.222""1670"],
[
"KNM""Konami Corporation (ADR)""3,710.784"".000""4313"]
];

var 
myColumns = [
"Ticker""Company Name""Market Cap.""$ Sales""Employees"
];
</
script>

</
head>

<
body>

<
h1>Copy to Excel Hack</h1>

<
a href="javascript:void(0);" target="panel1" id="tab1" class="tabSelected" onclick="return showPanel(this);">Grid</a>
<
a href="javascript:void(0);" target="panel2" id="tab2" class="tab" onclick="return showPanel(this);">Text Data</a>
<
a href="javascript:void(0);" target="panel3" id="tab3" class="tab" onclick="return showPanel(this);">About</a>

<
div class="panel" id="panel1" style="display: block;">
<
script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count"20);
obj.setColumnProperty("count"5);

// provide cells and headers text
obj.setDataProperty("text", function(ij){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

// set click action handler
obj.setAction("click", function(src){window.status src.getItemProperty("text")});

obj.setSelectionProperty("multiple"true); 

document.onkeyup null;

obj.setEvent("onkeyup", function(item){
  
//Get CTL-c
  
alert(event.keyCode)
  if(
event.keyCode==67&&event.ctrlKey){
    
event.cancelBubble true;
    
event.returnValue=false
    
var selRows this.getSelectionProperty("values");
    
//Dumb assumption that if there is only one row selected then they want all, otherwise just the selected rows
    
if(selRows.length == 1){
      var 
all obj.getProperty("row/values");
      
obj.setProperty("selection/values"all);
    }
    var 
colCount obj.getColumnCount();
    
selRows this.getSelectionProperty("values");
    var 
txtSelBuf document.getElementById('txtSelBuf');
    var 
txtData document.getElementById('txtData');
    var 
sbuffer '';
    
//Dumb assumption that if there is only one row selected then they want all, otherwise just the selected rows
    
var rowCount selRows.length;
    
//alert(selRows.length + ' ' + colCount)
    
for(var i=0;i<rowCount;i++){
      for(var 
j=0;j<colCount;j++){
        
sbuffer+=obj.getDataValue(i,j);
        if(
j!=colCountsbuffer+='\t'//Don't want trailing tab
        
}
        
sbuffer+='\n';
      }
      
txtSelBuf.value sbuffer;
      
txtData.value sbuffer;
      
txtSelBuf.focus();
      
txtSelBuf.select();
      if (
document.all){
        var 
selText=txtSelBuf.createTextRange();
        
selText.execCommand("Copy");
       }else{
        
alert('Close this box and press \'CTL-c\' to copy');
        
txtSelBuf.focus();
        
txtSelBuf.select();
       }
       return 
false;
    }else if(
event.keyCode==65&&event.ctrlKey){ 
      
//BUG? this does not seem to capture CTL-a
      //event.cancelBubble = true;
      //event.returnValue=false;
    
}
} );

// write grid html to the page
document.write(obj);


</
script>
<
textarea rows="0" cols="100" id="txtSelBuf" style="height:0;width:0"></textarea>
</
div>
<
div class="panel" id="panel2" style="display: none;">
<
fieldset><legend>Data</legend>
<
textarea rows="20" cols="100" id="txtData" style="height:200;"></textarea>
</
fieldset>
</
div>
<
div class="panel" id="panel3" style="display: none;">
<
fieldset><legend>Copy to Excel Hack</legend>
<
div style="width:350;padding:30">
This is not the most elegant way of getting data into a spreadsheet but it works 
well enough 
for my purposesTried to capture the CTL-a so that the screen 
does not get selected but no luck
When working with dataan easy way to copy and paste into an excel type worksheet is really handy.

It will copy okay in IE but I've added a pain-in-the-ass hack for ff/moz browsers that does copy with an extra CTL-c.

If there is a better way to do this (other than a trip to the server), post your solution

</fieldset>
</div>
<script>showPanel(document.getElementById('
tab1'));</script>

</body></html>

 
B Hatt
Monday, May 2, 2005
Whoops , one thing you will want to do is remove

line
145:    alert(event.keyCode
B Hatt
Monday, May 2, 2005
I think this is something missing in the logic. If you select for example rows 5 and 6, press Ctrl-C, you get the 1st two rows in the Text Data. If you select any 3 rows, you get the first 3 lines, etc.

I tried to modify the code, but I'm note sure what var has the line number(s) selected. I assume you'd want that in an array and loop through the array and for each call myData[i][j]. Any help?
Lorenzo
Wednesday, June 29, 2005
I'm not a javascript expert, but I think I figured it out. This seems to work for me, on line 164:

// sbuffer+=obj.getDataValue(i,j); remove this line-replace with
sbuffer+=obj.getDataValue(selRows[i],j);
Lorenzo
Wednesday, June 29, 2005
I have a grid which has been populated with an XMl using Active.XML.Table. When I do obj.getDataValue(i,j) I get all 0s any ideas why?
AAZ
Wednesday, August 17, 2005
hello evry1 im new 2 html codes can anyone help me i am trying to create a forum page and it's kinda not working hu can help me...

rite now i need a forums page that has a post new thread link, post reply link etc. so plz help me !!!
david stewart
Sunday, October 2, 2005



This topic is archived.

Back to support forum

Forum search