Copy & Paste

My users need to copy data from the table to paste them outside, for example excel.. any suggestion?

reganissu

March 22,

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:

http://www.activewidgets.com/messages/651-2.htm

Alex (ActiveWidgets)

March 22,

Tried to add your copy/paste suggestion but does not work. Any suggestions or new advice on enabling copy/paste functionality?

Tim Gist

April 7,

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

April 30,

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-color: white; }
a.tab { 
  color: black;
  border-style: outset outset none outset; 
  border-color: #cbc7b8; 
  border-width: 1px 1px 0px 1px; 
  background-color:  #fbfcff; 
  padding: 0px 1em 0px 1em; 
  margin: 0px;
  font-family: arial; 
  text-decoration: none;
}
a.tabSelected{ 
  color:  black;
  border-style: outset outset none outset; 
  border-color:  #cbc7b8; 
  border-width: 1px 1px 0px 1px; 
  background-color: #ebeadb; 
  padding: 2px 1em 1px 1em; 
  margin-top: 0px;
  font-family: arial; 
  text-decoration: none;
  z-index:1000;
  position:relative;
  overflow:visible;
  top:2
  }
a.tabSelected:hover { 
}

a.tab:hover { 
border-color: black; 
background-color: white; 
}
.panel { border: outset 1px black; background-color: #ebeadb; padding-bottom: 1px; padding: 0px;  height: 300px; overflow: auto;}
</style>
<script language="JavaScript" type="text/javascript">
var tabCount = 3;
var selectedTab = null;

function showPanel(tab){
  for(i = 1; i <= tabCount; i++){
    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 {height: 100%; font: menu;background-color:white}

.active-column-0 {width: 80px;}
.active-column-1 {width: 200px;}
.active-column-2 {text-align: right;}
.active-column-3 {text-align: right;}
.active-column-4 {text-align: right;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px 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(i, j){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!=colCount) sbuffer+='\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 purposes. Tried to capture the CTL-a so that the screen 
does not get selected but no luck. When working with data, an 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

May 2,

Whoops , one thing you will want to do is remove

line

145:    alert(event.keyCode)

B Hatt

May 2,

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

June 29,

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

June 29,

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

August 17,

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

October 2,

This topic is archived.

Copy & Paste

See also:

Search

New Data Grid

Version 2