DHTMLX Docs & Samples Explorer

Copying/Pasting Data (Clipboard Operations)

Selecting Block of Cells in Grid

Since v1.3, block selection is available in dhtmlxGrid. To enable it, the user should include dhtmlxgrid_selection.js file.

Selection color can be changed in dhtmlxgrid.css in class definition for .dhtmlxGrid_selection. It is set to yellow by default. There is one smart method that enables block selection:

        grid.enableBlockSelection(true); // false to disable

Label Selection

This way of selection affects block selection, so it will copy|paste only visible text, not values behind it:

        grid.forceLabelSelection(true|false);

Copying to Clipboard

First, the user should include dhtmlxgrid_nxml.js file into the project to make copying data to the clipboard possible. However, it should be noted that this functionality is prohibited in FireFox by default.

Note: The user should set tab as delimiter (using grid.csv.cell=“\t” syntax) in order to insert copied data to MS Excel.

Copying Block Selection Content

If a block is active, the user can copy its contnet to the clipboard in CSV format (if this is allowed by the browser) in the following way:

        grid.copyBlockToClipboard();

Copying Entire Grid Data

There is a simple way of copying entire grid data to clipboard in CSV format:

        grid.gridToClipboard();

Copying Row Data

Data from the selected rows can be easily copied to the clipboard in CSV format in the following way:

       grid.rowToClipboard(rowId);

There is one optional parameter here: rowId - id of the row in question. If it is not indicated, data of the selected row/rows will be copied.

Copying Cell Data

Data of the selected cell can be copied to the clipboard as well:

        grid.cellToClipboard(rowId, cellInd);

There are two optional parameters in this method:

  • rowId - id of the row (optional); if it is not indicated, the selected row will be used;
  • cellInd - index of the column (optional); if it is not indicated, the selected cell will be used.

Pasting from Clipboard

Pasting data from the clipboard to the grid can be done like this:

  • Update the entire grid from the clipboard:
        grid.clearAll(); // clear grid
        grid.gridFromClipboard(); //Set grid CSV content from the clipboard (uses active delimiter)
  • Update a row from the clipboard (valid row content should be in the clipboard):
        grid.updateRowFromClipboard(rowId); // id of the row, optional parameter; if it is not set, the selected row will be updated
  • Add rows from the clipboard to the grid
        grid.addRowFromClipboard();
  • Set clipboard content as value of a cell:
        grid.updateCellFromClipboard(rowId, cellInd);

The parameters here are:

a) rowId - id of the row (optional); if it is not indicated, the selected row will be used; b) cellInd - column index(optional); if it is not indicated, the selected column will be used.

  • Pasting content of the clipboard into the block selection of the grid:
        grid.pasteBlockFromClipboard();

If clipboard operations is blocked by browser

Clipboard operations may be blocked at some browsers. To execute alternative code in such case you can use following code:

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

In mozilla, the setting need to be applied, to make clipboard accessible
http://www.febooti.com/support/website-help/website-javascript-copy-clipboard.html