Documentation

Clipboard Operations

Enabling the clipboard support

To make copying data to the clipboard possible, include the dhtmlxgrid_nxml.js file on the page:

<script src="../codebase/ext/dhtmlxgrid_nxml.js" type="text/javascript"></script>

Note, data from the grid is copied in the CSV format.

You need to set a tab as the delimiter (using grid.csv.cell="\t" syntax) to have a possibility to insert copied data to MS Excel.

Copying the entire grid

To copy the entire grid's data to the clipboard (in the CSV format), call the gridToClipboard method:

mygrid.gridToClipboard();

Related sample:  Operations with clipboard


To paste the copied data to the grid, use the gridFromClipboard method:

mygrid.clearAll(); // clears grid
mygrid.gridFromClipboard();//copies the content from the clipboard (uses active delimiter)

Related sample:  Operations with clipboard

Copying a row

To copy the data of a row to the clipboard, use the rowToClipboard method:

mygrid.rowToClipboard("row1");//"row1" - the row's id
//or
mygrid.rowToClipboard(); //copies the currently selected row

Related sample:  Operations with clipboard


To update some row with the data from the clipboard, use the updateRowFromClipboard method:

mygrid.updateRowFromClipboard("row1");//"row1" - the row's id
//or
mygrid.updateRowFromClipboard(); //updates the currently selected row

Related sample:  Operations with clipboard


To add a new row with the data from the clipboard, use the addRowFromClipboard method:

mygrid.addRowFromClipboard();//adds a row to the end of the grid

Related sample:  Operations with clipboard

Copying a cell

To copy the value of a cell to the clipboard, use the cellToClipboard method:

mygrid.cellToClipboard("row1",0); //"row1" - the row id. 0 - the col index
//or
mygrid.cellToClipboard();//copies the currently selected cell

Related sample:  Operations with clipboard


To update some cell with the value from the clipboard, use the updateCellFromClipboard

mygrid.updateCellFromClipboard("row1", 0);//"row1" - the row id. 0 - the col index
//or
mygrid.cellToClipboard();//updates the currently selected cell

Related sample:  Operations with clipboard

Copying a block of cells

dhtmlxGrid provides a special copying mode - "Block selection" that allows users to select a block of cells for their further copying to the clipboard.

To enable the "Block selection" mode on the page:

  1. Include one additional file on the page:
    <script src="../codebase/ext/dhtmlxgrid_selection.js" type="text/javascript"></script>
  2. Call the enableBlockSelection method, to enable the mode:
    mygrid.enableBlockSelection(true); // false to disable

The selection color is specified by the '.dhtmlxGrid_selection' class in the the 'dhtmlxgrid.css' file. By default, the selection is set to yellow.


To copy a block of cells, use the copyBlockToClipboard method:

mygrid.forceLabelSelection(true);


To copy/paste only the visible text of cells (not values behind them), use the forceLabelSelection method:

mygrid.forseLabelSelection();


To paste the copied block of cells into the grid, use the pasteBlockFromClipboard method:

mygrid.pasteBlockFromClipboard();

Related sample:  Copy to clipboard

If clipboard operations is blocked by browser

Clipboard operations may be blocked at some browsers. To execute alternative code in such case, use the dhtmlxError object as in:

dhtmlxError.catchError("Clipboard",function(){
     //any custom message here 
})
Back to top