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.

Edit Values in a Read Only Grid like the MsFlexGrid
Download Source Code

Editing Data in a Read Only Grid

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.

Grid Properties

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

AllowUserResizing

1 - Columns

Cols

6

FillStyle

0 – Single

Fixed Cols

1

Fixed Rows

1

FocusRect

2 - Heavy

Font, Font Type, Font Style

Same as used in the textbox

Highlight

1- Always

MergeCells

0 – Never

Name

gridTest

Rows

20

Scrollbars

3 – Both

SelectionMode

0 – Free

 

Instructions

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.




About TheScarms
About TheScarms


Sample code
version info

If you use this code, please mention "www.TheScarms.com"

Email this page


© Copyright 2024 TheScarms
Goto top of page