Pasting Images into FlexGrid in JavaScript

Background:

FlexGrid has built-in clipboard support that handles text and numeric data when pasting. You can also capture the paste before it’s processed and handle it yourself, for example, to accept image data from the system clipboard and insert it into a cell.

Steps to Complete:

1. Disable the grid’s built-in clipboard behavior so we can intercept paste events.
2. Attach a paste DOM event handler to catch image paste data from the clipboard.
3. Detect image files in the clipboard data and convert them to a displayable URL.
4. Insert the image into the grid cell and render it using a cell template.

Getting Started:

Disable the grid’s built-in clipboard behavior so we can intercept paste events

By default, pressing Ctrl+V pastes plain text into the grid. We disable this behavior (autoClipboard = false) so we can manually inspect and handle clipboard content.

<div id="theGrid"></div>
<p id="pasteMessage"></p>

import * as wjcGrid from '@mescius/wijmo.grid';

const data = getData();

const grid = new wjcGrid.FlexGrid('#theGrid', {
  itemsSource: data,
  autoClipboard: false,
  columns: [
    { header: 'ID', binding: 'id' },
    { header: 'Name', binding: 'name' },
    { header: 'Photo', binding: 'image', width: 120 }
  ]
});

function getData() {
  return [
    { id: 1, name: 'Item 1', image: '' },
    { id: 2, name: 'Item 2', image: '' }
  ];
}

• autoClipboard: false disables default text pasting.

Attach a paste DOM event handler to catch image paste data from the clipboard

We listen for the browser’s native paste event on the grid’s host element so we can inspect clipboard content.

grid.hostElement.addEventListener('paste', function (e) {
  if (!e.clipboardData) return;

  const items = Array.from(e.clipboardData.items);
  const imageItem = items.find(
    i => i.kind === 'file' && i.type.startsWith('image/')
  );

  if (imageItem) {
    e.preventDefault();

    const blob = imageItem.getAsFile();
    const reader = new FileReader();

    reader.onload = function () {
      const url = reader.result;
      insertImageIntoCell(url);
      document.getElementById('pasteMessage').textContent =
        'Image pasted successfully.';
    };

    reader.readAsDataURL(blob);
  }
});

• We check clipboard items for image file types.
• If an image exists, we stop the default paste behavior.
• FileReader converts the blob to a Base64 URL for display.

Detect image files in the clipboard data and convert them to a displayable URL

Once we have the Base64 image URL, we write it into the currently selected row’s image field.

function insertImageIntoCell(imgUrl) {
  const sel = grid.selection;

  if (sel.row > -1 && sel.col > -1) {
    grid.setCellData(sel.row, 'image', imgUrl, true);
  }
}

• grid.selection determines which cell is active.
• setCellData() updates the data item and refreshes the UI.

Insert the image into the grid cell and render it using a cell template

We use the formatItem event to render an <img> element when the cell contains image data.

grid.formatItem.addHandler(function (s, e) {
  if (e.panel === s.cells && s.columns[e.col].binding === 'image') {
    const item = s.rows[e.row].dataItem;
    if (item.image) {
      e.cell.innerHTML =
        '<img src="' + item.image + '" style="max-width:100px;" />';
    }
  }
});

• The handler runs whenever a cell is rendered.
• If the column is bound to image, we insert an <img> element.
• The Base64 URL stored in the data item becomes the image source.

With this JavaScript setup:

• Users can press Ctrl+V while a grid cell is selected.
• If the clipboard contains an image, it is inserted into the selected row.
• The grid displays the pasted image directly inside the cell.
• You can extend this solution to validate file size/type or upload images to a server instead of embedding Base64 data.

Happy coding!