Edit Data in a Read Only Grid

This sample shows how to use a floating textbox to edit data in an unbound read only grid such as the Microsoft FlexGrid control.

Download Source Code

Basically, a textbox is positioned over the cell that you want to edit. When you click the cell, hit the Enter key or begin typing in the selected cell, its contents are copied into the textbox allowing you to make the desired changes.   When the textbox looses focus the changed data is copied back to the grid cell and the textbox is hidden. The trick is to make this look and feel as transparent as possible.   The key to doing this is positioning the textbox to correctly match the cell in the grid and allowing a simple means of navigating through the grid.

The arrow keys allow you to navigate through the cells in the grid. When you click a cell or press the Enter or Tab key, the textbox is displayed so that you can make your changes. Once in this "Edit" mode, the horizontal arrow keys can be used to move through the textbox's data. Pressing the vertical arrow, Enter or Tab key transfers the data back to the grid and takes you out of "Edit" mode.

I check to make sure that clicking on a fixed row or column in the grid does not display the textbox. Also, I make sure the grid and textbox use the same size and style of font so that the textbox aligns correctly by setting these properties manually in the form's load event. You can add additional code to the textbox to validate and format the data before writing it back to the grid and to align it left or right so that it looks the same in the textbox as it does in the grid.

Add the FlexGrid to your form (you may need to select it from the Project | Components menu) and set these properties:

Download the project and press F5 to run the program. Click a cell or press the Enter key to edit the cell's value. After editing move off the cell to write the changed value back to the grid.