Click here to Skip to main content
11,935,066 members (52,352 online)
Click here to Skip to main content
Add your own
alternative version


18 bookmarked

MultiSelect Dropdown in ASP.NET

, 28 Jan 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
Easy way to do multi select values in ASP.NET.


In this article, I will show you a different way of doing 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.

Using the code

We are going to put our CheckBoxList ASP.NET control inside an HTML div object. I have also added code to support changing the background color of the selected row.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

<html xmlns="">
<style type="text/css">
    height: 120px;
    width: 200px;
    padding: 5px;
    overflow: auto;
    border: 1px solid #ccc;

    FONT-SIZE: 11px;
    FONT-FAMILY: tahoma,sans-serif

<script language="javascript">

var color = 'White'; 

function changeColor(obj) 
    var rowObject = getParentRow(obj); 
    var parentTable = 

    if(color == '') 
        color = getRowColor(); 

    { = '#A3B1D8'; 
    { = color; 
        color = 'White'; 

    // private method
    function getRowColor() 
        if( == 'White')
        else return; 

// This method returns the parent row of the object
function getParentRow(obj) 
        obj = obj.parentElement; 
    while(obj.tagName != "TR") 
    return obj; 

function TurnCheckBoixGridView(id)
    var frm = document.forms[0];

    for (i=0;i<frm.elements.length;i++)
        if (frm.elements[i].type == "checkbox" && 
            frm.elements[i].id.indexOf("<%= chkList.ClientID %>") == 0)
            frm.elements[i].checked = 

function SelectAll(id)
    var parentTable = document.getElementById("<%=chkList.ClientID%>"); 
    var color

    if (document.getElementById(id).checked)
        color = '#A3B1D8'
        color = 'White'

    for (i=0;i<parentTable.rows.length;i++)
        parentTable.rows[i].style.backgroundColor = color;


<head runat="server">
<form id="form1" runat="server">
<div class="scroll_checkboxes">
<asp:CheckBoxList Width="180px" ID="chkList" 
  runat="server" CssClass="FormText" 
  RepeatDirection="Vertical" RepeatColumns="1" 
  BorderWidth="0" Datafield="description" 
<asp:ListItem id="text1" Value="Select me 1" 
<asp:ListItem id="text2" Value="Select me 2" 
<asp:ListItem id="text3" Value="Select me 3" 
<asp:ListItem id="text4" Value="Select me 4" 
<asp:ListItem id="text5" Value="Select me 5" 
<asp:ListItem id="text6" Value="Select me 6" 
<asp:ListItem id="text7" Value="Select me 7" 
<asp:ListItem id="text8" Value="Select me 8" 
<asp:ListItem id="text9" Value="Select me 9" 
<asp:ListItem id="text10" Value="Select me 10" 
<asp:ListItem id="text11" Value="Select me 11" 
<asp:ListItem id="text12" Value="Select me 12" 
<asp:ListItem id="text13" Value="Select me 13" 

If you would need to load this list from a database, then you can easily bind the CheckBoxList to a DataSource object.

To add the JavaScript call to change the color, just use text1.Attributes.Add("onclick", "changeColor(this)"); in the code-behind for each ListItem control (you would need to use a loop).

Highlight the row in a GridView using the same Javascript code

You can use the same JavaScript for highlighting a row in a GridView; for example, let's say, you have a GridView with an ItemTemplate that has a CheckBox.

Adding onclick="changeColor(this)" to the checkbox will do the trick.

<ItemTemplate >
  <asp:CheckBox ID="chkSelect" runat="server" 
     Width = "24px" Visible = "true" 
     onclick="changeColor(this)" EnableViewState="True" />
  <asp:Label ID="HiddenShipmentID" runat="server" 
     visible = "false" 
     Text = '<%# Eval("shipment_id") %>'></asp:Label>

All you have to do is change the JavaScript to use the name of the GridView:

var parentTable = document.getElementById("<%=chkList.ClientID%>");

Change that to:

var parentTable = document.getElementById("<%=GridViewName.ClientID%>");

And that's all.

I hope you enjoyed this little trick. If you liked this idea, feel free to vote.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer TrafficTech
Canada Canada
Have technical skills that can be demonstrated and an ability to resolve complex problems quickly while working in a demanding, high pressure environment

Designs, plans, and coordinates software development work teams

Provides technical mentorship to project team members

Handles complex application features and technical designs for the development of new applications.

Write articles about

Designs and implements the components, frameworks and layers required for complex application features

Understands and participate in all aspects of the Software Development Life Cycle

Relies on experience and judgment to plan and accomplish goals.

Ability to perform various programming activities (coding, testing, debugging, documenting, maintaining and supporting).

Ability to work independently with minimal supervision.

10 years’ experience in web software design and development.
SQL 2005
AJAX 1.0
C# 3.5
Microsoft Application Blocks
Java Script
Reporting Services
Classic ASP

You may also be interested in...

Comments and Discussions

Questionadd textbox in this control Pin
Member 1075349317-Apr-14 20:55
memberMember 1075349317-Apr-14 20:55 
QuestionCan u make this control usable in gridview Pin
cooldiv4u11-Jun-13 1:00
membercooldiv4u11-Jun-13 1:00 
QuestionYou really think its a DropDrown!?????? Pin
AliTopoli4-May-12 22:43
memberAliTopoli4-May-12 22:43 
AnswerRe: You really think its a DropDrown!?????? Pin
rperetz5-May-12 4:25
memberrperetz5-May-12 4:25 
QuestionCan you add searchable feature for this control Pin
raj chitty25-Apr-12 4:28
memberraj chitty25-Apr-12 4:28 
QuestionNot a Drop down Pin
Dov Miller15-Mar-12 1:29
memberDov Miller15-Mar-12 1:29 
GeneralMulti-Select Drop Down List in ASP.NET Pin
Richard Xiong11-Aug-10 15:17
memberRichard Xiong11-Aug-10 15:17 
GeneralDesign View error in VS 2005 Pin
TonyOldskhl25-Mar-10 7:09
memberTonyOldskhl25-Mar-10 7:09 
GeneralNice Pin
samerh28-Jan-10 23:55
membersamerh28-Jan-10 23:55 
very nice, however can we see how can we load and save to database or xml file
GeneralRe: Nice Pin
rperetz1-Feb-10 16:25
memberrperetz1-Feb-10 16:25 
GeneralMy vote of 1 Pin
Dave Kreskowiak28-Jan-10 12:44
mvpDave Kreskowiak28-Jan-10 12:44 
GeneralRe: My vote of 1 Pin
rperetz1-Feb-10 16:14
memberrperetz1-Feb-10 16:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151126.1 | Last Updated 28 Jan 2010
Article Copyright 2010 by rperetz
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid