Pasting Images into FlexGrid

Background:

Some users may need their dataGrid to support images and the ability to paste them in. By default, pasting an image into your dataGrid isn't supported. Here we will go over one possible solution to provide this feature.

Steps to Complete:

1. Use FlexGridCellTemplate to create a custom cell using the inputted context as data

2. Use the cells context data to display the pasted image

Getting Started:

Use FlexGridCellTemplate to create a custom cell using the inputted context as data

Pasting an image can be achieved by inserting the image URL into a grid's custom cell. You can accomplish this using CellTemplate. This allows you to define custom content for your FlexGrid cells declaratively. Any type of grid cell can be defined and customized using templates, as seen on our Demo Page.

<wjcGrid.FlexGridColumn header="Image" binding="img">
  <wjcGrid.FlexGridCellTemplate
    cellType="Cell"
    template={(context) => {
      return (
        ...
      );
    }}
  />
</wjcGrid.FlexGridColumn>;

Use the cells context data to display the pasted image

In the cellTemplate function we return a custom cell using React's Fragment. We display the image by showing the context's img data URL.

<wjcGrid.FlexGridColumn header="Image" binding="img">
  <wjcGrid.FlexGridCellTemplate
    cellType="Cell"
    template={(context) => {
      return (
        <React.Fragment>
          <img src={context.item.img} />
        </React.Fragment>
      );
    }}
  />
</wjcGrid.FlexGridColumn>;

Please note that it is suggested to use the CellTemplate feature instead of CellMaker, because CellMakers are not intended to be edited once created. 

An application showcasing this example can be found here.

Happy coding!