Post
Ask Question

Apply Checkbox And RadioButton Inside DropDownList

Checkbox and RadioButton inside Dropdownlist

For this requirement in my project, I have searched a lot of sites and finally by the help of some site and with some new ideas I have implemented this requirement. So I decided to share this article.

For implementing a DropDownList with CheckBoxes and DropDownList with RadioButton in ASP.NET we will use the following things-
  1. ListBox control
  2. JQuery Bootstrap Multi-Select Plugin to it.
  3. Bootstrap JavaScript and CSS files. 
Here I am explaining the step by step process on how I have implemented this in my project.

1. Create a new project.

2. Add a webform and a Listbox in the webform. 
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div style="margin-left:200px; border:solid; border-color:aqua; width:300px;">  
  4.             <table>  
  5.                 <tr>  
  6.                     <td>  
  7.                         <b>Name</b>  
  8.                     </td>  
  9.                 </tr>  
  10.                 <tr>  
  11.                     <td>  
  12.                         <asp:TextBox ID="txt_name" runat="server"></asp:TextBox>  
  13.                     </td>  
  14.                 </tr>  
  15.                 <tr>  
  16.                     <td>  
  17.                         <b>Select Country:-</b>  
  18.                     </td>  
  19.                 </tr>  
  20.                 <tr>  
  21.                     <td>  
  22.                         <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Width="200px"></asp:ListBox>  
  23.                     </td>  
  24.                 </tr>  
  25.                 <tr>  
  26.                     <td>  
  27.                         <asp:Button runat="server" ID="btn_save" Text="Add" />  
  28.                     </td>  
  29.                 </tr>  
  30.             </table>  
  31.         </div>  
  32.     </form>  
  33. </body>  
3. I have the following database table structure.

table

4. Add the following code for dynamically populating the country names from the database.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Data;  
  8. using System.Data.SqlClient;  
  9. public partial class country: System.Web.UI.Page {  
  10.     SqlConnection con = new SqlConnection("Data Source=TUNA-PC;Initial Catalog=Employee;User ID=sa;Password=123");  
  11.     SqlDataAdapter da;  
  12.     DataTable dt;  
  13.     protected void Page_Load(object sender, EventArgs e) {  
  14.         if (!IsPostBack) {  
  15.             fillListview();  
  16.         }  
  17.     }  
  18.     public void fillListview() {  
  19.         da = new SqlDataAdapter("select country from tbl_country", con);  
  20.         dt = new DataTable();  
  21.         da.Fill(dt);  
  22.         ListBox1.DataSource = dt;  
  23.         ListBox1.DataTextField = dt.Columns["country"].ToString();  
  24.         ListBox1.DataBind();  
  25.     }  
  26. }  
 

5. To change it to checkbox inside the dropdownlist add the following css and scripts.
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
  2. <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
  3. <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  4. <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />  
  5. <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>  
  6.   
  7.   
  8. <script type="text/javascript">  
  9.     $(function() {  
  10.         $("#ListBox1").multiselect({  
  11.             includeSelectAllOption: true  
  12.         });  
  13.     });  
  14. </script>  
Here it is how it looks like.

 

Now when we run the project we got the output like the following screenshot:



After selecting any of the checkbox.

 
Here we have the checkbox  inside listbox because of the following code.

 

If we want to implement RadioButton inside the listbox, then change the following code with SelectionMode single.

 
 
Now after running the code it will give the following output.

 

It only allow us to select only one element.

 

Thus in this way we can dynamically implement CheckBox and RadioButton inside DropDownList. 


Similar Articles