Navi's

Necessity, the mother of invention

  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Dropdownlist with checkbox

Posted by Navi's on July 15, 2010


Some times we need a DropDownList with checkbox. Either we use some ready made controls like Infragistics WebDropDown or create your own with TextBox, CheckBoxList and AjaxControlToolkit.

So, If we want to create our own DropDownList with checkbox we need first AjaxControlToolkit. You can download it from here.

We will use PopupControlExtender control. So lets start.

First add the one TextBox control and set some properties of its.

<asp:TextBox ID="txtDropDown" runat="server" Text="Select" ReadOnly="true" Style="background: url(DropDownarrow.png) no-repeat right; border: solid 1px #7F9DB9; padding-right: 30px;"></asp:TextBox>

Now Put Panel control with some default settings. Add CheckBoxList control within the Panel and PopupControlExtender control after the panel .

<asp:Panel ID="pnlDDL" runat="server" BackColor="White" Style="border: solid 1px #7F9DB9; overflow: auto; overflow-x: hidden; display: none; height: 250px; width: 250px;">

<asp:CheckBoxList id="chkList" runat="server"/>
</asp:Panel>

<ajaxtoolkit:PopupControlExtender runat="server" ID="popExtDDL" TargetControlID="txtDropDown" PopupControlID="pnlDDL" Position="Bottom" />

That’s it. Now you can Bind the CheckBoxList control with DataSource and it will show you the dropdown with CheckBox.
If you want to add the select all checkbox you can add the checkbox above the CheckBoxList. You can use simple HTML control checkbox control.

<input type="checkbox" id="chkAll" style="margin-left: 3px; display: none; font-size: 8pt" /><span style="font-size: 8pt;">Select All</span>

And use the jQuery for select all. To use jQuery you need to include the jQuery library in your page. You can download it from here.

 $(document).ready(function() {
            $('#chkAll').click(function() {
                $("#<%= chkList.ClientID %> input:checkbox").attr('checked', this.checked);
            });
});

This is the benefit of jQuery.

Now we need to selected items of CheckBoxList. For this we can use LINQ in place of looping.

IEnumerable<int> allChecked = (from item in chkList.Items.Cast<ListItem>()
                               where item.Selected
                               select int.Parse(item.Value));

This will return you the collection of selected items.

References:
http://bit.ly/99luaN

One Response to “Dropdownlist with checkbox”

  1. Well written blog. Keep us posting.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: