Microsoft KB Archive/317383

= How To Use Visual Basic .NET to Format a Windows Forms DataGrid That Is Bound to an Array =

Article ID: 317383

Article Last Modified on 5/23/2005

-

APPLIES TO


 * Microsoft Visual Studio .NET 2003 Enterprise Architect
 * Microsoft Visual Studio .NET 2003 Enterprise Developer
 * Microsoft Visual Studio .NET 2003 Academic Edition
 * Microsoft Visual Studio .NET 2002 Professional Edition
 * Microsoft Visual Studio .NET 2002 Enterprise Architect
 * Microsoft Visual Studio .NET 2002 Enterprise Developer
 * Microsoft Visual Studio .NET 2002 Academic Edition

-



This article was previously published under Q317383



For a Microsoft Visual C# .NET version of this article, see 317550.

IN THIS TASK
SUMMARY
 * Requirements
 * Create the Windows Application in Visual Basic .NET
 * Create a Class for the Array
 * Add the Binding Code
 * Add the Formatting Code
 * Run the Project
 * Troubleshooting

REFERENCES



SUMMARY
You can bind Visual Studio .NET controls not only to traditional data sources such as a DataTable object, but also to other types of lists, such as an array. However, when you bind a DataGrid control to an array, the array columns appear unformatted and in seemingly random order.

This step-by-step article describes how you can use the DataGridTableStyles and the DataGridColumnStyles collections to specify column order and formatting for the array columns that appear in your DataGrid control.

back to the top

Requirements
The following list outlines the recommended hardware, software, network infrastructure, and service packs that you need:
 * Microsoft Windows XP Professional, Microsoft Windows 2000 Professional, Microsoft Windows 2000 Server, Microsoft Windows 2000 Advanced Server, or Microsoft Windows NT 4.0 Server
 * Microsoft Visual Studio .NET

This article assumes that you are familiar with the following topics:
 * Microsoft Visual Basic .NET

back to the top

Create the Windows Application in Visual Basic .NET
 Start Visual Studio .NET. On the File menu, point to New, and then click Project. In the New Project dialog box, click Visual Basic Projects under Project Types, and then click Windows Application under Templates. Drag one DataGrid control and two Button controls from the toolbox onto the default form, Form1.vb. In the Properties window, change the Text property of the first Button control to Bind. Change the Text property of the second Button control to Format .  Switch to Code view, and then add the following code to the very top of the form's code module: Imports System.ComponentModel </ol>

back to the top

Create a Class for the Array
You can only bind a DataGrid to a one-dimensional array. To display multiple columns of information, you must create a class or a structure (user-defined type) with multiple members, and then use an array of instances of this class or structure. <ol>  At the very bottom of the form's code module, after the End Class statement for the form class, add the following code to insert a TestItem class that has a constructor and four properties: Public Class TestItem

Private m_TestID As Integer Private m_TestName As String Private m_TestBool As String Private m_TestAmount As Double

Public ReadOnly Property TestID Get TestID = m_TestID End Get End Property

Public ReadOnly Property TestName Get TestName = m_TestName End Get End Property

Public ReadOnly Property TestBool Get TestBool = m_TestBool End Get End Property

Public ReadOnly Property TestAmount Get TestAmount = m_TestAmount End Get End Property

Public Sub New(ByVal TestID As Integer, ByVal TestName As String, ByVal TestBool As String, ByVal TestAmount As Double) Me.m_TestID = TestID Me.m_TestName = TestName Me.m_TestBool = TestBool Me.m_TestAmount = TestAmount End Sub

End Class The four properties of this class become four columns in the bound DataGrid. </li>  At the top of the form's class code, add the following array declaration to create an empty array of 6 (0 to 5) TestItem objects: Dim TestItems As TestItem = New TestItem(5) {} </li></ol>

back to the top

Add the Binding Code
<ol> In Design view, double-click Bind to add an event handler to the button.</li>  Add the following code to the Button1_Click event to create the six array items: TestItems(0) = New TestItem(1, &quot;John&quot;, &quot;true&quot;, 1000) TestItems(1) = New TestItem(2, &quot;Julia&quot;, &quot;false&quot;, 2000) TestItems(2) = New TestItem(3, &quot;Michael&quot;, &quot;true&quot;, 3000) TestItems(3) = New TestItem(4, &quot;Laura&quot;, &quot;false&quot;, 4000) TestItems(4) = New TestItem(5, &quot;Alan&quot;, &quot;true&quot;, 5000) TestItems(5) = New TestItem(6, &quot;Susan&quot;, &quot;true&quot;, 6000) </li>  Add the following code to bind the array to the DataGrid: DataGrid1.DataSource = TestItems </li></ol>

back to the top

Add the Formatting Code
<ol>  To format the array data in the bound DataGrid, you must first create a new DataGridTableStyle object. In Design view, double-click Format to add an event handler to the button, and then add the following code in the Button2_Click event: Dim gs As DataGridTableStyle = New DataGridTableStyle </li>  Add the following code to map the DataGridTableStyle to the array of TestItem objects: gs.MappingName = TestItems.GetType.Name The MappingName property is the crucial information in each DataGridTableStyle and DataGridColumnStyle object. MappingName maps each grid column to one of the properties of the class, and then maps the grid as a whole to the array. </li>  Add the following code to display the ID and Name columns as DataGridTextBoxColumns objects: Dim cs As DataGridTextBoxColumn = New DataGridTextBoxColumn cs.MappingName = &quot;TestID&quot; cs.HeaderText = &quot;Test ID&quot; cs.Alignment = HorizontalAlignment.Center cs.Width = 50 gs.GridColumnStyles.Add(cs)

cs = New DataGridTextBoxColumn cs.MappingName = &quot;TestName&quot; cs.HeaderText = &quot;Test Name&quot; cs.Alignment = HorizontalAlignment.Left cs.Width = 75 gs.GridColumnStyles.Add(cs) </li>  Add the following code to display the true/false TestBool column as a DataGridBoolColumn object, which is displayed by using check boxes: Dim cs2 As DataGridBoolColumn = New DataGridBoolColumn cs2.MappingName = &quot;TestBool&quot; cs2.HeaderText = &quot;Test Bool&quot; cs2.Width = 75 cs2.TrueValue = &quot;true&quot; cs2.FalseValue = &quot;false&quot; gs.GridColumnStyles.Add(cs2) </li>  Use the PropertyDescriptor object (from the System.ComponentModel class) to display the Amount column and to format its values as currency: Dim cm As CurrencyManager = CType(Me.BindingContext(TestItems), CurrencyManager) Dim pd As PropertyDescriptor = cm.GetItemProperties(&quot;TestAmount&quot;)

cs = New DataGridTextBoxColumn(pd, &quot;c&quot;) cs.MappingName = &quot;TestAmount&quot; cs.HeaderText = &quot;Test Amount&quot; cs.Alignment = HorizontalAlignment.Right cs.Width = 75 gs.GridColumnStyles.Add(cs) </li>  Add the following code to add the DataGridTableStyle object to the TableStyles collection of the DataGrid: DataGrid1.TableStyles.Add(gs) </li></ol>

You can also configure the TableStyles and the ColumnStyles visually by using the Visual Studio Collection Editor. To do this, follow the steps below using the Editor replace coding in previous steps 1-5: <ol> Click the DataGrid on the form.</li> In the Properties window, click the TableStyles property, and then click the ellipsis (...).</li> In the DataGridTableStyle Collection Editor dialog box, add a TableStyle, and then click OK.</li> In the Properties window, click the GridColumnStyles property, and then click the ellipsis.</li> In the DataGridColumnStyle Collection Editor dialog box, add add ColumnStyles for each of the 4 array item properties, and then click OK. for each of the 4 array item properties, and then click OK.</li> <li>In Column Properties, enter Test ID for HeaderText and testid for MappingName.</li> <li>Repeat this step for the testname, testbool, and testamount fields. However, when you add the testbool column, select DataGridBoolColumn from the drop-down list box to the right of the Add button. (The other columns are all DataGridTextBoxColumns.)</li> <li>Click OK to dismiss all dialog boxes.</li> <li> Add the following code to add the DataGridTableStyle object to the TableStyles collection of the DataGrid: DataGrid1.TableStyles.Add(gs) </li></ol>

NOTE: When you bind to an array, you must ensure that the MappingName property for the DataGridTableStyle is blank in the Collection Editor and then specify MappingName in your code as follows: DataGridTableStyle1.MappingName = TestItems.GetType.Name back to the top

Run the Project

 * 1) Run the project.
 * 2) Click Bind to load the array into the DataGrid. Notice that the columns appear out of order and that the data appears unformatted.
 * 3) Click Format to apply the DataGridTableStyle to the DataGrid. Notice that the columns now appear in the expected order and that the data is formatted by using the appropriate styles.

back to the top

Troubleshooting
<ul> <li>If you do use the DataGridTableStyle, you must define a DataGridColumnStyle for every column that appears in the grid. You cannot define styles for some columns and display others by using the default settings.</li> <li>When you set the Alignment property in the DataGridColumnStyle, you affect the HeaderText property, as well as the data in the column.</li> <li>The DataGrid.TableStyles Property documentation states:

CAUTION: Always create DataGridColumnStyle objects and add them to the GridColumnStylesCollection before adding DataGridTableStyle objects to the GridTableStylesCollection. When you add an empty DataGridTableStyle to the collection, DataGridColumnStyle objects are automatically generated for you. Consequently, an exception will be thrown if you try to add new DataGridColumnStyle objects with duplicate MappingName values to the GridColumnStylesCollection.

</li></ul>

back to the top

<div class="references_section">