Grids are often used in forms as a logical and visual way to group pieces of data together. However, it can sometimes be difficult to figure out the correct way to setup the grid and manipulate it from VB.NET and Javascript scripting. This article will serve to shed some light on that procedure.

Initialize the Grid

The easiest way to initially create the grid is to write script in VB.NET. This is true even if the form is intended for a mobile platform that does not have .NET support, such as an iPad.

There are two good locations to place the code to create the grid. The first is in the AfterOpen event. If you are creating a form that is intended for the Windows platform, this is the best option. If you are creating a form that is intended for a mobile platform, then using this option will require you to enable a setting in the form's settings on the server. To enable this, log in to the server as an administrator and navigate to the "Templates" page. When you see the list of all the templates hosted on the server, click on the name of the form you want to enable this setting for. In the "Edit Form Template" section, there should be an option called "Run .NET AfterOpen event on sync" - set this to "Yes" and save the settings.

The other location is in the BeforeTemplateImport event. The code in this event will be executed when a template is imported onto the server. This is a good option if you are intending to deploy to a mobile platform as this will ensure that the code will be executed whenever you upload the form to the server without having to set any options. However, this is not the recommended option for the Windows platform.

No matter what location you end up deciding on, the code for the grid will be the same. The code below will initialize a grid called "Grid" with three columns, titled "Name", "Age", and "Weight".

<MiCode(FormScriptEventType.AfterOpen)> _ 
    Public Sub Form_AfterOpen(ByVal e As AfterOpenEventArgs)
		Dim dt As New System.Data.DataTable
		Dim cols As New List(Of System.Data.DataColumn)
		cols.Add(New System.Data.DataColumn("Name"))
		cols.Add(New System.Data.DataColumn("Age"))
		cols.Add(New System.Data.DataColumn("Weight"))
		For Each dc As System.Data.DataColumn In cols
			dt.Columns.Add(dc)
		Next
		_Grid.Value = dt     
    End Sub

The general idea of this code is that you create a DataTable element and a list of DataColumn elements, to which you add columns. After adding the columns to the list, you can add every column to the DataTable. For every column you want to add, you should add a row that looks like this:

cols.Add(New System.Data.DataColumn("Name"))

The name that you want to give to the column (which will show up as the column header) should be set where "Name" is set in the line above.

The last line of the code is where you must identity which Grid you are setting up. In this example, the grid was named "Grid". If your grid is named something else, change this line accordingly.

Manipulating the Grid - VB.NET

Getting Rows

Manipulating the grid in VB.NET is very simple. No matter you want to do to the grid, you should always get the DataTable representing the grid. You will also usually require the collection of Rows in the grid, which you can get below:

' get the datatable that represents the Grid
Dim dt As System.Data.DataTable = _Grid.Value       
' get the rows from the data table
Dim rows As System.Data.DataRowCollection = dt.Rows

With a collection of rows, you can now perform a variety of tasks.

Adding Rows

To add a row, first call the NewRow() method on the DataTable. This method returns a DataRow, which is the row that is added. You can then modify each column of the row using code similar to below:

Dim dr As System.Data.DataRow = dt.NewRow()
dr("Name") = "Column 1 value"
dr("Age") = "Column 2 value"
dr("Weight") = "Column 3 value"
dt.Rows.Add(dr)

Note that you should modify the code depending on what columns you have in your grid. For every column, you need a dr("column name") = value line of code. The column name is simply the name you gave the column during grid creating.

Lastly, you must make sure you assign the new DataTable back to the grid:

_Grid.Value = dt