Expand All

Basics

Formatting

Context menu

Drag n Drop

Spreadsheet

Tabs

Export

Layouts

RTL Layout

Rows

Paging

Big data

Columns

Cells

Inline editing

Row Grouping

Pivot

Sorting

Filter

Selections

Nesting / Row details

Tree grid

Charts

Angular

React React

Vue Vue

Knockout

;

How to copy and paste in javascript grid

Compatibility with any spreadsheet

Copy paste functionality of ParamQuery grid is compatible with any spreadsheet application like MS Excel i.e., data can be copied from ParamQuery Grid and pasted to other spreadsheets and vice versa.

Keyboard operations:

  • Ctrl A: Select All cells.
  • Ctrl C: Copy selection which is available for paste.
  • Ctrl X: Cut selection which is available for paste.
  • Delete: Delete selection.
  • Ctrl V: Paste data.
  • Ctrl Z: Undo
  • Ctrl Y: Redo

Note:

  • Use Command key instead of Ctrl key on Mac for copy paste operations.
  • Cut/copy/paste programmatically invoked by click of a button or from context menu item are also interoperable with other native or web applications since v8.3.
  • Pasted data can be customized with beforePaste event, for example to convert external formatted data into valid number or date values.

Skip rows / columns from copied data

  • during initialization: By default all the rows and columns in a Range or Selection of cells are copied. Columns can be skipped from copied data by setting column.copy to false. Similarly rows can be skipped from copied data by setting pq_copy property to false.

  • in run time: rows and columns can be conditionally skipped in run time e.g. skip hidden rows and columns while copying. To ahieve that, we convert column.copy property to javascript getter, which can be defined in the grid initialization object. Furthermore columnTemplate can be used to propagate getter copy property to all columns. 

    columnTemplate: {
    get copy(){           
        return !this.hidden;
    }
}

    or by updating existing grid initialization object (before initialization of grid)

    Object.defineProperty(obj.columnTemplate, 'copy', {
    enumerable: true,
    get (){           
        return !this.hidden;
    }
})

Similarly it can be set up for rows by using their counterpart properties, rowTemplate, rowData.pq_hidden, rowData.pq_copy.

Skip target rows / columns when pasting data
  • during initialization: By default all the target rows and columns are pasted over by copied data. Target columns can be skipped by setting column.paste to false. Similarly target rows can be skipped by setting pq_paste property to false.
  • in run time: rows and columns in target grid can be conditionally skipped in run time e.g., to skip hidden rows and columns in the target Range/Selection while pasting. To ahieve that, column.paste can be linked to column.hidden property by using javascript getters which can be defined in the grid initialization object. We use columnTemplate to propagate paste property to all columns. 
    columnTemplate: {
    get paste(){           
        return !this.hidden;
    }
}

    or by updating existing grid initialization object (before initialization of grid)

    Object.defineProperty(obj.columnTemplate, 'paste', {
    enumerable: true,
    get (){           
        return !this.hidden;
    }
})

Similarly it can be set up for rows by using their counterpart properties, rowTemplate, rowData.pq_hidden, rowData.pq_paste.

Pictures

When an image is copied, it is stored on the clipboard, making it transferrable across grids, web-based platforms (e.g., Google Sheets, web forms, CMS tools), desktop applications (e.g., PowerPoint, Excel), and even design software.

For example:

  • Copy a picture from a data grid and paste it into web-based tools (e.g., Google Docs) or platforms like image editors (Canva, Photoshop).

  • Similarly, copy images from the web or other software and paste them into grids.

Hyperlinks:

Hyperlinks consist of two components: the display text and the underlying URL. When copied from the grid, both pieces of information are preserved on the clipboard. This allows the hyperlink to be pasted into other applications in a way that maintains its functionality. For example, copying a hyperlink with display text "Google" and URL "https://google.com" will ensure that both the visible label and the target link are available when pasting into applications that support rich text or hyperlink data.

Formatted numbers or dates

When numbers or dates are copied, both their underlying values and their display formats are preserved. This means that if a cell contains a numeric value or a date with a specific format (for example, currency, percentage, or a custom date style), the clipboard will retain both the raw value and the applied formatting. As a result, when you paste the copied content into a compatible application, it will appear exactly as it did in the original source, while still maintaining the original value for calculations or further processing.

Clipboard format

By default, pqGrid copies data to the clipboard in two formats simultaneously:

  • Rich Data Format: Includes cell values + styling + rich objects + formatting.
  • Plain Data Format: Includes only the cell values.

Carrying both formats together ensures that the clipboard works seamlessly with all kinds of destinations—applications that support rich content will use the rich format, while plain-text destinations will fall back to the plain format.

Clipboard format: