.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Dropdown List with multiple selection option in SharePoint 2010

Posted By:Sagar Pardeshi       Posted Date: November 07, 2013    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

This Dropdown list with multiple Selection options. This Custom control dropdown of multiple Selection .in asp.net dropdown we select only one option at one time.
 

Introduction
This Dropdown list with multiple Selection options. This Custom control dropdown of multiple Selection .in asp.net dropdown we select only one option at one time.
 
Dropdown with multiple selections Screen Shot


Aspx code:

<style type="text/css">
    .DivClose
    {
        display: none;
        position: absolute;
        width: 150px;
        height: 220px;
        border-style: solid;
        border-color: Gray;
        border-width: 1px;
        background-color: #F0FFFF;
    }
    
    .LabelClose
    {
        vertical-align: text-top;
        position: absolute;
        bottom: 0px;
        font-family: Verdana;
    }
    
    .DivCheckBoxList
    {
        display: none;
        background-color: White;
        width: 150px;
        position: absolute;
        height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
        border-style: solid;
        border-color: Gray;
        border-width: 1px;
        width: 150px;
    }
    
    .CheckBoxList
    {
        position: relative;
        width: 150px;
        height: 10px;
        overflow: scroll;
        font-size: small;
    }
    .Maintitle
    {
        text-align: left;
        margin: 0em;
        color: #00008B;
        font-size: large;
        padding-bottom: 16px;
        border-bottom: 2px solid #A9A9A9;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    .headers
    {
        text-align: left;
        padding-right: 10px;
    }
    
    .numbers
    {
        text-align: right;
        padding-right: 12px;
    }
    .textData
    {
        text-align: left;
        padding-right: 10px;
    }
    .numbersHeader
    {
        width: 80px;
    }
    .numbersfooter
    {
        background-color: #d2d0d0;
        color: #000000;
    }
    
    .SGridView
    {
        width: 100%;
    }
    .style1
    {
        height: 30px;
    }
</style>
<asp:Literal ID="LtrMessage" runat="server"></asp:Literal>

<table style="padding-top: 9px">
    <tr>
       
        <td style="padding-bottom: 13px; font-style: normal;">
            <strong>City :</strong><span style="color: Red; padding-left: 2px;">*</span>
        </td>
        <td>
            <div id="divCustomCheckBoxList" runat="server" onmouseover="clearTimeout(timoutID);"
                onmouseout="timoutID = setTimeout('HideMList()', 750);">
                <table>
                    <tr>
                        <td align="right" class="style1">
                            <input id="txtSelectedMLValues" type="text" readonly="readonly" onclick="ShowMList()"
                                style="width: 150px;" runat="server" />
                        </td>
                        <td align="left" class="style1">
                            <img id="imgShowHide" runat="server" align="left" onclick="ShowMList()" src="~/_layouts/1033/images/down-arrow.bmp" />
                        </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">
                                        <b>x</b>
                                    </label>
                                </div>
                                <div runat="server" title="divCheckBoxList" id="divCheckBoxList" class="DivCheckBoxList">
                                    <asp:UpdatePanel ID="UpdatePanel11" runat="server">
                                        <ContentTemplate>
                                            <asp:CheckBox ID="CheckBoxList1" runat="server" Text="All" AutoPostBack="true" OnCheckedChanged="CheckBoxList1_CheckedChanged">
                                            </asp:CheckBox>
                                            <asp:CheckBoxList ID="lstMultipleValues" runat="server" Width="250px" CssClass="CheckBoxList">
                                            </asp:CheckBoxList>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </div>
                            </div>
            </div>
        </td>
        <td>
        </td>
    </tr>
</table>



<br />
<br />
<div>
    
</div>
<div>
    <script type="text/javascript">

        var timoutID;

        //This function shows the checkboxlist
        function ShowMList() {

            var divRef = document.getElementById("<%=divCheckBoxList.ClientID%>");
            divRef.style.display = "block";
            var divRefC = document.getElementById("<%=divCheckBoxListClose.ClientID%>");
            divRefC.style.display = "block";

        }

        //This function hides the checkboxlist
        function HideMList() {
            document.getElementById("<%=divCheckBoxList.ClientID%>").style.display = "none";
            document.getElementById("<%=divCheckBoxListClose.ClientID%>").style.display = "none";
        }

      
        var cblstTable;
        var checkBoxPrefix;
        var noOfOptions;
        var selectedText
        function FindSelectedItems(sender, textBoxID) {

            cblstTable = document.getElementById(sender.id);
            var flagUnchecked = 0;
            var flaChecked = 0;
            checkBoxPrefix = sender.id + "_";
            noOfOptions = cblstTable.rows.length;
            selectedText = "";
            for (i = 0; i < noOfOptions; ++i) {
                if (document.getElementById(checkBoxPrefix + i).checked) {
                    flag = 1;

                    if (selectedText == "")
                        selectedText = document.getElementById
                                   (checkBoxPrefix + i).parentNode.innerText;
                    else
                        selectedText = selectedText + "," +
                 document.getElementById(checkBoxPrefix + i).parentNode.innerText;
                }
            }
            for (i = 0; i < noOfOptions; ++i) {
                if (document.getElementById(checkBoxPrefix + i).checked == false) {
                    document.getElementById("<%=CheckBoxList1.ClientID%>").checked = false;

                }
                if (document.getElementById(checkBoxPrefix + i).checked == true) {

                    flagUnchecked = 1;
                    flaChecked = flaChecked + 1;
                }

            }
            document.getElementById(textBoxID.id).value = selectedText;
            if (flagUnchecked == 0) {
                document.getElementById(textBoxID.id).value = "Select City";
            }
            if (flaChecked == noOfOptions) {
                document.getElementById("<%=CheckBoxList1.ClientID%>").checked = true;
                document.getElementById(textBoxID.id).value = "All City";
            }

        }

        function FindAllRepMgr(sender, textBoxID) {

            if (document.getElementById("<%=CheckBoxList1.ClientID%>").checked == true) {
                for (i = 0; i < noOfOptions; ++i) {
                    var raw = document.getElementById(checkBoxPrefix + i).rawValue = null;
                    var raw1 = document.getElementById(checkBoxPrefix + i).checked = true;
                    document.getElementById(checkBoxPrefix + i).checked == true;
                }
                document.getElementById(textBoxID.id).value = "All City";
            }
            if (document.getElementById("<%=CheckBoxList1.ClientID%>").checked == false) {
                for (i = 0; i < noOfOptions; ++i) {
                    var raw = document.getElementById(checkBoxPrefix + i).rawValue = null;
                    var raw1 = document.getElementById(checkBoxPrefix + i).checked = false;
                    document.getElementById(checkBoxPrefix + i).checked == false;
                }
                document.getElementById(textBoxID.id).value = "Select City";

            }
        }

    </script>
</div>






 


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend