FlexGrid Column Selection, MultiRange Copy, and Paste

March 31 2020

We recently added a MultiRange selection mode to the FlexGrid (our JavaScript DataGrid) . This mode allows users to use CTRL+click to select multiple cell ranges. This was a relatively common user request, and the main reason for it was "Excel supports this."

I was not a big fan of this feature initially, because I didn't see much practical use for it other than clearing multiple cell ranges at once or computing aggregates.

But it soon became apparent that the MultiRange selection mode opens up opportunities for related features that were also requested, and we could not easily implement them before.

One of these opportunities is multi-column selection. This was on our request list for a while, but we were not sure how to do it cleanly. But we get this almost for free with MultiRange mode. To get multi-column selection, you must set three properties:

New FlexGrid(host, {  
     allowSorting: AllowSorting.None,  
     allowDragging: AllowDragging.None,  
     selectionMode: SelectionMode.MultiRange,  
     // etc  
 }

The first two prevent sorting and dragging operations from interfering with click events on the grid's column headers, allowing clicks on headers to be used for column selection.

The last enables the MultiRange selection mode, allowing the grid to add and remove ranges from the extendedSelection list.

Once you do this, users will be able to select columns by clicking the column headers and toggling the column's selected state with CTRL+click:

If the user pressed CTRL+C now, he would copy a list of countries and downloads to the clipboard.

Just like in Excel.

And just like in Excel, the same idea works for rows, so if the customer wanted to copy the data for Germany and Japan, he could CTRL+click the row headers for those countries:

We also improved clipboard pasting support for multiple ranges. Users can now select a range, copy its contents, and paste that content to various ranges: