13.3 The DataList Control

The DataList control is very similar to the Repeater control. In fact, you can render exactly the same output using exactly the same controls, changing only the Repeater to a DataList control. If you examine Table 13-1, however, you will see that the DataList control provides support for both column and flow layout. To see how this works, you'll add radio buttons to offer the user the choice of vertical versus horizontal flow, and one versus two columns, as shown in Figure 13-2.

Figure 13-2. DataList with flow control

To create this page, you will modify the previous .aspx page and change the Repeater to a DataList, changing its name from Repeater1 to DataList1:

<asp:DataList ID="DataList1" Runat="server">

You'll also need to modify the end tag by changing

</asp:Repeater>

to:

</asp:DataList>

The template for the DataList is identical; no changes are needed at all! You will want to add RadioButtons, however, to allow the user to specify the direction the items will flow, and number of columns:

<table>
   <tr>
      <td class="item">Which direction?</td>
      <td class="item" colspan="2">
         <asp:RadioButton ID="Vertical" 
         GroupName="Direction" Runat="server" 
         AutoPostBack="True" Checked="True" />Vertical</td>
      <td class="item" colspan="2">
         <asp:RadioButton ID="Horizontal" GroupName="Direction" 
         Runat="server" AutoPostBack="True"  />Horizontal</td>
   </tr>
   <tr>
      <td class="item">How many columns?</td>
      <td class="item">
         <asp:RadioButton ID="Col1" GroupName="NumCols" 
         Runat="server" AutoPostBack="True"  Checked="True"/>1</td>
      <td class="item">
         <asp:RadioButton ID="Col2" GroupName="NumCols" 
         Runat="server" AutoPostBack="True" />2</td>
   </tr>
</table>

That's it. No other changes are needed in the .aspx file. The code-behind page is almost identical as well. You will, of course, change the declaration for the DataList:

protected System.Web.UI.WebControls.DataList DataList1;

The VB.NET declaration is identical except for the final semicolon.

While you are at it, you'll add declarations for the four radio buttons as well.

protected System.Web.UI.WebControls.RadioButton Vertical;
protected System.Web.UI.WebControls.RadioButton Horizontal;
protected System.Web.UI.WebControls.RadioButton Col1;
protected System.Web.UI.WebControls.RadioButton Col2;

In VB .NET, you would use:

Protected Vertical As System.Web.UI.WebControls.RadioButton
Protected Horizontal As System.Web.UI.WebControls.RadioButton
Protected Col1 As System.Web.UI.WebControls.RadioButton
Protected Col2 As System.Web.UI.WebControls.RadioButton

The Page_Load event is slightly different. In the Repeater example, there was no need to check for a postback because the page was drawn only once. This time, you will check for a postback and load the data set only if IsPostBack is false. If IsPostBack is true, however, you will check the status of the Radio Buttons, and you'll set the RepeatDirection and the RepeatColumns properties of the DataList control accordingly. In C#, this is done as follows:

DataList1.RepeatDirection = 
   Vertical.Checked ? 
      RepeatDirection.Vertical : RepeatDirection.Horizontal;

DataList1.RepeatColumns = 
   Col1.Checked ? 1 : 2;

The ? operator in C# is evaluated as follows: if the condition (Vertical.Checked) evaluates to true, then return the first argument (RepeatDirection.Vertical); otherwise, return the second argument (RepeatDirection.Horizontal). The returned result is then assigned to the RepeatDirection property of the DataList1 control. Similarly, the second invocation evaluates whether Col1.Checked is true, and if so assigns 1 to RepeatColumns; otherwise, 2 is assigned.

In VB.NET, this is handled by the following code:

DataList1.RepeatDirection = IIf(Vertical.Checked, _
   RepeatDirection.Vertical, RepeatDirection.Horizontal)

DataList1.RepeatColumns = IIF(Col1.Checked, 1, 2)

The complete Page_Load method for the DataList control example is shown in C# in Example 13-4 and in VB.NET in Example 13-5.

Example 13-4. C# version of Page_Load for the DataList control example

private void Page_Load(object sender, System.EventArgs e)
{

   if (!Page.IsPostBack)
   {
      // connect to the Bugs database
      string connectionString = 
         "server=YourServer; uid=sa; 
          pwd=YourPasword; database=ProgASPDotNetBugs";

      // get records from the Bugs table
      string commandString = 
         "Select b.BugID, b.Description, p.ProductDescription, ";
      commandString += "peo.FullName from Bugs b ";
      commandString += "join lkProduct p on b.Product = p.ProductID ";
      commandString += "join People peo on b.Reporter = peo.PersonID ";
      // create the data set command object 
      // and the DataSet
      SqlDataAdapter dataAdapter = 
         new SqlDataAdapter(
         commandString, connectionString);

      DataSet dataSet = new DataSet(  );

      // fill the data set object
      dataAdapter.Fill(dataSet,"Bugs");

      // Get the one table from the DataSet
      DataTable dataTable = dataSet.Tables[0];

      DataList1.DataSource = dataTable;
      DataList1.DataBind(  );
   }
   else
   {
      // set the Repeat direction based on the value
      // in the radio buttons
      DataList1.RepeatDirection = 
         Vertical.Checked ? 
            RepeatDirection.Vertical : 
                 RepeatDirection.Horizontal;

      // set the number of columns based on the value
      // in the radio buttons
      DataList1.RepeatColumns = 
         Col1.Checked ? 1 : 2;
   }
}

Example 13-5. VB.NET version of Page_Load for the DataList control example

Private Sub Page_Load(ByVal sender As System.Object, _
                      ByVal e As System.EventArgs) Handles MyBase.Load
   If Not Page.IsPostBack Then
      ' connect to the Bugs database
      Dim connectionString As String = "server=YourServer; uid=sa; " & _ 
               "pwd=YourPasword; database=ProgASPDotNetBugs" 

      ' get records from the Bugs table
      Dim commandString As String = _
          "Select b.BugID, b.Description, p.ProductDescription, " & _
          "peo.FullName from Bugs b " & _
          "join lkProduct p on b.Product = p.ProductID " & _
          "join People peo on b.Reporter = peo.PersonID "

      ' create the data set command object and the data set
      Dim dataAdapter As New SqlDataAdapter(commandString, connectionString)

      Dim dataSet As New DataSet(  )

     ' fill the data set object
     dataAdapter.Fill(dataSet, "Bugs")

     ' Get the one table from the DataSet
      Dim dataTable As DataTable = dataSet.Tables(0)

      DataList1.DataSource = dataTable
      DataList1.DataBind(  )
   Else
      ' set the Repeat direction based on the value
      ' in the radio buttons
      DataList1.RepeatDirection = IIf(Vertical.Checked, _
                RepeatDirection.Vertical, RepeatDirection.Horizontal)
      ' set the number of columns based on the value
      ' in the radio buttons
      DataList1.RepeatColumns = IIf(Col1.Checked, 1, 2)
   End If
End Sub