Binding a Scalar Array to a Data Web Control

Ref: http://aspnet.4guysfromrolla.com/demos/printPage.aspx?path=/articles/082504-1.aspx

---

Introduction
The ASP.NET data Web controls - the DataGrid, DataList, and Repeater - are highly versatile controls that can display arbitrary collections of data. Specifically, these controls can display any data that implements either the IEnumerable interface or the IListSource interface, which include things like arrays, collections (like ArrayLists, Hashtables, Queues, custom strongly-typed collection classes, and so forth), DataReaders, DataTables, and DataSets. These objects are bound to a data Web control through two lines of code:

1. The object is assigned to the data Web control's DataSource property,
2. The data Web control's DataBind() method is called.

At this point, the data Web control enumerates the DataSource one record at a time. Typically each record has a set of fields. For a database query, each record is a row returned from the database, and each field is a column returned by the SQL query. For a custom, strongly-typed collection of business objects, each record is a business object instance and the fields are the public properties of the business object. (See Displaying Custom Classes in a DataGrid for more information on displaying custom objects in a data Web control.)

The syntax for displaying a particular field in a data Web control depends upon the data Web control being used. For a DataGrid, you can use a BoundColumn, setting its DataField property to the name of the field. For a DataList or Repeater (or a DataGrid's TemplateColumn), you use the databinding syntax like so: <%# DataBinder.Eval(Container.DataItem, "fieldName") %>. But how do you display data bound that the data Web control that has no fields? For example, a scalar array - such as an array of integers - does not contain any fields, per se, but can definitely be bound to a data Web control, since arrays can be bound to data Web controls. But what's the syntax to display the array values? In this article we'll examine how to accomplish this!

Displaying a Scalar Array with a DataGrid
As with rich objects like DataSets or DataReaders, the steps for displaying an array of scalar values differs whether you're using a DataGrid or if you're using a DataList or Repeater. Let's first look at displaying a scalar array in a DataGrid. With the DataGrid there are two options:

1. Let the DataGrid automatically generate the columns.
2. Generate the columns explicitly, using a single TemplateColumn.

For option 2 the syntax is precisely the same as the syntax used for the DataList or Repeater controls, so we'll save that discussion for later. For the first option, the simple solution is to leave the AutoGenerateColumns property to its default value - True. (If you use the Property Builder through Visual Studio .NET, simply leave the "Create columns automatically at runtime" checkbox checked.) This will create a DataGrid with a single row whose Header has the text "Item". (You might want to set ShowHeader to False.)

The following code snippet shows an example ASP.NET Web page that binds an integer array to a DataGrid with its AutoGenerateColumns property set to True, followed by the output.

<script runat="server">
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
    Dim i as Integer
    Dim fib(10) As Integer

    fib(0) = 1
    fib(1) = 1

    For i = 2 To 10
        fib(i) = fib(i - 1) + fib(i - 2)
    Next

    Me.dgArrayAutoGenerate.DataSource = fib
    Me.dgArrayAutoGenerate.DataBind()
End Sub
</script>

<asp:DataGrid id="dgArrayAutoGenerate" runat="server"
       AutoGenerateColumns="True">
</asp:DataGrid>

[View a live demo!]

As you can see in the live demo, the DataGrid displays a single column with the values of the integer array.

Displaying a Scalar Array with Template
While using the DataGrid's AutoGenerateColumns functionality is nice, there are times when you might want to display a scalar array in a Repeater or DataList, as to have more control over the HTML markup that surrounds the scalar array's values. Displaying the value of each scalar array item in a DataList or Repeater - or in a TemplateColumn in the DataGrid - is fairly simple, just use the following databinding syntax: <# Container.DataItem %>. That's it! The following example illustrates displaying an integer array in a DataList.

<script runat="server" language="C#">
private void Page_Load(object sender,  System.EventArgs e)
{
    int [] fib = new int[11];
    
    fib[0] = 1;
    fib[1] = 1;

    for (int i = 2; i < 11; i++)
        fib[i] = fib[i - 1] + fib[i - 2];

    dlFibs.DataSource = fib;
    dlFibs.DataBind();
}
</script>

<asp:DataList id="dlFibs" runat="server" RepeatColumns="3"
     GridLines="Both" CellPadding="10" RepeatDirection="Horizontal">
  <ItemTemplate>
    <b><%# Container.DataItem %></b>
  </ItemTemplate>
</asp:DataList>

[View a live demo!]

As you can see in the live demo, the integer array is displayed in a three-columned DataList control, each value displayed in bold.

Conclusion
While typically the data you'll display in a data Web control will have fields, there may be times where you want to display a scalar array. As we saw in this article, it's quite possible to accomplish this with not only the DataGrid, but also with the DataList and Repeater.

Happy Programming!