Dropdown with checkboxlist and Display selected Item in Div

Introduction:

Sometimes you want to select multiple items in Dropdownlist. There are different ways to resolve this. Here I will describe how can we use Checkboxlist for Dropdown, with the help of Jquery and AjaxControlToolkit .

Description:

First of all you have to add AjaxControlToolkit.dll to your bin folder and write following structure in your aspx page.

Also add jquery.min.js in header section.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test._Default" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxtoolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>DropDown With Checkboxlist</title>

</head>

<body>

<ajaxtoolkit:ToolkitScriptManager ID="ScriptManager1" runat="server">

</ajaxtoolkit:ToolkitScriptManager>

<tr>

Name:

</td>

<asp:TextBox ID="txtRecruter" Text="Select Name" Width="210px" Height="19px" ReadOnly="true"

Style="background: url(/Images/DropDownarrow.png) no-repeat right; padding-top: 0px;"

runat="server"> </asp:TextBox>

<asp:Panel ID="pnlddlRecruter" runat="server" BackColor="White" Style="border: solid 1px #7F9DB9;

overflow: auto; display: none; height: 250px; width: 200px;">

<asp:CheckBoxList ID="chkListName" runat="server">

</asp:CheckBoxList>

</asp:Panel>

<ajaxtoolkit:PopupControlExtender runat="server" ID="popExtDDLRecruter" TargetControlID="txtRecruter"

PopupControlID="pnlddlRecruter" Position="Bottom" />

<div id="dvSelectedTextRecruter" style="overflow: auto; border: solid 1px #cbcbcb;

background-color: #e6ebf4; max-height: 200px; width: 170px; padding-bottom: 5px;

padding-top: 5px; margin-top: 5px; display: none; text-align: left">

</div>

$(document).ready(function() {

$("#<%= chkListName.ClientID %>").trigger('click');

});

dvSelectedTextRecruter.innerHTML = "";

$('#<%= chkListName.ClientID %>').click(function() {

var final = '';

$("#dvSelectedTextRecruter").css("display", "none");

$("[id*=<%= chkListName.ClientID %>] input:checked").each(function() {

$("#dvSelectedTextRecruter").css("display", "block");

var values = " " + $(this).next().html() + "<hr style='border: #cbcbcb;' />";

final += values;

});

var vrGetLastIndexOf = final.lastIndexOf('<hr');

dvSelectedTextRecruter.innerHTML = final.substring(0, vrGetLastIndexOf != -1 ? vrGetLastIndexOf : final.length);

});

</script>

</td>

</tr>

</table>

</form>

</body>

</html>

If you see carefully, I have used PopupControlExtender of Ajaxcontroltoolkit. it Contains following features.

TargetControlID: Gets or sets the ID of the control that the extender is associated with.

PopupControlID: The ID of the element that activates the modal popup.

Once you finish your aspx page design, Let's complete code behind.

Add Following namespace in your cs page.

C# Code:

using System;

using System.Data.SqlClient;

using System.Data;

Now Write Code to bind Checkboxlist

public partial class _Default : System.Web.UI.Page

{

SqlConnection con = new SqlConnection("Data Source=TempDB;Initial Catalog=temp;User ID=user; Password=dbPass;");

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindCheckBoxList();

}

protected void BindCheckBoxList()

{

con.Open();

SqlCommand cmd = new SqlCommand("Select Employee_id, First_name from EmployeeDetails Order By Created_Date desc", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataTable dt = new DataTable();

da.Fill(dt);

chkListName.DataSource = dt;

chkListName.DataValueField = "Employee_id";

chkListName.DataTextField = "First_name";

chkListName.DataBind();

}

Demo:

Dot Net - Script

Wednesday, June 10, 2015

Dropdown with checkboxlist and Display selected Item in Div

2 comments: