Clipboard Support

The FlexGrid control has built-in clipboard support.

By default, pressing the Ctrl+C or Ctrl+Insert keys copies the current selection to the clipboard. Pressing Ctrl+V or Shift+Insert pastes the clipboard content into the grid.

You can disable the automatic clipboard feature by setting the autoClipboard property to false.

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35

Custom Behaviors

You can customize the clipboard actions using the copying, copied, pasting, pasted, pastingCell, and pastedCell events.

For example, when you copy a range from the grid below, it will add the column headers to the clipboard content.

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35

Smart Pasting

Note that the FlexGrid implements an Excel-style 'smart pasting' feature that replicates the clipboard data when pasting. For example, if you select a single cell and press Ctrl+C to copy it to the clipboard, then extend the selection and press Ctrl+V to paste, the cell will be pasted over the entire selection.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// This file locates: "Scripts/Lesson/C1FlexGrid/Clipboard.js".
c1.documentReady(function () {
    // default clipboard behavior
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // custom clipboard behavior
    var theCustomGrid = wijmo.Control.getControl('#theCustomGrid');
    theCustomGrid.copying.addHandler(function (s, e) { // // add headers to clip string
        var text = s.getClipString();
        var sel = s.selection;
        var hdr = '';
        for (var c = sel.leftCol; c <= sel.rightCol; c++) {
            if (hdr) hdr += '\t';
            hdr += s.columns[c].header;
        }
        text = hdr + '\r\n' + text;
 
        // put text with headers on the clipboard
        wijmo.Clipboard.copy(text);
 
        // prevent the grid from overwriting our clipboard content
        e.cancel = true;
        hasHeaders = true;
    });
    theCustomGrid.pasting.addHandler(function (s, e) {
        e.cancel = true; // prevent pasting data with headers
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: Clipboard
        public ActionResult Clipboard()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text3)
</p>
@Html.C1().CollectionViewService().Id("collectionView").Bind(Model)
@Html.C1().FlexGrid().Id("theGrid").ItemsSourceId("collectionView").ShowAlternatingRows(false).Height(200)
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Title1)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text4)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text5)
</p>
@Html.C1().FlexGrid().Id("theCustomGrid").ItemsSourceId("collectionView").ShowAlternatingRows(false).Height(200)
 
<h2>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Title2)
</h2>
<p>
    @Html.Raw(Resources.C1FlexGrid.Clipboard_Text6)
</p>