aspx Page
=============================================================
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.DivClose
{
display:none;
position:absolute;
width:250px;
height:220px;
border-style:solid;
border-color:Gray;
border-width:1px;
background-color:#99A479;
}
.LabelClose
{
vertical-align:text-top;
position:absolute;
bottom:0px;
font-family:Verdana;
}
.DivCheckBoxList
{
display:none;
background-color:White;
width:250px;
position:absolute;
height:200px;
overflow-y:auto;
overflow-x:hidden;
border-style:solid;
border-color:Gray;
border-width:1px;
}
.CheckBoxList
{
position:relative;
width:250px;
height:10px;
overflow:scroll;
font-size:small;
}
</style>
<script type="text/javascript">
var timoutID;
//This function shows the checkboxlist
function ShowMList()
{
var divRef = document.getElementById("divCheckBoxList");
divRef.style.display = "block";
var divRefC = document.getElementById("divCheckBoxListClose");
divRefC.style.display = "block";
}
//This function hides the checkboxlist
function HideMList()
{
document.getElementById("divCheckBoxList").style.display = "none";
document.getElementById("divCheckBoxListClose").style.display = "none";
}
//This function finds the checkboxes selected in the list and using them,
//it shows the selected items text in the textbox (comma separated)
function FindSelectedItems(sender,textBoxID)
{
var cblstTable = document.getElementById(sender.id);
var checkBoxPrefix = sender.id + "_";
var noOfOptions = cblstTable.rows.length;
var selectedText = "";
for(i=0; i < noOfOptions ; i++)
{
if(document.getElementById(checkBoxPrefix+i).checked)
{
if(selectedText == "")
selectedText = document.getElementById
(checkBoxPrefix+i).parentNode.innerText;
else
selectedText = selectedText + "," +
document.getElementById(checkBoxPrefix+i).parentNode.innerText;
}
}
document.getElementById(textBoxID.id).value = selectedText;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="lbl" runat ="server" Font-Names ="Tahoma" Font-Size ="8pt" Font-Bold="true">MultiSelect DropDownList:</asp:Label>
<div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);"
onmouseout="timoutID = setTimeout('HideMList()', 750);">
<table>
<tr>
<td align="right" class="DropDownLook">
<input id="txtSelectedMLValues" type="text" readonly="readonly" onclick="ShowMList()"
style="width: 229px;font: normal 8pt tahoma;" runat="server" />
</td>
<td align="left" class="DropDownLook">
<img id="imgShowHide" runat="server" src="drop.gif" onclick="ShowMList()" style="text-align: left;"
alt="0" />
</td>
</tr>
<tr>
<td colspan="2" class="DropDownLook">
<div>
<div runat="server" id="divCheckBoxListClose" class="DivClose">
<label runat="server" onclick="HideMList();" class="LabelClose" id="lblClose">
x</label>
</div>
<div runat="server" id="divCheckBoxList" class="DivCheckBoxList">
<asp:CheckBoxList ID="lstMultipleValues" runat="server" Width="250px" Font-Names ="Tahoma" Font-Size ="8pt" CssClass="CheckBoxList">
</asp:CheckBoxList>
</div>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code Behind
==========================================================================================
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
lstMultipleValues.Items.Add("Asia");
lstMultipleValues.Items.Add("Europe");
lstMultipleValues.Items.Add("Australia");
lstMultipleValues.Items.Add("North America");
lstMultipleValues.Items.Add("South America");
lstMultipleValues.Items.Add("Africa");
lstMultipleValues.Items.Add("Antarctica");
lstMultipleValues.Attributes.Add("onclick", "FindSelectedItems(this," + txtSelectedMLValues.ClientID + ");");
}
}
No comments:
Post a Comment