Dropdownlist with checkboxes in asp.net

In this asp .net tutorial we will learn about how to create dropdownlist with checkboxes in asp .net with demo and sample code download. Biggest advantage of this plugin is that you can use asp .net Listbox control to create multiselect. This makes this plugin very easy to use and also very easy to bind with database.
 
 
To build this example we will use jquery.sumoselect plugin created by Hemant Negi. This is open source plugin and available on Github. 
This plugin have multiple pre build options like:
  1.  Multiple select
  2. Preselected and disabled
  3. Option to show ok and cancel button
  4. Option to  use placeholder
  5. Option to select all items.

Let's see how to create dropdownlist with checkboxes in asp .net

 

Step1: Create an asp .net website. 

Step2: Download jquery.sumoselect plugin from here

Step3: Copy jquery.sumoselect.min.js and sumoselect.css into your website folder.

 

Dropdownlist- ith checkboxes in asp .net

 

Step4: Add reference of Jquery, jquery.sumoselect.min.js and sumoselect.css into your website page.

 

 
    
    

 

Step5: Add Listbox control with some values. I have used static values for this example but you can bind it with database.Also make sure you have set: SelectionMode="Multiple"

 

      
            
            
            
            
            
        

 

Step6: Initiate  jquery.sumoselect on document.ready function.

 


 

Dropdownlist with checkboxes in asp .net Output:

Dropdownlist with checkboxes in asp .net


To Get dropdownlist with checkboxes selected values on button click:

 


 

 

 protected void btnGetSelectedValues_Click(object sender, EventArgs e)
    {
        string selectedValues = string.Empty;
        foreach (ListItem li in lstBoxTest.Items)
        {
            if (li.Selected == true)
            {
                selectedValues += li.Text + ",";
            }
        }
        Response.Write(selectedValues.ToString());
    }

 

 

Select all option in Dropdownlist with checkboxes in asp .net.

To enable select all option in dropdownlist with checkboxes you need to change your code like:

 


 


Output:

Dropdownlist with checkboxes in asp .net with select all option

Enable Cancel Ok button in Dropdownlist with checkboxes in asp .net

 

To enable cancel and ok button in dropdownlist with checkboxes you need to change your code like:

 


 

 

Output:

Dropdownlist with checkboxes in asp net with ok and cancel button

 

We are nothing without our users ! You can help us offer even more high quality content. Please share our page !
Best quality Asp .Net Ajax Control Toolkit tutorials.

Give your valuable comments.

Name
Email
Comment
8 + 2 =
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2019 CodingFusion
75 Important SQL Server queries you should know