Multiselect Dropdown in Asp.net 4.0 using C#

CS1401
Posted by in ASP.NET AJAX category on for Intermediate level | Points: 150 | Views : 125478 red flag
Rating: 4.67 out of 5  
 3 vote(s)

In this article, I will show you how to create a multi-select in an ASP.net page. I will keep this article short and sweet so you can just use the code in your applications. Previously i refer many codes about multiselect dropdown but i found all are little complex to implement. So i decided to try it in my own. Lets see how i implement this.


 Download source code for Multiselect Dropdown in Asp.net 4.0 using C#

Introduction

In this article, I will show you how to create a multi-select in an ASP.net page. I will keep this article short and sweet so you can just use the code in your applications. Previously i refer many codes about multiselect dropdown but i found all are little complex to implement. So i decided to try it in my own. Lets see how i implement this.

Objective

First, you must be install the ajax controls in your visual studio. I am using VS2010.

Because, i am using popup control extender to implement this one.


Using the code

Now, place one textbox in your design view and assign the popup extender for that textbox. Important note here is you must be place your textbox control within the "Updatepanel".

Afterwards, you create one panel and within this panel you put one checkboxlist. You assign this panel to the "PopupControlID" property of the Popup Extender.

Now see this code:




<%@ Page Language="C#" AutoEventWireup="true" CodeFile="multidropdown.aspx.cs" Inherits="_Default"%> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
!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></title> </head> <body> <form id="form1" runat="server"> <div> <asp:ToolkitScriptManager runat="server"> </asp:ToolkitScriptManager>
<asp:UpdatePanel ID="updatepanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:PopupControlExtender ID="TextBox1_PopupControlExtender" runat="server" Enabled="True" ExtenderControlID="" TargetControlID="TextBox1"
PopupControlID="Panel1" OffsetY="22"> </asp:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server" Height="116px" Width="145px"
BorderStyle="Solid" BorderWidth="2px" Direction="LeftToRight" ScrollBars="Auto" BackColor="#CCCCCC" Style="display: none"> <asp:CheckBoxList ID="CheckBoxList1" runat="server"
DataSourceID="SqlDataSource1" DataTextField="holiday_name" DataValueField="holiday_name" AutoPostBack="True" OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"> </asp:CheckBoxList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:employeedbConnectionString %>" SelectCommand="SELECT [holiday_name] FROM [tblholidaymas]">
</asp:SqlDataSource>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel> </div> </form> </body> </html>

Finally we must do only one modification in code behind, because each time clicking the checkboxlist that selected value will added into the textbox control. So in selected index changed event you will place this code.

protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        string name = "";
        for (int i = 0; i < CheckBoxList1.Items.Count; i++)
        {
            if (CheckBoxList1.Items[i].Selected)
            {
                name += CheckBoxList1.Items[i].Text + ",";
            }
        }
        TextBox1.Text = name;
    }

Now we did it.

Page copy protected against web site content infringement by Copyscape

About the Author

CS1401
Full Name: CS1401 C
Member Level: Starter
Member Status: Member
Member Since: 6/28/2011 12:52:12 AM
Country: New Zealand
...
http://www.dotnetfunda.com
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

Login to vote for this post.

Comments or Responses

Posted by: CS1401 on: 9/17/2011 | Points: 25
THank U..

Login to post response

Comment using Facebook(Author doesn't get notification)