DataList.RepeatDirection Property
Gets or sets whether the DataList control displays vertically or horizontally.
[Visual Basic] Public Overridable Property RepeatDirection As RepeatDirection [C#] public virtual RepeatDirection RepeatDirection {get; set;} [C++] public: __property virtual RepeatDirection get_RepeatDirection(); public: __property virtual void set_RepeatDirection(RepeatDirection); [JScript] public function get RepeatDirection() : RepeatDirection; public function set RepeatDirection(RepeatDirection);
Property Value
One of the RepeatDirection values. The default is Vertical.
Exceptions
| Exception Type | Condition |
|---|---|
| ArgumentException | The specified value is not one of the RepeatDirection values. |
Remarks
Use the RepeatDirection property to specify the display direction of the DataList control.
Note The number of columns displayed is always determined by the RepeatColumns property.
If this property is set to RepeatDirection.Vertical, the items in the list are displayed in columns loaded from top to bottom, then left to right, until all items are rendered. For example, if the RepeatColumns property is set to 3, the items in the DataList control are displayed in three columns, as in the following table.
| 1 | 4 | 7 |
| 2 | 5 | 8 |
| 3 | 6 |
If this property is set to RepeatDirection.Horizontal, the items in the list are displayed in rows loaded from left to right, then top to bottom, until all items are rendered. For example, if the RepeatColumns property is set to 3, the items of the DataList control are displayed in rows of three items each, as in the following table.
| 1 | 2 | 3 |
| 4 | 5 | 6 |
| 7 | 8 |
Example
[Visual Basic, C#] The following example demonstrates how to use the RepeatDirection property to specify the direction in which the DataList control is displayed.
[Visual Basic, C#] Note The following code sample uses the single-file code model and may not work correctly if copied directly into a code-behind file. This code sample must be copied into an empty text file that has an .aspx extension. For more information on the Web Forms code model, see Web Forms Code Model.
[Visual Basic] <%@ Page Language="VB" AutoEventWireup="True" %> <%@ Import Namespace="System.Data" %> <html> <script runat="server"> Function CreateDataSource() As ICollection ' Create sample data for the DataList control. Dim dt As DataTable = New DataTable() dim dr As DataRow ' Define the columns of the table. dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32))) dt.Columns.Add(New DataColumn("StringValue", GetType(String))) dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double))) dt.Columns.Add(New DataColumn("ImageValue", GetType(String))) ' Populate the table with sample values. Dim i As Integer For i = 0 To 8 dr = dt.NewRow() dr(0) = i dr(1) = "Description for item " & i.ToString() dr(2) = 1.23 * (i + 1) dr(3) = "Image" & i.ToString() & ".jpg" dt.Rows.Add(dr) Next i Dim dv As DataView = New DataView(dt) Return dv End Function Sub Page_Load(sender As Object, e As EventArgs) ' Load sample data only once, when the page is first loaded. If Not IsPostBack Then ItemsList.DataSource = CreateDataSource() ItemsList.DataBind() End If End Sub Sub Button_Click(sender As Object, e As EventArgs) ' Set the repeat direction based on the selected value of the ' DirectionList DropDownList control. ItemsList.RepeatDirection = _ CType(DirectionList.SelectedIndex, RepeatDirection) ' Set the repeat layout based on the selected value of the ' LayoutList DropDownList control. ItemsList.RepeatLayout = CType(LayoutList.SelectedIndex, RepeatLayout) ' Set the number of columns to display based on the selected ' value of the ColumnsList DropDownList control. ItemsList.RepeatColumns = ColumnsList.SelectedIndex ' Show or hide the gridlines based on the value of the ' ShowBorderCheckBox. Note that gridlines are displayed ' only if the RepeatLayout property is set to Table. If ShowBorderCheckBox.Checked _ And ItemsList.RepeatLayout = RepeatLayout.Table Then ItemsList.BorderWidth = Unit.Pixel(1) ItemsList.GridLines = GridLines.Both Else ItemsList.BorderWidth = Unit.Pixel(0) ItemsList.GridLines = GridLines.None End If End Sub </script> <body> <form runat=server> <h3>DataList Example</h3> <asp:DataList id="ItemsList" BorderColor="black" CellPadding="5" CellSpacing="5" RepeatDirection="Vertical" RepeatLayout="Table" RepeatColumns="0" ShowBorder="False" runat="server"> <HeaderStyle BackColor="#aaaadd"> </HeaderStyle> <AlternatingItemStyle BackColor="Gainsboro"> </AlternatingItemStyle> <HeaderTemplate> List of items </HeaderTemplate> <ItemTemplate> Description: <br> <%# DataBinder.Eval(Container.DataItem, "StringValue") %> <br> Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %> <br> <asp:Image id="ProductImage" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>' runat="server"/> </ItemTemplate> </asp:DataList> <hr> <table cellpadding="5"> <tr> <td> Repeat direction: <td> <td> Repeat layout: <td> <td> Repeat columns: <td> <td> <asp:CheckBox id="ShowBorderCheckBox" Text="Show border" Checked="False" runat="server" /> <td> </tr> <tr> <td> <asp:DropDownList id="DirectionList" runat="server"> <asp:ListItem>Horizontal</asp:ListItem> <asp:ListItem Selected="True">Vertical</asp:ListItem> </asp:DropDownList> <td> <td> <asp:DropDownList id="LayoutList" runat="server"> <asp:ListItem Selected="True">Table</asp:ListItem> <asp:ListItem>Flow</asp:ListItem> </asp:DropDownList> <td> <td> <asp:DropDownList id="ColumnsList" runat="server"> <asp:ListItem Selected="True">0</asp:ListItem> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> <td> <td> <td> </tr> </table> <asp:LinkButton id="RefreshButton" Text="Refresh DataList" OnClick="Button_Click" runat="server"/> </form> </body> </html> [C#] <%@ Page Language="C#" AutoEventWireup="True" %> <%@ Import Namespace="System.Data" %> <html> <script runat="server"> ICollection CreateDataSource() { // Create sample data for the DataList control. DataTable dt = new DataTable(); DataRow dr; // Define the columns of the table. dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32))); dt.Columns.Add(new DataColumn("StringValue", typeof(String))); dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double))); dt.Columns.Add(new DataColumn("ImageValue", typeof(String))); // Populate the table with sample values. for (int i = 0; i < 9; i++) { dr = dt.NewRow(); dr[0] = i; dr[1] = "Description for item " + i.ToString(); dr[2] = 1.23 * (i + 1); dr[3] = "Image" + i.ToString() + ".jpg"; dt.Rows.Add(dr); } DataView dv = new DataView(dt); return dv; } void Page_Load(Object sender, EventArgs e) { // Load sample data only once, when the page is first loaded. if (!IsPostBack) { ItemsList.DataSource = CreateDataSource(); ItemsList.DataBind(); } } void Button_Click(Object sender, EventArgs e) { // Set the repeat direction based on the selected value of the // DirectionList DropDownList control. ItemsList.RepeatDirection = (RepeatDirection)DirectionList.SelectedIndex; // Set the repeat layout based on the selected value of the // LayoutList DropDownList control. ItemsList.RepeatLayout = (RepeatLayout)LayoutList.SelectedIndex; // Set the number of columns to display based on the selected // value of the ColumnsList DropDownList control. ItemsList.RepeatColumns = ColumnsList.SelectedIndex; // Show or hide the gridlines based on the value of the // ShowBorderCheckBox property. Note that gridlines are displayed // only if the RepeatLayout property is set to Table. if ((ShowBorderCheckBox.Checked) && (ItemsList.RepeatLayout == RepeatLayout.Table)) { ItemsList.BorderWidth = Unit.Pixel(1); ItemsList.GridLines = GridLines.Both; } else { ItemsList.BorderWidth = Unit.Pixel(0); ItemsList.GridLines = GridLines.None; } } </script> <body> <form runat=server> <h3>DataList Example</h3> <asp:DataList id="ItemsList" BorderColor="black" CellPadding="5" CellSpacing="5" RepeatDirection="Vertical" RepeatLayout="Table" RepeatColumns="0" ShowBorder="False" runat="server"> <HeaderStyle BackColor="#aaaadd"> </HeaderStyle> <AlternatingItemStyle BackColor="Gainsboro"> </AlternatingItemStyle> <HeaderTemplate> List of items </HeaderTemplate> <ItemTemplate> Description: <br> <%# DataBinder.Eval(Container.DataItem, "StringValue") %> <br> Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %> <br> <asp:Image id="ProductImage" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>' runat="server"/> </ItemTemplate> </asp:DataList> <hr> <table cellpadding="5"> <tr> <td> Repeat direction: <td> <td> Repeat layout: <td> <td> Repeat columns: <td> <td> <asp:CheckBox id="ShowBorderCheckBox" Text="Show border" Checked="False" runat="server" /> <td> </tr> <tr> <td> <asp:DropDownList id="DirectionList" runat="server"> <asp:ListItem>Horizontal</asp:ListItem> <asp:ListItem Selected="True">Vertical</asp:ListItem> </asp:DropDownList> <td> <td> <asp:DropDownList id="LayoutList" runat="server"> <asp:ListItem Selected="True">Table</asp:ListItem> <asp:ListItem>Flow</asp:ListItem> </asp:DropDownList> <td> <td> <asp:DropDownList id="ColumnsList" runat="server"> <asp:ListItem Selected="True">0</asp:ListItem> <asp:ListItem>1</asp:ListItem> <asp:ListItem>2</asp:ListItem> <asp:ListItem>3</asp:ListItem> <asp:ListItem>4</asp:ListItem> <asp:ListItem>5</asp:ListItem> </asp:DropDownList> <td> <td> <td> </tr> </table> <asp:LinkButton id="RefreshButton" Text="Refresh DataList" OnClick="Button_Click" runat="server"/> </form> </body> </html>
[C++, JScript] No example is available for C++ or JScript. To view a Visual Basic or C# example, click the Language Filter button
in the upper-left corner of the page.
Requirements
Platforms: Windows 2000, Windows XP Professional, Windows Server 2003 family
See Also
DataList Class | DataList Members | System.Web.UI.WebControls Namespace | RepeatDirection | RepeatColumns | RepeatLayout