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 content from clipboard(uses the specified 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 blocked by browser

Clipboard operations may be blocked in some browsers. In such a case, to execute an alternative code use the dhtmlxError object as in:

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