How to create a horizontal CheckBoxList in asp.net

asp.net checkboxlist horizontal

CheckBoxList is an asp.net web server control. checkboxlist control create a multi selection check box group. a checkboxlist can contain many items. by default, checkboxlist items are displayed vertically in web page.

CheckBoxList RepeatDirection property allow us to set or get a value that indicate whether the control display it items vertically or horizontally. to display all items of a checkboxlist to horizontally we need to apply few techniques.

First we need to set the RepeatDirection property value to Horizontal. next we need to leave the RepeatLayout and RepeatColumns property unchanged. RepeatLayout property default value is Table and the RepeatColumns property default value is 0 (zero). so the procedure is, we need to set checkboxlist RepeatDirection property value to Horizontal, RepeatLayout to Table and RepeatColumns to 0.

The following asp.net c# example code demonstrate us how can we create a horizontal checkboxlist in an asp.net application.

checkboxlist-horizontal.aspx


<%@ Page Language="C#" AutoEventWireup="true"%>    
      
<!DOCTYPE html>
        
<script runat="server">

</script>        
        
<html xmlns="http://www.w3.org/1999/xhtml">        
<head id="Head1" runat="server">        
    <title>asp.net checkboxlist horizontal</title>
</head>        
<body>        
    <form id="form1" runat="server">        
    <div>        
        <h2 style="color:MidnightBlue; font-style:italic;">        
            asp.net example - checkboxlist horizontal
        </h2>        
        <hr width="550" align="left" color="Gainsboro" />        
        <br /><br />
        <asp:CheckBoxList 
            ID="CheckBoxList1"
            runat="server"
            AutoPostBack="true"
            BorderWidth="1"
            BorderColor="LightGray"
            RepeatDirection="Horizontal"
            >
            <asp:ListItem Text="Pied Crow" Value="1"></asp:ListItem>
            <asp:ListItem Text="House Crow" Value="2"></asp:ListItem>
            <asp:ListItem Text="Green Magpie" Value="3"></asp:ListItem>
            <asp:ListItem Text="Piapiac" Value="4"></asp:ListItem>
            <asp:ListItem Text="Flame Robin" Value="5"></asp:ListItem>
        </asp:CheckBoxList>  
    </div>        
    </form>        
</body>        
</html>

More asp.net examples