An Editable GridView Control in C# and .NET - Part 1

Figure 1 - The Editable GridView Control in Action



I've gotten a lot of e-mail about my GridView control Article, so I've decided to write a follow up article on a more powerful control that allows you to edit the cells within the control and change the colors of the cells. This GridView also adds the capability of specifying the column name instead of the column number when retrieving or populating a cell. The next articles to follow will show you how to save the data in the GridView and the next article will give the GridView printing capability. The final article will show you how to export the GridView into an Excel spreadsheet. Below is the design of the GridView class showing only public methods and attributes.

Figure 2 - Public properties and methods of the GridView Reverse engineered with WithClass 2000.

The GridView is inserted into a form as a control and is set up with the following initialization code in our example:

public Form1()
{
InitializeComponent();
// set the names of the columns in the grid
gridView1.SetColumnNames(new string[]
{ "FirstName", "LastName", "Company", "E-mail"});
gridView1.SetColumnWidth("FirstName", 10); // sets the width of the column in font units
gridView1.SetColumnWidth("LastName", 10); // sets the width of the column in font units
gridView1.SetColumnWidth("Company", 15); // sets the width of the column in font units
gridView1.SetColumnWidth("E-mail", 20); // sets the width of the column in font units

** Note all rows and columns are 1 based meaning the first column index is 1 and the first row index is 1.

// Size the Grid in the Form to fit the dimensiions of the Grid exactly
gridView1.SizeToFitGrid();
// populate a row #2 with data
gridView1.SetFullRow(2, new string[]
{"John", "Doe", "Microsoft", [email protected]});
// populate row 4, column 4 with an email
gridView1.SetCell(4, "E-mail", [email protected]);
// set color of row 4, column 4
gridView1.SetCellColor(4, 4, Color.Blue);
// set font color of row 4, column 4 cell
gridView1.SetCellTextColor(4, "E-mail", Color.Yellow);
// set background color of cell row 2, column 3 to BlueViolet
gridView1.SetCellColor(2, 3, Color.BlueViolet);
// set font color of the cell row 2, column 3 to Coral
gridView1.SetCellTextColor(2, 3, Color.Coral);
}
GridView Workings
Editing of the cell is accomplished by placing a textbox in the GridView control and superimposing it over the cell we want to edit. The information is extracted from the textbox and placed in the cell when the text is changed inside the textbox. Below is the listing for populating the cell in the ListView from the TextBox.

void PopulateCell(int rowNum, int colNum)
{
if ((rowNum > -1) && (colNum > -1))
{
// Get the row of data for the CurrentRow in the list view
ListViewItem theRow = listView1.Items[rowNum];
// Get the specific SubItem in the ListView containing the Data and populate it with the TexBox
ListViewItem.ListViewSubItem theCell = theRow.SubItems[colNum];
theCell.Text = textBox1.Text;
}
}