While working on a project there was a requirement for creating a Multiselect DropDownList that will have the following features:

The following snapshot gives you an idea about the same.

multiselect dropdownlist

By default ASP.NET do not have such type of control. But anyways ASP.NET has provided us with a way that you can create your own custom web user control by combining multiple other controls such as web server, html controls, etc. Well for implementing this control I’d made use of bootstrap multiselect control because looking at the requirement bootstrap multiselect fits the best.

Bootstrap multiselect control comes with a lot of configuration option through which user can customize its default behavior and look & feel. For configuring these options inside our user control we’ve made use of properties which returns or sets values stored inside the hidden fields.

Let’s get into the code now.

I’m using VS2013 for creating ASP.NET web application. I’m naming my project as DummyWebApp. Inside my solution I’m creating a new folder with the name User Control and within this folder I’m adding a new component named “Web User Control”. I’ve named my web user control as “AutoCompleteDdl”.

The following is the AutoCompleteDdl.aspx code.

  1. <%@ Control Language="C#" AutoEventWireup="true" CodeFile="AutoCompleteDdl.ascx.cs" Inherits="UserControl_AutoCompleteDdl" %>
  2. <div style="width: 380px;" id="divAutoComplete" runat="server">
  3. <asp:HiddenField ID="hdnButtonWidth" runat="server" Value="320px" />
  4. <asp:HiddenField ID="hdnNonSelectedText" runat="server" Value="--Select--" />
  5. <asp:HiddenField ID="hdnIncludeSelectAllOption" runat="server" Value="false" />
  6. <asp:HiddenField ID="hdnSelectAllText" runat="server" Value="All" />
  7. <asp:HiddenField ID="hdnEnableFiltering" runat="server" Value="False" />
  8. <asp:HiddenField ID="hdnEnableFilteringIgnoreCase" runat="server" Value="False" />
  9. <asp:HiddenField ID="hdnDisableIfEmpty" runat="server" Value="False" />
  10. <asp:HiddenField ID="hdnMaxHeight" runat="server" Value="200" />
  11. <asp:HiddenField ID="hdnFilterPlaceholder" runat="server" Value="Search for something..." />
  12. <asp:HiddenField ID="hdnAllSelectedText" runat="server" Value="No option left..." />
  13. <asp:HiddenField ID="hdnText" runat="server" />
  14. <asp:HiddenField ID="hdnValue" runat="server" />
  15. <asp:ListBox ID="ddlAutoCompleteSelect" runat="server" Style="width: 350px;"
  16. SelectionMode="Multiple">
  17. </asp:ListBox>
  18. <p>
  19. <asp:Label ID="lblSelectedItems" runat="server" Style="word-wrap: break-word; height: 120px;
  20. float: left; overflow-y: auto;"></asp:Label>
  21. </p>
  22. </div>
As you can see that I’m making use of some hidden fields for maintaining data between server and client and there is a ListBox for allowing user with multiselect option or single select option. Hidden fields will basically maintain values used for configuring our bootstrap multiselect control. I’ve provided user with properties against each hidden field with which user (who will be using the control on their page) just need to set to get the multiselect user control in action. These hidden fields are basically going to set / configure our bootstrap multiselect control.

The following is the code for AutoCompleteDdl.aspx.cs file.
  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;
  8. public partial class UserControl_AutoCompleteDdl : System.Web.UI.UserControl
  9. {
  10. #region Variable Declaration
  12. private string _text;
  13. private string _value;
  14. private List<SelectModel> _dataSource;
  15. private ListSelectionMode _selectionMode;
  16. private const string _dataTextField = "Text";
  17. private const string _dataValueField = "Value";
  19. #endregion
  21. #region Properties
  23. /// <summary>
  24. /// Set the placeholder for the DropDownlist.
  25. /// </summary>
  26. public string NonSelectedText
  27. {
  28. get { return hdnNonSelectedText.Value; }
  29. set { hdnNonSelectedText.Value = value; }
  30. }
  32. /// <summary>
  33. /// Get Or Set the value whether select all option should be there or not.
  34. /// </summary>
  35. public bool IncludeSelectAllOption
  36. {
  37. get { return Convert.ToBoolean(hdnIncludeSelectAllOption.Value); }
  38. set { hdnIncludeSelectAllOption.Value = Convert.ToString(value); }
  39. }
  41. public bool EnableFiltering
  42. {
  43. get { return Convert.ToBoolean(hdnEnableFiltering.Value); }
  44. set { hdnEnableFiltering.Value = Convert.ToString(value); }
  45. }
  47. /// <summary>
  48. /// Configure the Type of DropDownlist it is. For e.g. whether single select or multi select.
  49. /// </summary>
  50. public ListSelectionMode SelectionMode
  51. {
  52. get { return _selectionMode; }
  53. set
  54. {
  55. _selectionMode = value;
  56. if (value == ListSelectionMode.Single)
  57. {
  58. ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Single;
  59. }
  60. else
  61. {
  62. ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Multiple;
  63. }
  64. }
  65. }
  67. /// <summary>
  68. /// Set the Width of the Combo
  69. /// </summary>
  70. public string ButtonWidth
  71. {
  72. get { return hdnButtonWidth.Value; }
  73. set
  74. {
  75. hdnButtonWidth.Value = value;
  76. lblSelectedItems.Style.Add("width", hdnButtonWidth.Value);
  77. }
  78. }
  80. /// <summary>
  81. /// To set text search enabled
  82. /// </summary>
  83. public bool Enabled
  84. {
  85. get { return ddlAutoCompleteSelect.Enabled; }
  86. set { ddlAutoCompleteSelect.Enabled = value; }
  87. }
  89. /// <summary>
  90. /// To set Data Source for Control
  91. /// </summary>
  92. public List<SelectModel> DataSource
  93. {
  94. set
  95. {
  96. _dataSource = value;
  97. ddlAutoCompleteSelect.DataSource = value;
  98. ddlAutoCompleteSelect.DataBind();
  99. }
  100. }
  102. /// <summary>
  103. /// To set Text field
  104. /// </summary>
  105. public string DataTextField
  106. {
  107. get { return ddlAutoCompleteSelect.DataTextField; }
  108. set { ddlAutoCompleteSelect.DataTextField = _dataTextField; }
  109. }
  111. /// <summary>
  112. /// To set Value field
  113. /// </summary>
  114. public string DataValueField
  115. {
  116. get { return ddlAutoCompleteSelect.DataValueField; }
  117. set { ddlAutoCompleteSelect.DataValueField = _dataValueField; }
  118. }
  120. /// <summary>
  121. /// Get the value of the Selected Items from the dropdownlist.
  122. /// </summary>
  123. public string Value
  124. {
  125. get
  126. {
  127. string strValue = string.Empty;
  128. return hdnValue.Value;
  129. }
  130. }
  132. /// <summary>
  133. /// Get the text of the Selected Items from the dropdownlist.
  134. /// </summary>
  135. public string Text
  136. {
  137. get
  138. {
  139. string strText = string.Empty;
  140. return hdnText.Value;
  141. }
  142. }
  144. public bool DisableIfEmpty
  145. {
  146. get { return Convert.ToBoolean(hdnDisableIfEmpty.Value); }
  147. set { hdnDisableIfEmpty.Value = Convert.ToString(value); }
  148. }
  150. public int MaxHeight
  151. {
  152. get { return Convert.ToInt32(hdnMaxHeight.Value); }
  153. set { hdnMaxHeight.Value = Convert.ToString(value); }
  154. }
  156. public string SelectAllText
  157. {
  158. get { return hdnSelectAllText.Value; }
  159. set { hdnSelectAllText.Value = value; }
  160. }
  162. public bool EnableFilteringIgnoreCase
  163. {
  164. get { return Convert.ToBoolean(hdnEnableFilteringIgnoreCase.Value); }
  165. set { hdnEnableFilteringIgnoreCase.Value = Convert.ToString(value); }
  166. }
  168. public string FilterPlaceholder
  169. {
  170. get { return hdnFilterPlaceholder.Value; }
  171. set { hdnFilterPlaceholder.Value = value; }
  172. }
  175. #endregion
  177. protected void Page_Load(object sender, EventArgs e)
  178. {
  180. try
  181. {
  182. if (!(string.IsNullOrEmpty(hdnText.Value) && string.IsNullOrEmpty(hdnValue.Value)))
  183. {
  184. var selectedItemsText = hdnText.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
  185. var selectedItemsValue = hdnValue.Value.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
  187. foreach (ListItem item in ddlAutoCompleteSelect.Items)
  188. {
  189. if ((selectedItemsText.Contains(item.Text) && selectedItemsValue.Contains(item.Value)))
  190. {
  191. //selecting the item at server side.
  192. item.Selected = true;
  193. }
  194. }
  195. }
  196. }
  197. catch (Exception ex)
  198. {
  199. throw ex;
  200. }
  202. }
  205. protected void Page_PreRender(object sender, System.EventArgs e)
  206. {
  207. try
  208. {
  209. //Registering the scripts file used by the user control. Alternatively you can also set these files inside your master page or the web page on which you are going to use it.
  210. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapJs", ResolveUrl("~/Scripts/bootstrap.min.js"));
  211. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapMultiSelectJs", ResolveUrl("~/Scripts/bootstrap-multiselect.js"));
  212. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "autoCompleteDdlJs", ResolveUrl("~/Scripts/app/AutoCompleteDdl.js"));
  213. }
  214. catch (Exception ex)
  215. {
  216. throw ex;
  217. }
  218. }
  219. }
For configuring multiselect with custom features, here is the script file for the usercontrol.

AutoCompleteDdl.js
  1. //Controls
  2. var labelId = '';
  3. var hdnTextId = '';
  4. var hdnValueId = '';
  6. var ddlCntrl = '';
  8. //Property Values Controls
  9. var hdnButtonWidth = '';
  10. var hdnNonSelectedText = '';
  11. var hdnIncludeSelectAllOption = '';
  12. var hdnSelectAllText = '';
  13. var hdnEnableFiltering = '';
  14. var hdnEnableFilteringIgnoreCase = '';
  15. var hdnDisableIfEmpty = '';
  16. var hdnMaxHeight = '';
  17. var hdnFilterPlaceholder = '';
  18. var hdnAllSelectedText = '';
  20. //Helper variables
  21. var selectedItemsText = '';
  22. var selectedItemsValue = '';
  24. //This function is used for converting C# boolean values to
  25. //Javascript boolean Values.
  26. function convertToBoolean(value) {
  27. return (value === "true");
  28. }
  30. //Writing function inside the pageLoad function is for rebinding the events after partial postback.
  31. function pageLoad() {
  32. $(document).ready(function () {
  33. //Iterating over the no of select element whose Id contains value of "ddlAutoCompleteSelect". This iteration is necessary because on a single page the user control might can be used on
  34. //single times or multiple times. For e.g. if the user contorl is placed inside a gridview row, or if the user control is used on some kind of registration forms.
  36. $("select[id*='ddlAutoCompleteSelect']").each(function () {
  37. ddlCntrl = $(this);
  38. divUCParent = $(ddlCntrl).parent();
  40. //retrieving the Id's of the controls/elements
  41. labelId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "lblSelectedItems");
  42. hdnTextId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnText");
  43. hdnValueId = ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnValue");
  45. //retrieving the values of the hidden fields/ property values
  46. hdnButtonWidth = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnButtonWidth")).val();
  47. hdnNonSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnNonSelectedText")).val();
  48. hdnIncludeSelectAllOption = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnIncludeSelectAllOption")).val().toString().toLowerCase());
  49. hdnSelectAllText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnSelectAllText")).val();
  50. hdnEnableFiltering = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFiltering")).val().toString().toLowerCase());
  51. hdnEnableFilteringIgnoreCase = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFilteringIgnoreCase")).val().toString().toLowerCase());
  52. hdnDisableIfEmpty = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnDisableIfEmpty")).val().toString().toLowerCase());
  53. hdnMaxHeight = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnMaxHeight")).val();
  54. hdnFilterPlaceholder = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnFilterPlaceholder")).val();
  55. hdnAllSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnAllSelectedText")).val();
  58. selectedItemsText = $("#" + hdnTextId).val();
  59. selectedItemsValue = $("#" + hdnValueId).val();
  61. //configuring the bootstrap multiselect with the custom specification which user has set through the properties.
  62. $(this).multiselect({
  63. buttonWidth: hdnButtonWidth,
  64. includeSelectAllOption: hdnIncludeSelectAllOption,
  65. enableFiltering: hdnEnableFiltering,
  66. enableCaseInsensitiveFiltering: hdnEnableFilteringIgnoreCase,
  67. selectAllText: hdnSelectAllText,
  68. nonSelectedText: hdnNonSelectedText,
  69. disableIfEmpty: hdnDisableIfEmpty,
  70. maxHeight: hdnMaxHeight,
  71. filterPlaceholder: hdnFilterPlaceholder,
  72. allSelectedText: hdnAllSelectedText,
  73. buttonText: function (options, select) {
  74. if (options.length === 0) {
  75. return this.nonSelectedText;
  76. }
  77. else if (this.allSelectedText && options.length == $('option', $(select)).length) {
  78. if (this.selectAllNumber) {
  79. return this.allSelectedText + ' (' + options.length + ')';
  80. }
  81. else {
  82. return this.allSelectedText;
  83. }
  84. }
  85. else {
  86. var selected = '';
  87. options.each(function () {
  88. var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
  89. //forming a list.
  90. selected += "<li>" + label + "</li>";
  91. });
  92. return selected;
  93. }
  94. },
  95. onChange: function (option, checked, select) {
  97. var options = this.getSelected();
  99. // resetting the updateButtonText event values
  100. if (this.options.enableHTML) {
  101. $('.multiselect .multiselect-selected-text', this.$container).html(hdnNonSelectedText);
  102. }
  103. else {
  104. $('.multiselect .multiselect-selected-text', this.$container).text(hdnNonSelectedText);
  105. }
  106. $('.multiselect', this.$container).attr('title', hdnNonSelectedText);
  108. //setting the Label data by forming a unordered list.
  109. $("#" + labelId).html("<ul>" + this.options.buttonText(options, this.$select) + "</ul>");
  111. //resetting the variable values to ''
  112. selectedItemsText = '';
  113. selectedItemsValue = '';
  115. //iterating over the selected options and appending it to the variables
  116. $.each(options, function (index, option) {
  117. selectedItemsText += option.text + ",";
  118. selectedItemsValue += option.value + ",";
  119. });
  121. selectedItemsText = selectedItemsText.substring(0, selectedItemsText.lastIndexOf(","));
  122. selectedItemsValue = selectedItemsValue.substring(0, selectedItemsValue.lastIndexOf(","));
  124. //finally storing the value to the respective hidden fields.
  125. $("#" + hdnTextId).val(selectedItemsText);
  126. $("#" + hdnValueId).val(selectedItemsValue);
  127. }
  128. });
  129. });
  131. //incase of post back get the data from the hiddenField hdnText and hdnValues for restoring it back to the userControl selected values.
  132. if (selectedItemsText != '' && selectedItemsValue != '') {
  134. var selectedTextsArr = selectedItemsText.split(",");
  135. var selectedValuesArr = selectedItemsValue.split(",");
  137. $("#" + divUCParent.attr("id")).children(".btn-group").find("ul.multiselect-container li").each(function () {
  138. var currentLI = $(this);
  139. var anchorElement = $(this).find("a");
  140. if (anchorElement != undefined && anchorElement.length != 0) {
  141. var checkBox = $(anchorElement).children("label[class='checkbox']").children("input[type='checkbox']");
  142. var checkBoxValue = $(checkBox).val();
  144. if ($.inArray(checkBoxValue, selectedValuesArr) > -1) {
  145. $(currentLI).addClass("active");
  146. $(checkBox).trigger("change");
  147. }
  148. }
  149. });
  150. }
  152. });
  153. }
Note:

  1. Here in my user control script I’m overriding the method buttonText of bootstrap multiselect to behave in the way my user control requires i.e. form a list of selected Items and display it as an unordered list.

  2. And in the onChange event I’m resetting the default behavior of bootstrap multiselect dropdown. Bootstrap multiselect dropdown has the default behavior of setting the selected items text on the button title. In this event I’m resetting this behavior and displaying the selected items inside Label control below my user control in an unordered list.

  3. If you look at user control .aspx file, for the hidden field I’ve provided some default values. If in case the user while implementing the user control on his page doesn’t pass value for any of the property then the default value for that property from the hidden field would be used or else the new value set by the user would be used to configure the bootstrap multiselect control.

  4. Well here I just took those properties which I’m using to configure my bootstrap control. But apart from these properties there are lot of other properties which you may require to configure your application.

  5. You implementing other properties you need to do the same which we did. By creating a property in the .apsx.cs file and by adding a new hidden field in the .aspx file.

  6. Writing code in your user control script file for reading the value of that hidden field.

Now our user control is ready and we need to take it on our page to make it working. For this I’ve added a new webpage in my application and I’ve registered the user control on my page. The following is my .aspx code for the web page.

Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <%@ Register Src="UserControl/AutoCompleteDdl.ascx" TagName="AutoCompleteDdl" TagPrefix="uc1" %>
  5. <!DOCTYPE html>
  7. <html xmlns="http://www.w3.org/1999/xhtml">
  8. <head runat="server">
  9. <title>Bootstrap Multiselect</title>
  10. <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  11. <link rel="stylesheet" type="text/css" href="Style/bootstrap-multiselect.css" />
  12. <script src="Scripts/jquery-1.9.1.min.js"></script>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
  17. <div class="container">
  18. <div class="row">
  19. <div class="col-md-12">
  20. <h3>Bootstrap MultiSelect Dropdownlist</h3>
  21. <asp:UpdatePanel ID="udpMain" runat="server">
  22. <ContentTemplate>
  24. <uc1:AutoCompleteDdl ID="ddlAutoComplete" runat="server" IncludeSelectAllOption="false"
  25. ButtonWidth="320px" SelectAllText="All" NonSelectedText="--Select Option--" MaxHeight="400"
  26. EnableFiltering="true" FilterPlaceholder="Search For Something..." SelectForm="Multiple"
  27. PlaceHolder="Select a Value" />
  28. <p>
  29. <asp:Button ID="btnGet" runat="server" Text="Get Data" OnClick="btnGet_Click" />
  30. </p>
  31. <p>
  32. <asp:Label ID="lblData" runat="server" />
  33. </p>
  34. </ContentTemplate>
  35. </asp:UpdatePanel>
  36. </div>
  37. </div>
  38. </div>
  39. </form>
  40. </body>
  41. </html>
Note:

  1. Here I’ve added the user control on my page.

  2. I’m setting the required ButtonWidth, whether the dropdownlist should enable filtration or not and other such bootstrap properties with the help of properties defined inside the user control.

Default.aspx.cs

  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;
  8. public partial class _Default : System.Web.UI.Page
  9. {
  10. List<SelectModel> lstData = new List<SelectModel>();
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. if (!IsPostBack)
  15. {
  16. for (int i = 0; i < 100; i++)
  17. {
  18. lstData.Add(new SelectModel() { Value = "Item " + i, Text = "Item " + i });
  19. }
  20. ddlAutoComplete.DataValueField = "Value";
  21. ddlAutoComplete.DataTextField = "Text";
  22. //Setting the data source for the dropdownlist
  23. ddlAutoComplete.DataSource = lstData;
  24. }
  25. }
  26. protected void btnGet_Click(object sender, EventArgs e)
  27. {
  28. string value = ddlAutoComplete.Value;
  29. string text = ddlAutoComplete.Text;
  31. lblData.Text = "<b>Value: </b>" + value + "<br/><b>Text: </b>" + text;
  33. }
  34. }
Now just run the application and you’ll see the following output.

output

Select some items from the dropdownlist and you’ll find those selected items below our dropdownlist in an unordered list.

dropdownlist

You may also try filtering the data by typing something in the “Search For Something” textbox.

Search For Something

While entering the value in the filter textbox make sure you do it in proper case since we’ve set the “EnableFilteringIgnoreCase” property value to its default value by not setting it inside the default.aspx page.

EnableFilteringIgnoreCase

Now the point is of maintaining the data between postback. For testing this we’ve added a button control “Get Data” on the page and a label control which will display the selected items text and value. Just click on the Get Data button and after postback here is the output.

Get Data button