An editable GridView Control in VB.NET

If you've played with .NET a bit, you may have noticed Microsoft's hard push to utilize XML throughout the architecture.  In this article we will take advantage of the XML classes available to us to persist the GridView control. The two classes we utilize in our code are XmlTextWriter and XmlTextReader. These classes enable us to save the information in a grid into an XML file and read an XML file into the grid.



Figure 1 - The Editable GridView with Persistence.

The XmlTextWriter class has several useful functions that make creating an XML file less tedious.  Below is a table of the methods we take advantage of for writing out the GridView.

Table 1 - XmlTextWriter Methods used in the GridView

The XmlReader class enables us to read the XML files into our code.  It also has many convenient methods and properties  for walking through the XML nodes and extracting data from the XML document.  Below are the properties and methods we utilize for reading our GridView:

Table 2 - XmlTextReader Properties and Methods used in the GridView.

In order to make our grid persistent,  we've created a class called GridPersister that implements the functionality from the XmlTextReader and XmlTextWriter classes on our GridView.  Below is the UML design of our persistent GridView:



Figure 2 - UML Design of the Persistent GridView reverse engineered using the WithClass 2000.

In our example, we save all of our GridView information in an XML file including column names, column widths and cell information.  The way we store grid cells and their contents is similar to how HTML stores table information.  We nest the collection of column nodes inside a row node.  The column node contains the text, background color, and foreground color of the cell.  Below is a partial snapshot of the XML file we are going to create from the GridView shown in Figure 1.

Figure 3 - Snapshot of XML File created by the GridView Save Method.

Note that the XML file stores color information inside of attributes as aRGB numbers in integer format.  This is why you see these strange negative numbers after all of the color attributes.

Now let's see how we create this file using the GridPersister class.  Listing 1 below is the Write method inside of this class that produces the XML file shown in Figure 3.  The code first loops through the grids column headers and writes them out to the xml file.  Then it loops through rows and columns in the grid and writes out the nodes representing the contents of each cell of the grid.

Public Sub Write()
' Create instance of XmlTextWriter as a tool for writing our XML GridView information.
Dim writer As New XmlTextWriter(FilePath, Nothing)
' Indent the XML file to look nice.
writer.Formatting = Formatting.Indented
writer.Namespaces = True
writer.Indentation = 4
' write header.
' Write the beginning header of our XML file along with a GridView tag.
writer.WriteStartDocument(False)
writer.WriteStartElement("GridView")
' write grid attributes column names and widths for our column headers.
writer.WriteStartElement("rowheader", Nothing)
Dim j As Integer
For j = 1 To m_GridView.NumberOfColumns
writer.WriteStartElement("colheader", Nothing)
writer.WriteAttributeString("text", m_GridView.GetColumnName(j))
writer.WriteAttributeString("width", m_GridView.GetColumnWidth(j).ToString())
writer.WriteEndElement()
Next j
writer.WriteEndElement()
' write internal grid.
Dim i As Integer
For i = 0 To (m_GridView.NumberOfRows - 1) - 1
' write next row of grid as a node.
writer.WriteStartElement("row", Nothing)
' write each column node of grid including text, background color and foreground color.
Dim j As Integer
For j = 0 To m_GridView.NumberOfColumns - 1
writer.WriteStartElement("col", Nothing)
writer.WriteAttributeString("text", m_GridView.GetCell(i + 1, j + 1))
writer.WriteAttributeString("backcolor", m_GridView.GetCellColor(i + 1, j + 1).ToArgb().ToString())
writer.WriteAttributeString("forecolor", m_GridView.GetCellTextColor(i + 1, j + 1).ToArgb().ToString())
writer.WriteEndElement()
Next j
writer.WriteEndElement()
Next i
writer.WriteEndElement()
writer.Flush()
writer.Close()
End Sub 'Write.

Listing 1 - Write method to write the XML file.

To read the file created by the Write method of the GridPersister we have created a Read method.  This is a bit more complex than the Write method because it needs to determine which node we are reading and extract the information.  The code for Reading the XML looks like a series of nested switch statements because as we read each  node, we need to parse the nested set of nodes inside.  Below is the code for reading the GridView XML information.

Public Sub Read()
Dim reader As New XmlTextReader(FilePath)
Dim rowCount As Integer = 0
Dim colCount As Integer = 0
Dim colHeaderCount As Integer = 0
Try
While reader.Read()
Select Case reader.NodeType
Case XmlNodeType.Element ' The node is the start of an Element.
Select Case reader.Name
Case "rowheader"
Case "colheader" ' Found the next column header, read the name and width.
colHeaderCount += 1
Dim i As Integer
For i = 0 To reader.AttributeCount - 1
' get the next attribute in the node and deterimine if its the column name or width.
reader.MoveToAttribute(i)
Select Case reader.Name
Case "text" ' set the next columnheader name to the attribute read.
m_GridView.SetColumnName(colHeaderCount, reader.Value)
Case "width" ' set the next columnheader width to the attribute red.
m_GridView.SetColumnWidthAndIgnoreFont(colHeaderCount, XmlConvert.ToInt32(reader.Value))
End Select
Next i
Case "row"
' current node is a row, increment the row count and reset the column count.
rowCount += 1
colCount = 0
Case "col"
' current node is a column, increment the column count.
colCount += 1
' Now set the cell for the current row and column, and read in the attributes for the cell.
Dim i As Integer
For i = 0 To reader.AttributeCount - 1
reader.MoveToAttribute(i)
Select Case reader.Name
Case "text"
' this attribute contains the text for the current cell, populate the cell in the gridview.
m_GridView.SetCell(rowCount, colCount, reader.Value)
Case "forecolor"
' this attribute contains the text color for the current cell, set the text color in the cell.
m_GridView.SetCellTextColor(rowCount, colCount, Color.FromArgb(Convert.ToInt32(reader.Value)))
Case "backcolor"
' this attribute contains the cell color for the current cell, set the color inside the cell.
m_GridView.SetCellColor(rowCount, colCount, Color.FromArgb(Convert.ToInt32(reader.Value)))
End Select
Next i
End Select
End Select
End While
Catch e As Exception
MessageBox.Show(e.Message.ToString())
End Try
End Sub 'Read.

Listing 2 - Reading the XML GridView File.

The GridPersister Read and Write functionality is propagated through the GridView through the GridView's Open and Save methods.  Below is the code for Opening and Saving the GridView from a form:

Private Sub OpenMenu_Click(ByVal sender As Object, ByVal e As System.EventArgs)
gridView1.Open()
End Sub 'OpenMenu_Click

Listing 3 - Opening the GridView from a Windows Form

Summary.

This article demonstrated how to read and write the GridView to an XML file. The XML reading and writing functionality was accomplished using the XmlTextReader and XmlTextWriter classes. In the next article we will continue our journey with the GridView by describing how to send the GridView to the printer.  The final article in this series will show you how to extract a GridView into an Excel spreadsheet.