This article is in continuation of my previous article on creating a multiselect dropdownlist using bootstrap in ASP.NET. If you haven’t had a look at it please go through the following link.

In the above article we simply developed a bootstrap Multiselect DropDownList user control with less features. The following are the merits and demerits of the built control:

Merits

Demerits

In this article we’ll try to enhance our user control so that all the drawbacks can be taken care of. So let’s update our control properties and script files accordingly.

AutoCompleteDdl.aspx code

  1. <%@ControlLanguage="C#"AutoEventWireup="true"CodeFile="AutoCompleteDdl.ascx.cs"Inherits="User_Control_AutoCompleteDdl"%>
  2. <divstyledivstyledivstyledivstyledivstyledivstyledivstyledivstyle="width: 380px;"id="divAutoComplete"runat="server">
  3. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnButtonWidth"runat="server"Value="320px"/>
  4. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnNonSelectedText"runat="server"Value="--Select--"/>
  5. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnIncludeSelectAllOption"runat="server"Value="false"/>
  6. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnSelectAllText"runat="server"Value="All"/>
  7. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnEnableFiltering"runat="server"Value="False"/>
  8. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnEnableFilteringIgnoreCase"runat="server"Value="False"/>
  9. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnDisableIfEmpty"runat="server"Value="False"/>
  10. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnMaxHeight"runat="server"Value="200"/>
  11. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnFilterPlaceholder"runat="server"Value="Search for something..."/>
  12. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnAllSelectedText"runat="server"Value="No option left..."/>
  13. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnText"runat="server"/>
  14. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnValue"runat="server"/>
  15. <asp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldIDasp:HiddenFieldID="hdnSelectionMode"runat="server"Value="checkbox"/>
  16. <asp:ListBoxIDasp:ListBoxIDasp:ListBoxIDasp:ListBoxIDasp:ListBoxIDasp:ListBoxIDasp:ListBoxIDasp:ListBoxID="ddlAutoCompleteSelect"runat="server"Style="width: 350px;"
  17. SelectionMode="Multiple"OnSelectedIndexChanged="ddlAutoCompleteSelect_SelectedIndexChanged1">
  18. </asp:ListBox>
  19. <!--Adding RequiredField Validator-->
  20. <asp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorIDasp:RequiredFieldValidatorID="reqddlAutoCompleteSelect"runat="server"ControlToValidate="ddlAutoCompleteSelect"
  21. InitialValue=""Display="Dynamic"Enabled="False"ForeColor="Red">
  22. </asp:RequiredFieldValidator>
  23. <p>
  24. <asp:LabelIDasp:LabelIDasp:LabelIDasp:LabelIDasp:LabelIDasp:LabelIDasp:LabelIDasp:LabelID="lblSelectedItems"runat="server"Style="word-wrap: break-word; height: auto; float: left; overflow-y: auto; display: none;">
  25. </asp:Label>
  26. </p>
  27. </div>
AutoCompleteDdl.aspx.cs
  1. using System;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  8. publicpartialclassUser_Control_AutoCompleteDdl: System.Web.UI.UserControl {#region Variable Declarations
  10. privateconststring _dataTextField = "Text";
  11. privateconststring _dataValueField = "Value";
  12. publiceventEventHandlerSelectedIndexChanged;
  14. #endregion
  16. #region Properties
  18. #regionBootStrap Properties
  20. ///<summary>
  21. ///Set the placeholder for the DropDownlist.
  22. ///</summary>
  23. publicstringNonSelectedText
  24. {
  25. get
  26. {
  27. returnhdnNonSelectedText.Value;
  28. }
  29. set
  30. {
  31. hdnNonSelectedText.Value = value;
  32. }
  33. }
  35. ///<summary>
  36. /// Get Or Set the value whether select all option should be included or not.
  37. ///</summary>
  38. publicboolIncludeSelectAllOption
  39. {
  40. get
  41. {
  42. returnConvert.ToBoolean(hdnIncludeSelectAllOption.Value);
  43. }
  44. set
  45. {
  46. //For radio Button or Single Select there is no need of including the selectAll Option/checkBox button.
  47. //That's why the default value of "false" is set even if the value is "True".
  48. if (value == true && SelectionMode == ListSelectionMode.Single) {
  49. hdnIncludeSelectAllOption.Value = "false";
  50. }
  51. else
  52. {
  53. hdnIncludeSelectAllOption.Value = Convert.ToString(value);
  54. }
  55. }
  56. }
  58. ///<summary>
  59. /// Get Or Set the value wheter filter is enabled or not.
  60. ///</summary>
  61. publicboolEnableFiltering
  62. {
  63. get
  64. {
  65. returnConvert.ToBoolean(hdnEnableFiltering.Value);
  66. }
  67. set
  68. {
  69. hdnEnableFiltering.Value = Convert.ToString(value);
  70. }
  71. }
  73. ///<summary>
  74. /// Set the Width of the Combo
  75. ///</summary>
  76. publicstringButtonWidth
  77. {
  78. get
  79. {
  80. returnhdnButtonWidth.Value;
  81. }
  82. set
  83. {
  84. hdnButtonWidth.Value = value;
  85. lblSelectedItems.Style.Add("width", hdnButtonWidth.Value);
  86. }
  87. }
  89. ///<summary>
  90. /// Get Or Set the value to disable dropdownlist when it is empty.
  91. ///</summary>
  92. publicboolDisableIfEmpty
  93. {
  94. get
  95. {
  96. returnConvert.ToBoolean(hdnDisableIfEmpty.Value);
  97. }
  98. set
  99. {
  100. hdnDisableIfEmpty.Value = Convert.ToString(value);
  101. }
  102. }
  104. ///<summary>
  105. /// Get Or Set the value the maximum height for the control.
  106. ///</summary>
  107. publicintMaxHeight
  108. {
  109. get
  110. {
  111. returnConvert.ToInt32(hdnMaxHeight.Value);
  112. }
  113. set
  114. {
  115. hdnMaxHeight.Value = Convert.ToString(value);
  116. }
  117. }
  119. ///<summary>
  120. /// Get Or Set the value for select all option.
  121. ///</summary>
  122. publicstringSelectAllText
  123. {
  124. get
  125. {
  126. returnhdnSelectAllText.Value;
  127. }
  128. set
  129. {
  130. hdnSelectAllText.Value = value;
  131. }
  132. }
  134. ///<summary>
  135. /// Get Or Set the value whether select all option should be there or not.
  136. ///</summary>
  137. publicboolEnableFilteringIgnoreCase
  138. {
  139. get
  140. {
  141. returnConvert.ToBoolean(hdnEnableFilteringIgnoreCase.Value);
  142. }
  143. set
  144. {
  145. hdnEnableFilteringIgnoreCase.Value = Convert.ToString(value);
  146. }
  147. }
  149. publicstringFilterPlaceholder
  150. {
  151. get
  152. {
  153. returnhdnFilterPlaceholder.Value;
  154. }
  155. set
  156. {
  157. hdnFilterPlaceholder.Value = value;
  158. }
  159. }
  162. #endregion
  164. #regionListView Properties
  166. publicstringGetID
  167. {
  168. get
  169. {
  170. returnthis.ID;
  171. }
  172. }
  174. publicstringGetClientID
  175. {
  176. get
  177. {
  178. returnthis.ClientID + "_ddlAutoCompleteSelect";
  179. }
  180. }
  182. ///<summary>
  183. ///To set text search enabled
  184. ///</summary>
  185. publicbool Enabled
  186. {
  187. get
  188. {
  189. returnddlAutoCompleteSelect.Enabled;
  190. }
  191. set
  192. {
  193. ddlAutoCompleteSelect.Enabled = value;
  194. }
  195. }
  197. ///<summary>
  198. ///Sets the Type of DropDownlist it is. For e.g. whether single select or multi select.
  199. ///</summary>
  200. publicListSelectionModeSelectionMode
  201. {
  202. get
  203. {
  204. returnddlAutoCompleteSelect.SelectionMode;
  205. }
  206. set
  207. {
  208. if (value == ListSelectionMode.Single)
  209. {
  210. ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Single;
  211. hdnSelectionMode.Value = "radio";
  212. }
  213. else
  214. {
  215. ddlAutoCompleteSelect.SelectionMode = ListSelectionMode.Multiple;
  216. hdnSelectionMode.Value = "checkbox";
  217. }
  218. }
  219. }
  221. ///<summary>
  222. ///To set Data Source for Control
  223. ///</summary>
  224. publicList < SelectModel > DataSource
  225. {
  226. set
  227. {
  228. ddlAutoCompleteSelect.DataSource = value;
  229. ddlAutoCompleteSelect.DataBind();
  230. }
  231. }
  233. ///<summary>
  234. ///To set Text field
  235. ///</summary>
  236. publicstringDataTextField
  237. {
  238. get
  239. {
  240. returnddlAutoCompleteSelect.DataTextField;
  241. }
  242. //If String.IsNullOrEmpty(value) Then
  243. // value = _dataTextField
  244. //End If
  245. set
  246. {
  247. ddlAutoCompleteSelect.DataTextField = _dataTextField;
  248. }
  249. }
  251. ///<summary>
  252. ///To set Value field
  253. ///</summary>
  254. publicstringDataValueField
  255. {
  256. get
  257. {
  258. returnddlAutoCompleteSelect.DataValueField;
  259. }
  260. //If String.IsNullOrEmpty(value) Then
  261. // value = _dataValueField
  262. //End If
  263. set
  264. {
  265. ddlAutoCompleteSelect.DataValueField = _dataValueField;
  266. }
  267. }
  269. ///<summary>
  270. /// Get the value of the Selected Items from the dropdownlist.
  271. ///</summary>
  272. publicstring Value
  273. {
  274. get
  275. {
  276. returnhdnValue.Value;
  277. }
  278. }
  280. ///<summary>
  281. /// Get the text of the Selected Items from the dropdownlist.
  282. ///</summary>
  283. publicstring Text
  284. {
  285. get
  286. {
  287. returnhdnText.Value;
  288. }
  289. }
  291. ///<summary>
  292. ///This property is used for setting the auto postback property of the control.
  293. ///</summary>
  294. publicboolAutoPostBack
  295. {
  296. get
  297. {
  298. returnddlAutoCompleteSelect.AutoPostBack;
  299. }
  300. set
  301. {
  302. ddlAutoCompleteSelect.AutoPostBack = value;
  303. }
  304. }
  306. ///<summary>
  307. /// Returns the list of dropdownlist items.
  308. ///</summary>
  309. publicListItemCollection Items
  310. {
  311. get
  312. {
  313. returnddlAutoCompleteSelect.Items;
  314. }
  315. }
  317. ///<summary>
  318. ///Gets Or Sets the selected Index of the dropdownlist.
  319. ///</summary>
  320. publicintSelectedIndex
  321. {
  322. get
  323. {
  324. returnddlAutoCompleteSelect.SelectedIndex;
  325. }
  326. set
  327. {
  328. ddlAutoCompleteSelect.SelectedIndex = value;
  329. }
  330. }
  332. publicListItemSelectedItem
  333. {
  334. get
  335. {
  336. returnddlAutoCompleteSelect.SelectedItem;
  337. }
  338. }
  339. ///<summary>
  340. /// Get Or Sets the selected value of the dropdownlist.
  341. ///</summary>
  342. publicstringSelectedValue
  343. {
  344. get
  345. {
  346. returnddlAutoCompleteSelect.SelectedValue;
  347. }
  348. set
  349. {
  350. if ((ddlAutoCompleteSelect.Items.Count > 0 && !value.Equals("0") && !value.Equals("")))
  351. {
  352. ddlAutoCompleteSelect.SelectedValue = value;
  353. }
  354. }
  355. }
  357. ///<summary>
  358. /// Get Or Sets the error Message to the requiredFieldValidator.
  359. ///</summary>
  360. publicstringErrorMessage
  361. {
  362. get
  363. {
  364. returnreqddlAutoCompleteSelect.ErrorMessage;
  365. }
  366. set
  367. {
  368. reqddlAutoCompleteSelect.ErrorMessage = value;
  369. }
  370. }
  372. publicboolEnableValidation
  373. {
  374. get
  375. {
  376. returnddlAutoCompleteSelect.CausesValidation;
  377. }
  378. set
  379. {
  380. reqddlAutoCompleteSelect.Enabled = value;
  381. ddlAutoCompleteSelect.CausesValidation = value;
  382. }
  383. }
  385. publicstringRequiredFieldValidationGroup
  386. {
  387. get
  388. {
  389. returnreqddlAutoCompleteSelect.ValidationGroup;
  390. }
  392. set
  393. {
  394. reqddlAutoCompleteSelect.ValidationGroup = value;
  395. }
  396. }
  398. publicstringDropDownValidationGroup
  399. {
  400. get
  401. {
  402. returnddlAutoCompleteSelect.ValidationGroup;
  403. }
  404. set
  405. {
  406. ddlAutoCompleteSelect.ValidationGroup = value;
  407. }
  408. }
  410. #endregion
  412. #endregion
  414. #region Page Events
  416. protectedvoidPage_Load(object sender, System.EventArgs e)
  417. {
  418. try
  419. {
  420. if (!(string.IsNullOrEmpty(hdnText.Value) && string.IsNullOrEmpty(hdnValue.Value)))
  421. {
  422. string[] selectedItemsText = hdnText.Value.Split(newchar[]
  423. {
  424. ','
  425. }, StringSplitOptions.RemoveEmptyEntries);
  426. string[] selectedItemsValue = hdnValue.Value.Split(newchar[]
  427. {
  428. ','
  429. }, StringSplitOptions.RemoveEmptyEntries);
  431. IEnumerable < ListItem > listItems = ddlAutoCompleteSelect.Items.Cast < ListItem > ().Where(x => selectedItemsText.Contains(x.Text) && selectedItemsValue.Contains(x.Value));
  433. foreach(ListItem item inlistItems)
  434. {
  435. item.Selected = true;
  436. }
  437. }
  438. }
  439. catch (Exception ex)
  440. {
  441. throw ex;
  442. }
  443. }
  445. protectedvoidPage_PreRender(object sender, System.EventArgs e)
  446. {
  447. try
  448. {
  449. //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.
  450. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapJs", ResolveUrl("~/Scripts/bootstrap.min.js"));
  451. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "bootStrapMultiSelectJs", ResolveUrl("~/Scripts/bootstrap-multiselect.js"));
  452. ScriptManager.RegisterClientScriptInclude(this, this.GetType(), "autoCompleteDdlJs", ResolveUrl("~/Scripts/app/AutoCompleteDdl.js"));
  453. }
  454. catch (Exception ex)
  455. {
  456. throw ex;
  457. }
  458. }
  460. protectedvoid ddlAutoCompleteSelect_SelectedIndexChanged1(object sender, EventArgs e)
  461. {
  462. if (SelectedIndexChanged != null)
  463. {
  464. SelectedIndexChanged(sender, e);
  465. }
  466. }
  468. #endregion
  470. }

AutoCompleteDdl.js

  1. /*Global Variables Declaration*/
  3. //Property Controls
  4. varhdnButtonWidth = '';
  5. varhdnNonSelectedText = '';
  6. varhdnIncludeSelectAllOption = '';
  7. varhdnSelectAllText = '';
  8. varhdnEnableFiltering = '';
  9. varhdnEnableFilteringIgnoreCase = '';
  10. varhdnDisableIfEmpty = '';
  11. varhdnMaxHeight = '';
  12. varhdnFilterPlaceholder = '';
  13. varhdnAllSelectedText = '';
  14. varhdnSelectionMode = '';
  15. //For getting the postBack element ID
  16. varpostBackElementID = '';
  18. //User Control Specific Controls
  19. varlabelId = '';
  20. varhdnTextId = '';
  21. varhdnValueId = '';
  22. varucParentDiv = '';
  24. //Helper variables
  25. varselectedItemsText = '';
  26. varselectedItemsValue = '';
  28. /*This function is used for converting string
  29. "true" or "false" values to Javascript Boolean values.*/
  30. functionconvertToBoolean(value)
  31. {
  32. return (value === "true");
  33. }
  35. functionpageLoad()
  36. {
  38. $(document).ready(function()
  39. {
  41. Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(InitializeRequestHandler);
  42. functionInitializeRequestHandler(sender, args)
  43. {
  44. postBackElementID = args.get_postBackElement().id;
  45. }
  47. //getting the prototype of bootstrap MultiSelect Function/Constructor.
  48. varmultiSelectFunction = $.fn.multiselect.Constructor;
  50. //overriding the UpdateButtonText function of bootstrap MultiSelect Function/Constructor.
  51. multiSelectFunction.prototype.updateButtonText = function() {
  52. //resetting the variable values to ''
  53. selectedItemsText = '';
  54. selectedItemsValue = '';
  56. //retrieving the selected options
  57. var options = this.getSelected();
  59. varinputType = this.options.multiple ? "checkbox" : "radio";
  61. // resetting the updateButtonText event values
  62. if (this.options.enableHTML)
  63. {
  64. $('.multiselect .multiselect-selected-text', this.$container).html(hdnNonSelectedText);
  65. }
  66. else
  67. {
  68. $('.multiselect .multiselect-selected-text', this.$container).text(hdnNonSelectedText);
  69. }
  71. //retrieving the container parent element i.e. User Control's Parent Div
  72. ucParentDiv = this.$container.parent();
  74. //Setting the title attribute of the MultiSelect Button ToNonSelectedText value.
  75. $('.multiselect', this.$container).attr('title', hdnNonSelectedText);
  77. //Setting the label value Or ButtonTextvalue(incase of RadioButton) only if the selectedOption Length > 0
  78. if (options.length > 0)
  79. {
  80. if (inputType === "checkbox")
  81. {
  82. varliSelectedItems = this.options.buttonText(options, this.$select);
  84. //Finding elements for that specific user control scope(if multiple instances of the same UC exists on the page)
  85. labelId = $(ucParentDiv).find("[id*='lblSelectedItems']");
  86. hdnTextId = $(ucParentDiv).find("[id*='hdnText']");
  87. hdnValueId = $(ucParentDiv).find("[id*='hdnValue']");
  89. //Setting the display CSS property value to ""
  90. $(labelId).css("display", "");
  91. //setting the Label data by forming a unordered list.
  92. $(labelId).html("<ul>" + liSelectedItems + "</ul>");
  94. //iterating over the selected options and appending it to the variables if the inputType is "checkbox"
  95. $.each(options, function(index, option)
  96. {
  97. selectedItemsText += option.text + ",";
  98. selectedItemsValue += option.value + ",";
  99. });
  101. //removing the last comma from the string value.
  102. selectedItemsText = selectedItemsText.substring(0, selectedItemsText.lastIndexOf(","));
  103. selectedItemsValue = selectedItemsValue.substring(0, selectedItemsValue.lastIndexOf(","));
  105. }
  106. else
  107. {
  108. //Retrieving the selectedOption from the DropDownList. Here we can simply get the text of the SelectedItem by using options.text() function but, it is a standard followed by
  109. //Bootstrap Multiselect to call the buttonText function and get the selected Item Text.
  110. varselectedOption = this.options.buttonText(options, this.$select);
  111. //setting the selected value on Button Title when the SelectionMode is Single.
  112. if (this.options.enableHTML)
  113. {
  114. $('.multiselect .multiselect-selected-text', this.$container).html(selectedOption);
  115. }
  116. else
  117. {
  118. $('.multiselect .multiselect-selected-text', this.$container).text(selectedOption);
  119. }
  121. $('.multiselect', this.$container).attr('title', selectedOption);
  123. labelId = $(ucParentDiv).find("[id*='lblSelectedItems']");
  124. hdnTextId = $(ucParentDiv).find("[id*='hdnText']");
  125. hdnValueId = $(ucParentDiv).find("[id*='hdnValue']");
  127. //resetting the label value to ""
  128. $(labelId).html("");
  129. //Setting the display css property value to "none".
  130. $(labelId).css("display", "none");
  132. selectedItemsText = options.text();
  133. selectedItemsValue = options.val();
  134. }
  135. }
  137. //finally storing the value to the respective hidden fields.
  138. $(hdnTextId).val(selectedItemsText);
  139. $(hdnValueId).val(selectedItemsValue);
  140. }
  143. //Iterating over each DropdownList on which we need to bind our Bootstrap MultiSelect.
  144. $("select[id*='ddlAutoCompleteSelect']").each(function()
  145. {
  146. varddlCntrl = $(this);
  147. //retrieving the parent element of the dropdownlist control.
  148. vardivUCParent = $(ddlCntrl).parent();
  150. //retrieving the values of the hidden fields/ property values
  151. hdnButtonWidth = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnButtonWidth")).val();
  152. hdnNonSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnNonSelectedText")).val();
  153. hdnIncludeSelectAllOption = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnIncludeSelectAllOption")).val().toString().toLowerCase());
  154. hdnSelectAllText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnSelectAllText")).val();
  155. hdnEnableFiltering = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFiltering")).val().toString().toLowerCase());
  156. hdnEnableFilteringIgnoreCase = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnEnableFilteringIgnoreCase")).val().toString().toLowerCase());
  157. hdnDisableIfEmpty = convertToBoolean($("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnDisableIfEmpty")).val().toString().toLowerCase());
  158. hdnMaxHeight = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnMaxHeight")).val();
  159. hdnFilterPlaceholder = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnFilterPlaceholder")).val();
  160. hdnAllSelectedText = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnAllSelectedText")).val();
  161. hdnSelectionMode = $("#" + ddlCntrl.attr("id").replace("ddlAutoCompleteSelect", "hdnSelectionMode")).val();
  163. //Retrieving the SelectionMode property value.
  164. varinputType = hdnSelectionMode;
  166. //Applying Bootstrap MultiSelect on DropDownList.
  167. $(this).multiselect({
  168. buttonWidth: hdnButtonWidth,
  169. includeSelectAllOption: hdnIncludeSelectAllOption,
  170. enableFiltering: hdnEnableFiltering,
  171. enableCaseInsensitiveFiltering: hdnEnableFilteringIgnoreCase,
  172. selectAllText: hdnSelectAllText,
  173. nonSelectedText: hdnNonSelectedText,
  174. disableIfEmpty: hdnDisableIfEmpty,
  175. maxHeight: hdnMaxHeight,
  176. filterPlaceholder: hdnFilterPlaceholder,
  177. allSelectedText: hdnAllSelectedText,
  178. buttonText: function(options, select)
  179. {
  180. if (options.length === 0)
  181. {
  182. returnthis.nonSelectedText;
  183. }
  184. else
  185. {
  186. var selected = '';
  187. //For fetching the selected option if the SelectionMode for Dropdownlist is Multiple. i,e. Checkbox.
  188. if (inputType === "checkbox")
  189. {
  190. options.each(function()
  191. {
  192. var label = ($(this).attr('label') !== undefined) ? $(this).attr('label') : $(this).text();
  193. selected += "<li>" + label + "</li>";
  194. });
  195. }
  196. else
  197. {
  198. //For retrieving the selected option text if the SelectionMode for Dropdownlist is Single. i.e. RadioButton
  199. selected = options.text();
  200. }
  201. return selected;
  202. }
  203. }
  204. });
  206. //For keeping the current dropdownlist open after postback
  207. if (inputType === "checkbox")
  208. {
  209. if (postBackElementID == $(this).attr("id"))
  210. {
  211. //finding the div with class .btn-group
  212. vardivButtonGroup = $("#" + divUCParent.attr("id")).find(".btn-group");
  213. $(divButtonGroup).addClass("open");
  214. }
  215. }
  216. });
  217. });
  218. }
Default.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%><%@RegisterSrc="~/UserControl/AutoCompleteDdl.ascx"TagName="AutoCompleteDdl"TagPrefix="uc1"%>
  2. <!DOCTYPEhtml>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <headrunatheadrunat="server">
  6. <title>Bootstrap Multiselect</title>
  7. <linkrellinkrel="stylesheet"type="text/css"href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
  8. <linkrellinkrel="stylesheet"type="text/css"href="Style/bootstrap-multiselect.css"/>
  9. <scripttypescripttype="text/javascript"src="Scripts/jquery-1.9.1.min.js">
  10. </script>
  11. </head>
  12. <body>
  13. <formidformid="form1"runat="server">
  14. <asp:ScriptManagerIDasp:ScriptManagerID="ScriptManager1"runat="server">
  15. </asp:ScriptManager>
  16. <asp:UpdatePanelIDasp:UpdatePanelID="udpMain"runat="server">
  17. <ContentTemplate>
  18. <divclassdivclass="container">
  19. <divclassdivclass="row">
  20. <divclassdivclass="col-md-12">
  21. <h3>Bootstrap MultiSelectDropdownlist</h3>
  22. <table>
  23. <tbody>
  24. <tr>
  25. <tdcolspantdcolspan="2">
  26. <h4>Single Select Option</h4>
  27. </td>
  28. </tr>
  29. <tr>
  30. <tdvaligntdvalign="top">Select Item:
  31. </td>
  32. <td>
  33. <uc1:AutoCompleteDdlIDuc1:AutoCompleteDdlID="ddlSingleSelect"runat="server"IncludeSelectAllOption="false"
  34. AutoPostBack="true"ButtonWidth="320px"SelectAllText="All"NonSelectedText="--Select Option--"
  35. MaxHeight="400"EnableFiltering="true"FilterPlaceholder="Search For Something..."
  36. SelectionMode="Single"PlaceHolder="Select a Keyword"/>
  37. <p>
  38. <asp:ButtonIDasp:ButtonID="btnSingleSelect"runat="server"Text="Get Data"OnClick="btnSingleSelect_Click"/>
  39. </p>
  40. </td>
  41. </tr>
  42. <tr>
  43. <tdcolspantdcolspan="2">
  44. <asp:LabelIDasp:LabelID="lblSingleSelectData"runat="server"/>
  45. </td>
  46. </tr>
  47. </tbody>
  48. </table>
  49. </div>
  50. </div>
  51. <divclassdivclass="row">
  52. <divclassdivclass="col-md-12">
  53. <table>
  54. <tbody>
  55. <tr>
  56. <tdcolspantdcolspan="2">
  57. <h4>Multi Select WithAutoPostBack</h4>
  58. </td>
  59. </tr>
  60. <tr>
  61. <tdvaligntdvalign="top">Select Item:
  62. </td>
  63. <td>
  64. <uc1:AutoCompleteDdlIDuc1:AutoCompleteDdlID="ddlMultiSelect"runat="server"IncludeSelectAllOption="false"
  65. AutoPostBack="true"ButtonWidth="320px"SelectAllText="All"NonSelectedText="--Select Option--"
  66. MaxHeight="400"EnableFiltering="true"FilterPlaceholder="Search For Something..."
  67. SelectionMode="Multiple"PlaceHolder="Select a Keyword"/>
  68. <p>
  69. <asp:ButtonIDasp:ButtonID="btnMultiSelect"runat="server"Text="Get Data"OnClick="btnMultiSelect_Click"/>
  70. </p>
  71. </td>
  72. </tr>
  73. <tr>
  74. <tdcolspantdcolspan="2">
  75. <asp:LabelIDasp:LabelID="lblMultiSelectData"runat="server"/>
  76. </td>
  77. </tr>
  78. </tbody>
  79. </table>
  80. </div>
  81. </div>
  82. <divclassdivclass="row">
  83. <divclassdivclass="col-md-12">
  84. <table>
  85. <tbody>
  86. <tr>
  87. <tdcolspantdcolspan="2">
  88. <h4>Multi Select With AutoPostback And Dependent DDL</h4>
  89. </td>
  90. </tr>
  91. <tr>
  92. <tdvaligntdvalign="top">Select Item:
  93. </td>
  94. <td>
  95. <uc1:AutoCompleteDdlIDuc1:AutoCompleteDdlID="ddlPrimaryMultiSelect"runat="server"IncludeSelectAllOption="false"
  96. AutoPostBack="true"ButtonWidth="320px"SelectAllText="All"NonSelectedText="--Select Option--"
  97. MaxHeight="400"EnableFiltering="true"FilterPlaceholder="Search For Something..."
  98. SelectionMode="Single"PlaceHolder="Select a Keyword"/>
  99. </td>
  100. </tr>
  101. <tr>
  102. <td>Select Another Item:</td>
  103. <td>
  104. <asp:DropDownListIDasp:DropDownListID="ddlDependent"runat="server"CssClass="dropdown">
  105. </asp:DropDownList>
  106. </td>
  107. </tr>
  108. <tr>
  109. <tdcolspantdcolspan="2">
  110. <asp:LabelIDasp:LabelID="lblMultiPostbckData"runat="server"/>
  111. </td>
  112. </tr>
  113. </tbody>
  114. </table>
  115. </div>
  116. </div>
  117. </div>
  118. </ContentTemplate>
  119. </asp:UpdatePanel>
  120. </form>
  121. </body>
  122. </html>
Default.aspx.cs
  1. using System;
  2. usingSystem.Collections.Generic;
  3. usingSystem.Linq;
  4. usingSystem.Web;
  5. usingSystem.Web.UI;
  6. usingSystem.Web.UI.WebControls;
  8. publicpartialclass_Default: System.Web.UI.Page
  9. {
  10. List < SelectModel > lstData = newList < SelectModel > ();
  11. List < SelectModel > lstDependent = newList < SelectModel > ();
  13. protectedvoidPage_Load(object sender, EventArgs e)
  14. {
  15. if (!IsPostBack)
  16. {
  17. LoadData();
  18. LoadSingleSelectData();
  19. LoadMultiSelectData();
  20. LoadPrimaryMultiSelect();
  21. }
  22. ddlPrimaryMultiSelect.SelectedIndexChanged += ddlPrimaryMultiSelect_SelectedIndexChanged;
  23. }
  25. publicvoidddlPrimaryMultiSelect_SelectedIndexChanged(object sender, EventArgs e) {
  26. LoadDependentDDL();
  27. }
  29. privatevoidLoadData()
  30. {
  31. for (inti = 0; i < 5; i++)
  32. {
  33. lstData.Add(newSelectModel()
  34. {
  35. Value = "Item " + i, Text = "Item " + i
  36. });
  37. }
  38. }
  40. privatevoidLoadSingleSelectData()
  41. {
  42. ddlSingleSelect.DataValueField = "Value";
  43. ddlSingleSelect.DataTextField = "Text";
  44. //Setting the data source for the dropdownlist
  45. ddlSingleSelect.DataSource = lstData;
  46. }
  48. privatevoidLoadMultiSelectData()
  49. {
  50. ddlMultiSelect.DataValueField = "Value";
  51. ddlMultiSelect.DataTextField = "Text";
  52. ddlMultiSelect.DataSource = lstData;
  53. }
  55. privatevoidLoadPrimaryMultiSelect()
  56. {
  57. ddlPrimaryMultiSelect.DataValueField = "Value";
  58. ddlPrimaryMultiSelect.DataTextField = "Text";
  59. ddlPrimaryMultiSelect.DataSource = lstData;
  60. }
  62. privatevoidLoadDependentDDL()
  63. {
  64. stringselectedItem = ddlPrimaryMultiSelect.SelectedItem.Text;
  65. stringsubItem = "Sub " + selectedItem;
  66. lstDependent.Clear();
  67. lstDependent.Add(newSelectModel()
  68. {
  69. Text = subItem, Value = subItem
  70. });
  71. ddlDependent.DataValueField = "Value";
  72. ddlDependent.DataTextField = "Text";
  73. ddlDependent.DataSource = lstDependent;
  74. ddlDependent.DataBind();
  75. }
  77. protectedvoidbtnSingleSelect_Click(object sender, EventArgs e) {
  78. string value = ddlSingleSelect.Value;
  79. string text = ddlSingleSelect.Text;
  81. lblSingleSelectData.Text = "<b>Value: </b>" + value + "<br/><b>Text: </b>" + text;
  82. }
  84. protectedvoidbtnMultiSelect_Click(object sender, EventArgs e)
  85. {
  86. string value = ddlMultiSelect.Value;
  87. string text = ddlMultiSelect.Text;
  89. lblMultiSelectData.Text = "<b>Value: </b>" + value + "<br/><b>Text: </b>" + text;
  90. }
  92. }
Now let’s run the application and you’ll see the following output.


Figure 1: Output