Monday, May 30, 2011

DropDownCheckBoxes: Introduction

DropDownCheckBoxes is a server control for ASP.NET web forms which provides the functionality of a standard CheckBoxList control in a form of a drop down list (the standard DropDownList control doesn't have any multi-select option). The key benefit of such approach is that it keeps space on a web page by dynamically displaying check boxes. The image bellow shows a sample use of the control:


About control


Browser compatibility: FireFox, Safari, Chrome, Opera (latest versions, May 2011), Internet Explorer 8.0

Server side: ASP.NET Web Forms 3.5, 4.0, can work with both synchronous postbacks and asynchronous when the control is placed within UpdatePanel control

The control is directly inherited from CheckBoxList control and thus can be used in place of it (easy migration is possible):
public class DropDownCheckBoxes : CheckBoxList, IPostBackEventHandler
{
...

The assembly containing control class also has embedded web resources used by the control which are automatically streamed to the browser:
  • Client side JavaScript
  • CSS file
  • Button images
  • jQuery script

Note: The jQuery JavaScript library is required for control proper functioning. The library is delivered within the assembly and is automatically referenced whenever the control is added to a page. To avoid duplicate references this behavior can be turned off by setting 'IncludeJqueryScript' property.

Getting started


The process of adding the control to project is absolutely the same as for other server controls.

1. In order to start using the control in you ASP.NET application get the control assembly from project's download page.

2. After you have DropDownCheckBoxes.dll downloaded you should add references to the assembly. Right click the web application project node in the solution explorer, choose 'Add reference' and in the dialog appeared find path to the downloaded .DLL file.


3. Register the control by adding web.config setting (if there's already <system.web><pages><controls> section - update it and don't create a duplicate):
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="Saplin.Controls" assembly="DropDownCheckBoxes"/>
</controls>
</pages>
</system.web>

4. Put the control to .aspx page
<asp:DropDownCheckBoxes ID="yearsDropDownCheckBoxes" runat="server">
</asp:DropDownCheckBoxes>

The project page at Codeplex can be found here.

32 comments:

  1. how i can change the width and font of dropdownchekboxes?

    ReplyDelete
  2. I need drop down check box ddl for asp.net 2.0 framework.
    Can any one help me for this?

    ReplyDelete
  3. Hey All, I want to check all in the dropdown..do we have any shortcut to do it...I have thousands items in the dropdown...looping is making my page slow...how to automatically make it selected?

    foreach (ListItem item in DD.Items)
    {
    item.Selected = true;
    }

    ReplyDelete
    Replies
    1. No list should ever have thousands of items in it. If that is the case some process needs to precede the ability to select an item that limits the list. Universe - Galaxy - Solar system - planet. Get it?

      Delete
  4. foreach (ListItem item in DD.Items)
    {
    if(item.Selected)
    {
    //my code here
    }
    }

    here in if conditoin item.selected is giving 'false' for selected items also
    please help me

    ReplyDelete
  5. How to validate these Dropdowncheckboxes ???

    ReplyDelete
  6. Drop Down list SelectedIndexChanged Event is firing twice plz help me

    ReplyDelete
  7. does this control work in user control and internet explore 7.0

    ReplyDelete
  8. Hi,

    Is there a way to disable the control so that the user is not able to click it? Currently it only disable drop down items, not the control itself.

    ReplyDelete
  9. Dropdowncheckboxes not maintaining its checked state after binding filter data to gridview please advice me

    This i am binding to dropdowncheckboxes after filtering
    --------------
    DataTable dtProName = dtgridview.DefaultView.ToTable(true, "Exec_BlockName");

    ProjectType.DataSource = dtProName;
    ViewState["prType"] = dtProName;
    ProjectType.DataTextField = "Exec_BlockName";
    ProjectType.DataBind();

    foreach (ListItem item in (ProjectType as ListControl).Items)
    {

    item.Selected = true;
    }
    ----------------------------------------
    Please advice any one knows how to maintain checked state of items after filtering
    Note: Dropdowncheckboxes controls are inside of gridview and update panel
    Thanks in Advance.

    ReplyDelete
  10. when i put may grid in update panel then drop down checkbox list list not show in grid. it show error like this 'ReferenceError: DropDownScript is not defined'

    ReplyDelete
    Replies
    1. Like the control do you know how I can pass entire selections into a parameter for a report that accept multiple values from vs2010 C#.net?

      Delete
  11. Like the control but how do I pass entire selections to a report parameter that accept multi-values using vs2010 C#.net?

    ReplyDelete
    Replies
    1. I used the following code to solve my problem. Thanks for creating the dropdowncheckbox control, it is very handy.

      public string[] fieldName
      {
      get
      {
      System.Collections.ArrayList arrayList = new System.Collections.ArrayList();
      foreach (System.Web.UI.WebControls.ListItem item in DropDownCheckBoxes.Items)
      {
      if (item.Selected)
      {
      arrayList.Add(item.Value);
      }
      }

      return (String[])arrayList.ToArray(typeof(string));
      }
      }

      Delete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Is there a way to disable the control so that the user is not able to click it? Currently it only disable drop down items, not the control itself.

    ReplyDelete
  14. How will I change the the width? please let me know. Thanks

    ReplyDelete
    Replies
    1. You can set the select box width under the DropDownCheckBoxes tag like as bellow
      Style SelectBoxWidth="20%"

      Delete
  15. How can we access the control in javascript like another dropdownlist document.getElementById('ddl').options.length..?

    ReplyDelete
  16. How can we check the all checkboxes of the control, when page load time i.e.defaultly

    ReplyDelete
  17. I also need drop down check box ddl for asp.net 2.0 framework.
    Can any one help me for this?

    ReplyDelete
  18. the SelectedIndexChanged event fires two times?

    ReplyDelete
  19. Hello,

    first i wanna thank for this awesome control.

    My question is how do we change the height and fornt of the selectbox. i know changing the width of select box or hewight of dropdown box but same pattern did not work fro the height or font of the select box.
    thanks already.

    ReplyDelete
  20. Hi,
    I have set UseButton=true as i want the user to click the Ok button after he is done selecting items.
    Could anyone let me know how to set the fontsize of the button caption when UseButton=true?
    Also i see the SelectedIndexChanged event is getting fired twice. Is there anyway to stop this?
    Any help is a welcome.
    Thanks in advance.

    ReplyDelete
  21. Hi,
    Brilliant work and thanks for the effort. Do you perhaps have a Radio Button list control?

    Thanks

    ReplyDelete
    Replies
    1. I can see no need for a radio button list control. If multiple radio buttons can be selected then it is the same as check boxes. If only one selection is allowed (grouped) then what is the point?

      Delete
  22. click event is not working for me.

    ReplyDelete
  23. click event is not working for me. please help

    ReplyDelete
  24. How do I widen the DDL? the list is too narrow and my checkboxes are displaying above instead of adjacent to the labels.

    ReplyDelete