Bootstrap Multiselect Dropdown in ASP.NET Web Forms

Today I was working on one of my project and I noticed the need of selecting multiple values in a DropDownList. Being a .NET guy my first thought was to us ListBox because is gives same feature, we can selected multiple values by holding ctrl (control) key. But the reason for not using it was that it is not user friendly and its view is not good.

After searching for few minutes I found this Bootstrap Multiselect plugin. I was using bootstrap in my project as well so that was best fit for me. For other also it is very good tool and very easy to use with any platform. I used it with ASP.NET web forms so showing the same here.

You can download the Bootstrap Multiselect plugin from here. Ofcourse JQuery library need to be included first. Along with that you also have to include Twitter Bootstrap javascript and CSS library. After adding JQuery and Twitter library you can add Multiselect plugin file.

This will be something like this

<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<link rel=”stylesheet” href=”css/bootstrap-multiselect.css” type=”text/css”/>
<script type=”text/javascript” src=”js/bootstrap-multiselect.js”></script>

Now you have to add a ListBox on your aspx page and keep in mind that SelectionMode should be set to Multiple. Otherwise it will not allow you to select multiple values.

<asp:ListBox ID="ListBox_MultiSelect" runat="server" SelectionMode="Multiple">
     <asp:ListItem Text="Option 1" Value="1"></asp:ListItem>
     <asp:ListItem Text="Option 2" Value="2"></asp:ListItem>
     <asp:ListItem Text="Option 3" Value="3"></asp:ListItem>
     <asp:ListItem Text="Option 4" Value="4"></asp:ListItem>
     <asp:ListItem Text="Option 5" Value="5"></asp:ListItem>

After adding library references and the ListBox control on your web form you have to call the plugin method to apply it on your control. Remember this call of plugin should come any place below you control on page.

<script type="text/javascript">
    $(document).ready(function () {
            includeSelectAllOption: true,
            allSelectedText: 'No option left ...',
            enableFiltering: true,
            filterPlaceholder: 'Search for something...'

Now you are ready use this plugin so just press F5 and see the magic. You will see somthing like this:

While loading the plugin you can provide various parameters based on your needs. For example in above sample you can see four parameters.

  1. includeSelectAllOption – Adds one option on top of the options list which will select all options upon click
  2. allSelectedText – This will allow to set the text of the Select All option entry
  3. enableFiltering – If this is set to true you will see a text field which will allow you to search through the list options. This is useful for dropdowns with large number of options.
  4. filterPlaceholder – This gives option to set filter text field place holder.

These are just 4 examples of parameters but there are many more option to customize this plugin and you can use them as per your needs.

Leave a Reply