C# - Multi-select dropdown list en ASP.NET

C# - Multi-select dropdown list en ASP.NET

C# - Multi-select dropdown list en ASP.NET

Code DropDown.aspx:

<asp:UpdatePanel ID="upDefault" runat="server">
<ContentTemplate>

<div id="divCustomCheckBoxList" runat="server" >

<table border="0" cellspacing="0" class="tableDropDown">

<tr>

<td >

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td><input id="txtSelectedMLValues" class="txt" type="text" readonly="readonly"

style="width:282px; height:16px; border-right-width:0;" runat="server" /></td>

<td><img id="imgShowHide" runat="server" src="~/images/btn_dropdown.gif" align="right" /> </td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<div style="width: 296px">

<div runat="server" id="divCheckBoxList" class="DivCheckBoxList" style=" border-style:solid ; border-width:1px; border-color:Gray">

<div>

<asp:Image ID="imgClose" ToolTip="Fermer" border="0" style="height:18px; cursor:pointer"

align="right" runat="server" ImageUrl="~/images/btn-close.png" />

</div>

<div style="width:304px;FONT-SIZE:12px;FONT-FAMILY: Tahoma,Verdana,Arial,sans-serif;">

<asp:CheckBox ID="chkAll" Visible="false" style="float:left; margin-left:2px" runat="server" />

</div>

<div>

<asp:CheckBoxList ID="lstMultipleValues" runat="server" Width="250px"

CssClass="CheckBoxList" Font-Size="12px" Font-Names="Tahoma,Verdana,Arial,sans-serif"

RepeatLayout="Table" BorderStyle="None"></asp:CheckBoxList>

</div>

</div>

</div>

</td>

</tr>

</table>

</div>

</ContentTemplate>
</asp:UpdatePanel>

 Script:

<script type="text/javascript">

var timoutID;

function ShowMList() {

var divRef = document.getElementById('<%=divCheckBoxList.ClientID %>');

divRef.style.display = "block";

}

function HideMList() {

document.getElementById('<%=divCheckBoxList.ClientID %>').style.display = "none";

}

function FindSelectedItems<%=divCheckBoxList.ClientID %>(sender, textBoxID) {

var cblstTable = document.getElementById(sender.id);

var checkBoxPrefix = sender.id + "_";

var noOfOptions = cblstTable.rows.length;

var selectedText = "";

var trouve = false;

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;

}

else {

trouve = true;

}

}

if (trouve == false)

document.getElementById('<%=chkAll.ClientID %>').checked = true;

else

document.getElementById('<%=chkAll.ClientID %>').checked = false;

if (document.getElementById('<%=chkAll.ClientID %>').checked)

selectedText = document.getElementById('<%=chkAll.ClientID %>').parentNode.innerText;

document.getElementById(textBoxID.id).value = selectedText;

}

function SelectAll(sender) {

var cblstTable = document.getElementById('<%=lstMultipleValues.ClientID %>');

var checkBoxPrefix = '<%=lstMultipleValues.ClientID %>' + "_";

var noOfOptions = cblstTable.rows.length;

var selectedText = "";

for (i = 0; i < noOfOptions; ++i) {

document.getElementById(checkBoxPrefix + i).checked = sender.checked;

}

document.getElementById('<%=txtSelectedMLValues.ClientID %>').value = "";

if (sender.checked) {

document.getElementById('<%=txtSelectedMLValues.ClientID %>').value =document.getElementById('<%=chkAll.ClientID %>').parentNode.innerText;

}

}

</script>

 CSS:

.DefaultPnl
{
font-size:smaller;
font-family:Tahoma;
}

.tableDropDown
{
padding:0px;
border-collapse:collapse;
}
.txt{
FONT-SIZE:12px;
FONT-FAMILY: Tahoma,Verdana,Arial,sans-serif;
color:#000000;
BACKGROUND-COLOR:#FFFFFF;
border:1px solid #7E92AC;
height :14px;
}

.DropDownLook
{
padding:0px;
}
.OptionGroup
{
font-weight:bold;

}

.DivClose
{
display:none;
position:absolute;
width:304px;
height:220px;
background-color:#99A479;
}

.LabelClose
{
vertical-align:text-top;
position:absolute;
bottom:0px;
font-family:Verdana;
}

.DivCheckBoxList
{
display:none;
background-color:White;
width:300px;
position:absolute;
height:200px;
overflow-y:auto;
overflow-x:hidden;
}

.CheckBoxList
{
position:relative;
width:300px;
height:10px;
overflow:scroll;
font-size:small;
}

Code .DropDown.aspx.cs : 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
namespace GED.Controles
{
    public partial class DropDown : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                lstMultipleValues.Attributes.Add("onclick", "FindSelectedItems(this," + txtSelectedMLValues.ClientID + ");");
                txtSelectedMLValues.Attributes.Add("onclick", "ShowMList()");
                imgShowHide.Attributes.Add("onclick", "ShowMList()");
                divCustomCheckBoxList.Attributes.Add("onmouseover", "clearTimeout(timoutID);");
                divCustomCheckBoxList.Attributes.Add("onmouseout", "timoutID = setTimeout('HideMList" + divCheckBoxList.ClientID + "()', 750);");
                imgClose.Attributes.Add("onclick", "timoutID" + divCheckBoxList.ClientID + " = setTimeout('HideMList()', 750);");
                DataTable dtmois = new DataTable();
                dtmois.Columns.Add("Text");
                dtmois.Columns.Add("Value");
                dtmois.Rows.Add("JANVIER", "01");
                dtmois.Rows.Add("FEVRIER", "02");
                dtmois.Rows.Add("MARS", "03");
                dtmois.Rows.Add("AVRIL", "04");
                dtmois.Rows.Add("MAI", "05");
                dtmois.Rows.Add("JUIN", "06");
                dtmois.Rows.Add("JUILLET", "07");
                dtmois.Rows.Add("AOUT", "08");
                dtmois.Rows.Add("SEPTEMBRE", "09");
                dtmois.Rows.Add("OCTOBRE", "10");
                dtmois.Rows.Add("NOVEMBRE", "11");
                dtmois.Rows.Add("DECEMBRE", "12");
                SetMultiValue(dtmois, "Value", "Text", "Tous les mois");
            }

        }
        public void SetMultiValue(DataTable dt, string value, string text, string FirstElementText)
        {
            if (dt.Rows.Count != 0)
            {
                lstMultipleValues.DataSource = dt;
                lstMultipleValues.DataTextField = text;
                lstMultipleValues.DataValueField = value;
                lstMultipleValues.DataBind();
                chkAll.Text = FirstElementText;
                chkAll.Attributes.Add("onclick", "SelectAll(this)");
                chkAll.Visible = true;

            }
            else
                chkAll.Visible = false;
        }
        public string GetSelectedValues()
        {
            string filtre = "";
            if (lstMultipleValues.SelectedIndex != -1)
            {
                foreach (ListItem item in lstMultipleValues.Items)
                {

                    if (item.Selected)
                        filtre = filtre + item.Value + ",";
                }
                if (filtre.EndsWith(","))
                    filtre = filtre.Remove(filtre.LastIndexOf(','));
            }
            return filtre;
        }
        public void Select(int index) {
            lstMultipleValues.SelectedIndex = index;
            txtSelectedMLValues.Value = lstMultipleValues.SelectedItem.Text.ToString();
        }
        public void Initiliser() {
            chkAll.Checked = false;
            lstMultipleValues.SelectedIndex = -1;
            txtSelectedMLValues.Value = "";
        }
        public void ClearItems() {
            chkAll.Visible = false;
            lstMultipleValues.Items.Clear();
            txtSelectedMLValues.Value = "";
        }
    }
}