Adding scroll bars to the checkbox list in ASP.Net
This piece of code help us to add the scrollbar to the checkbox list control in ASP.NET and also it applies alternate colors and styles for the rows or Items of the check box List, which looks like Displaing the data/content in Table.
Place the CheckBoxList control inside the
<div id="list_checkboxs" onmouseover="this.className='list_expand';" onmouseout="this.className='list_collapse';">
<asp:CheckBoxList CssClass="checkboxList" style="overflow:scroll;"
BorderStyle="None" width="100px" runat="server" >
<asp:ListItem Text="Apply for All" />
<asp:ListItem Text="18017" />
<asp:ListItem Text="18018" />
<asp:ListItem Text="180" />
</asp:CheckBoxList>
</div>
Define the styles:
#list_checkboxs, .list_collapse
{
position: absolute;
background-color:White;
width: 115px;
height: 40px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid #666;
z-index: 10;
padding: 5px;
text-align: left;
display:block;
}
#list_checkboxs:hover, .list_expand
{
height: 60px;
}
.ListRow {
BACKGROUND-COLOR: #FF0000;
}
.ListAltRow
{
background-color: #0000FF;
}
.chkList {
width: 10px;
height: 10px;
background-color:transparent;
padding: 0 5px 0 0;
border: 1px solid #ccc
}
Add JQuery for applying alternate colors
$('table.checkboxList>tbody>tr:odd').addClass("ListAltRow");
$('table.checkboxList>tbody>tr:even').addClass("ListRow");
$('table.checkboxList>tbody>tr>td>:checkbox').addClass('chkList');
Attachments
