Search code examples
javascriptw2ui

W2UI Grid selects entire row when clicked, how to select single cell or column for copying?


Running into an issue with the W2UI grid.

Goal: I'd like to be able to select an entire column and copy/paste it to Gsheets. Alternately I'd like to be able to click a single cell and copy it's contents too.

Issue: When clicking it selects the entire row including all irrelevant columns, and copying that includes headers too, meaning it has to be cleaned manually before it can be inserted into a spreadsheet.

The "editable" property allows me to select a single cells contents but even that's not quite what I'm looking for as it required 2 clicks, highlighting text then copying, adding 3-4 button presses to the process.

Can't seem to find the answer on how to fix this in the documentation but I may just be missing something.


Solution

  • Option 1:

    You could (temporarily) switch the select type from row (default) to cell.

    Just make sure to remove any existing row selection first, otherwise it may look confusing.

    Assuming your grid is named grid:

    w2ui.grid.selectNone();
    w2ui.grid.selectType = 'cell';
    w2ui.grid.refresh();
    

    Fiddle: http://jsfiddle.net/yghueLxp/

    Option 2:

    There's also a new (undocumented) feature to add a copy icon to whole columns - also demonstrated in the linked fiddle, on the first column.

    All you have to do is add clipboardCopy: true to the column properties.

    For this new feature you'll have to use the dist files of the current github master - it's not available in w2ui 1.5 RC.

    By the way, you can make the grid behave similar to an Excel sheet, allowing copy & paste of multiple cells, see: Spreadsheet Like JavaScript Grid

    I'd like to be able to [...] paste it to Gsheets

    The copied values are TAB separated. This works well when you copy&paste to/from MS Excel. I don't know about Gsheets.