Copy jqGrid CSV Data to Clipboard

Here's a simple snippet for JQuery's jqGrid to enable the data in the grid to be copied to the clipboard. You'll need to set the grid's multiselect property to true. Then you simply add some extra code below your jqGrid initialisation code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19$("#mygrid").jqGrid('navButtonAdd', '#mygrid-pager', { caption: 'Copy to Clipboard', buttonicon: 'ui-icon-clipboard', title: 'Copy to Clipboard', onClickButton: function() { // copies selected tdp's to clipboard // NOTE: THIS ONLY WORKS IN IE. var selected = $("#mygrid-table").getGridParam('selarrrow'); var csv = ''; for (i in selected) { var rowdata = jQuery("#mygrid-table").getRowData(selected[i]); csv = csv + rowdata.MyColA + "\t" + rowdata.MyColB + "\t" + rowdata.MyColC + "\t" + rowdata.MyColD + "\r\n"; } if (window.clipboardData) { window.clipboardData.setData('text', csv); } alert('Data has been copied'); } });

This code adds a new button to the footer/pager in the grid. The code simply loops through all the selected rows in the grid, and builds up a csv string. This string is then copied to the clipboard. Note that this only works with IE. Other browsers do not support a native copy to clipboard, and hacks involving Flash must be used.
David Barone, 11 March, 2010, 1:21 pm
Last Modified: 11 March, 2010, 1:29 pm

Comments:

Comments are closed for this article.