Hot-Link Menu in Right-Side Column

Last Updated 6-30-2010

Visual Basic Multi-Dimensional Arrays

Earlier on this page, we used parallel arrays with a common index. That method is bulky and awkward at best. In their infinite wisdom, the developers of Visual Basic anticipated this circumstance and allowed for multidimensional arrays. For this example, we will use a two-dimensional array for rows and columns, but the concept extends to 32 dimensions.

To demonstrate the concept of two-dimensional arrays we will create a 4 x 4 Two Dimensional Array with contents as indicated in diagram below:

One way to display a two-dimensional array, is by using the DataGridView Control. Create a new project in Visual Basic, and call it something like TwoDimensionalArray. Drag a DataGridView from the Visual Basic Toolbox onto the blank form as indicated in the diagram below:

Figure Array-28: Visual Basic Select Data Grid View

Add Ons Desktops Net Books Laptops PDA Mac Gaming Products Nintendo Gaming Products PC Gaming Products Play Station 3 Games Sony PSP Gaming Products Wii Gaming Products Xbox Gaming Products Accessories Blue Tooth Car Electronics Cell Phones & Service GPS Devices Home Theater Marine Electronics Mobile Broadband Office Products Photography Products Precision Measurement Security Products Video Products Business Software Graphics Software Mac Software Multimedia Networking Software Operating Systems Programming Software Security Software Utilities Web Development Apple Computer Books Certification Books Business Books Database Books Computer Hardware Computer Networking Computer Programming Computer Science Computer Security Digital Music Digital Photography Game Strategy Books General Computer Graphics Design Microsoft Computing Mobile Wireless Operating Systems Science Books Technical Books Web Development

Once you place it on the form change the size in the Visual Basic Properties Window to about 450 x 125 as indicated in the diagram below:

Figure Array-29: Visual Basic Set Data Grid View Size

There are several properties that can allow you to precisely set the size of the Data Grid Data elements, but for now we will just approximate the size to expedite completing the two-dimensional array example. We will use the default name of DataGridView1, since it is the only control on our form. When you have finished setting the size property, your design form should look like the diagram below:

Figure Array-30: Visual Basic Data Grid Design View

Double click on an area of the form not covered by the Visual Basic DataGridView control to bring up the Visual Basic Source Code Window. This will create the Form1_Load subroutine that will execute our code without having to program buttons to display the data. We will model our Visual Basic DataGridView after an Excel spreadsheet. Enter the code displayed below into the Form1_Load subroutine:

Public Class Form1

    Private Sub Form1_Load(ByVal sender As System.Object, _ 
		ByVal e As System.EventArgs) Handles MyBase.Load

        Const NumberOfColumns As Integer = 4
        Const NumberOfRows As Integer = 4

        Dim ColumnNumber As Integer
        Dim RowNumber As Integer

        Dim A As Integer = Asc("A")

        Dim Array2D(NumberOfRows, NumberOfColumns) As Integer

        DataGridView1.ColumnCount = NumberOfColumns
        DataGridView1.RowCount = NumberOfRows

        'Make the headers

        For RowNumber = 0 To NumberOfRows - 1
            DataGridView1.Rows.Item(RowNumber).HeaderCell.Value = _
		(RowNumber + 1).ToString
        Next

        For ColumnNumber = 0 To NumberOfColumns - 1
            DataGridView1.Columns.Item(ColumnNumber).HeaderCell.Value = _
			Chr(A + ColumnNumber).ToString
            DataGridView1.Columns.Item(ColumnNumber).HeaderCell.Style.Alignment = _
			DataGridViewContentAlignment.MiddleCenter
        Next

        'Fill the Array

        For RowNumber = 0 To NumberOfRows - 1
            For ColumnNumber = 0 To NumberOfColumns - 1
                Array2D(RowNumber, ColumnNumber) = _
			RowNumber * NumberOfColumns + ColumnNumber
            Next
        Next

        'Fill the Data Grid

        For RowNumber = 0 To NumberOfRows - 1
            For ColumnNumber = 0 To NumberOfColumns - 1
                DataGridView1.Item(ColumnNumber, RowNumber).Value = _ 
			Array2D(RowNumber, ColumnNumber)
                DataGridView1.Item(ColumnNumber, RowNumber).Style.Alignment = _
			DataGridViewContentAlignment.MiddleCenter
            Next
        Next
    End Sub
End Class
						

Since there are several new concepts introduced in this code, we should probably comment on those now, so we understand how the program functions:

• Const NumberOfColumns As Integer = 4: Sets the current maximum size of columns to 4.
• Const declares a value that cannot be changed after the initial declaration.


• Const NumberOfRows As Integer = 4: Sets the current maximum size of rows to 4.


• Dim ColumnNumber As Integer: Index to step through the Columns in our array.


• Dim RowNumber As Integer: Index to step through the Rows in our array.


• Dim A As Integer = Asc("A"): The variable A has the Ascii equivalent of the letter A
  • This will allow us to count: A, B, C, D instead of 1, 2, 3, 4
  
  
• Dim Array2D(NumberOfRows, NumberOfColumns) As Integer: Declaring our 4 x 4 two-dimensional Array.


• DataGridView1.ColumnCount= NumberOfColumns: Sets the number of columns(width) of our data display.


• DataGridView1.RowCount=NumberOfRows: Sets the number of Rows(length) of our data display.



Help Support this site - Click this ad



• The next 2 For Loops place names in the Header Cells.


• For RowNumber=0 to NumberOfRows-1: Index through every Vertical Element


• DataGridView1.Rows.Item(RowNumber).HeaderCell.Value=(RowNumber+1).ToString:
• DataGridView1:Tell Visual Basic we are referring to the only control in our program.
• .Rows: Tell Visual Basic we are referring to a vertical element on the control.
• .Item(RowNumber): Tell Visual Basic which Row we want to access.
• 0 is at the top, the highest number is at the bottom.
• .HeaderCell: We want to modify the Header or description of the row.
• .Value: This refers to the text we see on the screen.
• =(RowNumber+1): Excel starts numbering its rows with 1 not 0.
• 1 is the correction factor (offset).
• .ToString: The headers can only have strings, or else Visual Basic gets unhappy.


• For ColumnNumber=0 to NumberOfColumns-1: Index through every Horizontal Element.


• DataGridView.Columns.Item(ColumnNumber).HeaderCell.Value=Chr(A+ColumnNumber).ToString.
• DataGridView1: Tell Visual Basic the reference for this command is the 1 control we have in the program.
• .Columns: Tell Visual Basic we are referring to a horizontal element on the control.
• .Item(ColumnNumber): Tell Visual Basic which Column we want to access.
• 0 is at the left, the highest number is at the right.
• .HeaderCell This means we are going to modify one of the headers at the top of the control.
• .Value: This refers to the text we see on the screen.
• =Chr(A+ColumnNumber): chr means we are going to count letters instead of numbers like Excel does.
• .ToString: The header must contain a string - numbers or single letters won't fly.


• The following For Loop fills the Array with values from Fig Array-27:


• For RowNumber = 0 to NumberOfRows-1: Index through every Vertical Element.


• For ColumnNumber = 0 to NumberOfColumns-1: Index through each Horizontal Element of every row.
• Array2D(RowNumber, ColumnNumber)=RowNumber*NumberOfColumns+ColumnNumber:
• Adds 1 through each pass.
• Places the value in the correct two-dimensional Array element.



Help Support this site - Click this ad



• The following For Loop transfers the data from the Array to the Data Grid.


• For RowNumber=0 to NumberOfRows-1: Index through every vertical element in the table.
• For ColumnNumber=0 to NumberOfColumns-1: Index through each horizontal element of every row.
• DataGridView1.Item(ColumnNumber, RowNumber).Value=Array2D(RowNumber, ColumnNumber):
• DataGridView1: Reference the Data Grid Control.
• .Item(ColumnNumber, RowNumber): Select a cell on the Data Grid control.
• .Value=: Update the data in the cell in the Data Grid control.
• Array2D(RowNumber, ColumnNumber): Select the proper Data Element from the array.
• Notice Row and Column order switched between Array and Data Grid control.
• The computer will keep the data in the correct order and make the correct transformation.


• DataGridView1.Item(ColumnNumber, RowNumber).Style.Alignment=DataGridViewContentAlignment.MiddleCenter:
  • DataGridView1:The Data Grid control.
  • .Item(ColumnNumber, RowNumber): Same data cell we wrote the data to.
  • .Style: Defines the text style attribute used in the data cell.
  • .Alignnment=: The text attribute that will be changed is the text alignment in the data cell.
  • DataGridViewContentAlignment: How Visual Basic refers to the cell's text alignment attribute.
  • .MiddleCenter: Align the text in the middle center of the cell.
  • Because I think middle center alignment looks better.

Looks like it's time to take this puppy out for a test spin, and see what we get. Press the Green Triangle to run the program and see what it looks like... When I run it, I get the output as shown in the diagram below:

Figure Array-32: Visual Basic DataGridView at RunTime

Not too shabby. You can move the cursor around and change the values on the screen, although without the proper event routines, the actual data isn't updated, the screen just changes.

In the next section we talk about the Length and Sort methods of the array class. To demonstrate these characteristics we work with the DataGridView controls a little more to gain some more familiarity with them. In order to continue this guide and work with Visual Basic Array Methods, press the Button Below:

Home

Visual Basic

Windows Form App

Save Your Work

Exit Code

Button Event Code

Declare Variables

Math Class

Variable Scope

Loop Constructs

Do Until Loop

Exit Do | Exit For

Nested Loops

Arrays

Rnd( ) Function

KeyPressEventArgs

Parallel Arrays

Dynamic Arrays

ReDim Preserve

MultiDimensional Arrays

Length and Sort Methods

Structures