Search code examples
clipboardhandsontable

handsontable Complex data and clipboard


Is there any possibility to copy the rendered version of HOT data?

My situation and data:

Each row looks like:

[ number, number, ..., object {simpleValue : number, extraData : data }, number, number, ... ]

Rows are combination of simple numbers and 'extended data' objects. 'Extended data objects' are rendered by custom render function as numbers from 'simpleValue' property (works fine). Also an onClick event is registered for TD containing such extended object which calls DisplayExtData function.

First problem comes when i select all displayed data (CTRL+A) and copy them into the clipboard (CTRL+C). Instead of copy containing only numbers i got [Object Object] on the places where text renders of 'simpleValue' are displayed in the table. So the user won't get what he sees rendered, but probably gets the internal representation of data.

The obviously easiest solution for the problem is just to preprocess data and convert objects into 'simpleValues' before they are pushed into HoT. But i need (somehow) a link to the original extended-data-object since i need to show those extended data on TD click.

(My first solution was converting objects into JSONs, which were saved into hidden textareas with visible label tags containing 'simpleValue' property with onClick event etc., but this solution fails on the main problem described above, since i got json and textarea tags inside of clipboard copied text.)


Solution

  • Got it:

    1) Override toString method of my 'Extended Data Object' to return whatever property i want to render:

    ExtData.prototype.toString = function(){return this.value;};
    

    2) Custom Renderer renders value.toString() with object preserved so it is possible to add onClick event to TD like:

    td.onclick = function(){ShowExtData(value);};
    

    (where value is my ExtData object).

    Copied text from HoT contains exactly the same text as displayed, solved.