Changing the Layout of List Controls

I l @ ve RuBoard

Up to this point, you've seen how to manipulate list control selections, create and remove items programmatically, as well as how to bind these controls to external data sources. Now we'll look at how to control the layout of the two list controls that support this feature, CheckBoxList and RadioButtonList .

Using RepeatLayout

The first tool at our disposal for changing the layout of these two list controls is the RepeatLayout property. This property has two possible values: Table (default) and Flow . When RepeatLayout is set to Table , the list items are rendered within a <table> so that the items are distributed evenly. When set to Flow , the list items flow according to the surrounding HTML on the page. Listing 6.17 illustrates the difference, and Figure 6.9 shows its output.

Figure 6.9. The output from the code in Listing 6.17.

Listing 6.17 Changing the layout of a RadioButtonList control (6layout01.aspx).
 <%@ Page language="vb"%> <html> <head> <script language="VB" runat="server" ID=Script1>     Sub RepeatLayoutList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Table"                 RadioList.RepeatLayout = RepeatLayout.Table             Case "Flow"                 RadioList.RepeatLayout = RepeatLayout.Flow         End Select     End Sub </script> </head> <body> <form runat="server">     <h3>Changing list control layout</h3>     RepeatLayout:     <asp:dropdownlist id="RepeatLayoutList" runat="Server"          autopostback="True"          onselectedindexchanged="RepeatLayoutList_Changed">         <asp:listitem value="Table">Table</asp:listitem>         <asp:listitem value="Flow">Flow</asp:listitem>         </asp:dropdownlist>     <asp:radiobuttonlist id="RadioList" runat="server">         <asp:ListItem>Houston Texans</asp:ListItem>         <asp:ListItem>New Orleans Saints</asp:ListItem>         <asp:ListItem>Dallas Cowboys</asp:ListItem>         <asp:ListItem>Tennessee Titans</asp:ListItem>     </asp:radiobuttonlist> </form> </body> </html> 

By running the preceding example, you can see that using the drop-down menu to toggle the RepeatLayout property allows you to change the layout of the list items. We can also change the direction in which the items are repeated with another property: RepeatDirection .

A Change in Direction with RepeatDirection

Like the RepeatLayout property, RepeatDirection has two possible values: Vertical (default) and Horizontal . Listing 6.18 expands on the previous example to allow us to toggle not only the layout type, but also the direction. See Figure 6.10 for the output.

Figure 6.10. The output from the code in Listing 6.18.

Listing 6.18 Changing the layout and direction of a RadioButtonList control (6layout02.aspx).
 <%@ Page language="vb"%> <html> <head> <script language="VB" runat="server" ID=Script1>     Sub RepeatLayoutList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Table"                 RadioList.RepeatLayout = RepeatLayout.Table             Case "Flow"                 RadioList.RepeatLayout = RepeatLayout.Flow         End Select     End Sub     Sub RepeatDirectionList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Vertical"                 RadioList.RepeatDirection = RepeatDirection.Vertical             Case "Horizontal"                 RadioList.RepeatDirection = RepeatDirection.Horizontal         End Select     End Sub </script> </head> <body> <form runat="server">     <h3>Changing list control layout</h3>     RepeatLayout:     <asp:dropdownlist id="RepeatLayoutList" runat="Server" autopostback="True"  onselectedindexchanged="RepeatLayoutList_Changed">         <asp:listitem value="Table">Table</asp:listitem>         <asp:listitem value="Flow">Flow</asp:listitem>     </asp:dropdownlist><br>     RepeatLayout:     <asp:dropdownlist id="RepeatDirectionList" runat="Server" autopostback="True"  onselectedindexchanged="RepeatDirectionList_Changed">         <asp:listitem value="Vertical">Vertical</asp:listitem>         <asp:listitem value="Horizontal">Horizontal</asp:listitem>         </asp:dropdownlist>     <asp:radiobuttonlist id="RadioList" runat="server">         <asp:ListItem>Houston Texans</asp:ListItem>         <asp:ListItem>New Orleans Saints</asp:ListItem>         <asp:ListItem>Dallas Cowboys</asp:ListItem>         <asp:ListItem>Tennessee Titans</asp:ListItem>     </asp:radiobuttonlist> </form> </body> </html> 

We can go one step further with the layout of the list items by setting the number of columns in which the items are repeated in either the layout or direction combinations in the preceding example. We can change the column count simply by setting the RepeatColumns property, as the example in Listing 6.19 illustrates. (See Figure 6.11 for the output.)

Figure 6.11. The output from the code in Listing 6.19.

Listing 6.19 Changing the column count of a RadioButtonList control (6layout03.aspx).
 <%@ Page language="vb"%> <html> <head> <script language="VB" runat="server" ID=Script1>     Sub RepeatLayoutList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Table"                 RadioList.RepeatLayout = RepeatLayout.Table             Case "Flow"                 RadioList.RepeatLayout = RepeatLayout.Flow         End Select     End Sub     Sub RepeatDirectionList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Vertical"                 RadioList.RepeatDirection = RepeatDirection.Vertical             Case "Horizontal"                 RadioList.RepeatDirection = RepeatDirection.Horizontal         End Select     End Sub     Sub RepeatColumnsValue_Change(sender As Object, e As EventArgs)         RadioList.RepeatColumns = RepeatColumnsValue.Text     End Sub </script> </head> <body> <form runat="server">     <h3>Changing list control layout</h3>     RepeatLayout:     <asp:dropdownlist id="RepeatLayoutList" runat="Server"         autopostback="True"         onselectedindexchanged="RepeatLayoutList_Changed">         <asp:listitem value="Table">Table</asp:listitem>         <asp:listitem value="Flow">Flow</asp:listitem>     </asp:dropdownlist><br>     RepeatLayout:     <asp:dropdownlist id="RepeatDirectionList" runat="Server"          autopostback="True"          onselectedindexchanged="RepeatDirectionList_Changed">     RepeatColumns:     <asp:textbox id="RepeatColumnsValue" runat="Server"         ontextchanged="RepeatColumnsValue_Change"         columns="1" autopostback="True"/>         <asp:listitem value="Vertical">Vertical</asp:listitem>         <asp:listitem value="Horizontal">Horizontal</asp:listitem>         </asp:dropdownlist>     <asp:radiobuttonlist id="RadioList" runat="server">         <asp:ListItem>Houston Texans</asp:ListItem>         <asp:ListItem>New Orleans Saints</asp:ListItem>         <asp:ListItem>Dallas Cowboys</asp:ListItem>         <asp:ListItem>Tennessee Titans</asp:ListItem>     </asp:radiobuttonlist> </form> </body> </html> 

Go ahead and experiment with changing the number of columns in different combinations of both layout and direction. These layout adjustments offer a great deal of control over how your list controls look on your forms. If you're a developer who likes to fine-tune your control layout, ASP.NET includes some additional properties.

Fine-Tuning List Control Layout

Aside from the coarse adjustments to layout that you can make with RepeatLayout , RepeatDirection , and RepeatColumns , ASP.NET also includes two additional properties for fine-tuning the layout of your list controls: Cellspacing and Cellpadding . I'm sure you're familiar with these two properties already from working with the HTML <TABLE> tag. Just like their counterparts for that HTML element, these two list control properties control the space between list items and the space within list items respectively. Note that this property is ignored when the RepeatLayout property is set to Flow . Listing 6.20 provides us with an example. (See Figure 6.12 for the output.)

Figure 6.12. The output from the code in Listing 6.20.

Listing 6.20 Fine-tuning list control layout with Cellspacing and Cellpadding (6layout04.aspx).
 <%@ Page language="vb"%> <html> <head> <script language="VB" runat="server" ID=Script1>     Sub RepeatLayoutList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Table"                 RadioList.RepeatLayout = RepeatLayout.Table             Case "Flow"                 RadioList.RepeatLayout = RepeatLayout.Flow         End Select     End Sub     Sub RepeatDirectionList_Changed(sender As Object, e As EventArgs)         Select Case RepeatLayoutList.SelectedItem.Value             Case "Vertical"                 RadioList.RepeatDirection = RepeatDirection.Vertical             Case "Horizontal"                 RadioList.RepeatDirection = RepeatDirection.Horizontal         End Select     End Sub     Sub RepeatColumnsValue_Change(sender As Object, e As EventArgs)         RadioList.RepeatColumns = RepeatColumnsValue.Text     End Sub </script> </head> <body> <form runat="server">     <h3>Changing list control layout</h3>     RepeatLayout:     <asp:dropdownlist id="RepeatLayoutList" runat="Server"         autopostback="True"         onselectedindexchanged="RepeatLayoutList_Changed">         <asp:listitem value="Table">Table</asp:listitem>         <asp:listitem value="Flow">Flow</asp:listitem>     </asp:dropdownlist><br>     RepeatLayout:     <asp:dropdownlist id="RepeatDirectionList" runat="Server"          autopostback="True"          onselectedindexchanged="RepeatDirectionList_Changed">     RepeatColumns:     <asp:textbox id="RepeatColumnsValue" runat="Server"         ontextchanged="RepeatColumnsValue_Change"         columns="1" autopostback="True"/>         <asp:listitem value="Vertical">Vertical</asp:listitem>         <asp:listitem value="Horizontal">Horizontal</asp:listitem>         </asp:dropdownlist>     <asp:radiobuttonlist id="RadioList" runat="server">         <asp:ListItem>Houston Texans</asp:ListItem>         <asp:ListItem>New Orleans Saints</asp:ListItem>         <asp:ListItem>Dallas Cowboys</asp:ListItem>         <asp:ListItem>Tennessee Titans</asp:ListItem>     </asp:radiobuttonlist> </form> </body> </html> 

Notice how the Cellspacing and Cellpadding properties are ignored when the layout mode of the list control is set to Flow . Even though all five of these layout properties only apply to two list controls, CheckBoxList and RadioButtonList , remember that you can tweak the look of all ASP.NET list controls by using CSS stylesheets.

I l @ ve RuBoard


Asp. Net. By Example
ASP.NET by Example
ISBN: 0789725622
EAN: 2147483647
Year: 2001
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net