I have used this bootstrap multiselect plug-in from GitHub.
I have read their documentation on OptGroup
. I'm able to get to see these groups by placing group selection from ASPX page.
How do I generate OptGroups from code behind while adding list items? Is there an attribute that I need to add or is it not possible at all from code behind?
I have dynamic list options so I have to use code behind data source to bind my data source.
ASPX
<asp:ListBox ID="lstFruits" runat="server" SelectionMode="Multiple" />
Plug-in Initialization
<script type="text/javascript">
$(document).ready(function () {
$('[id*=lstFruits]').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
buttonWidth: '50%',
maxHeight: 200,
nonSelectedText: 'Select user(s) to send notices...',
enableCaseInsensitiveFiltering: true,
enableClickableOptGroups: true,
enableCollapsibleOptGroups: true,
});
});
</script>
Sample code behind:
//Group 1
ListItem item1 = new ListItem("Option 1", "1");
ListItem item2 = new ListItem("Option 2", "2");
ListItem item3 = new ListItem("Option 3", "3");
ListItem item4 = new ListItem("Option 4", "4");
//Group 2
ListItem item5 = new ListItem("Option 5", "5");
ListItem item6 = new ListItem("Option 6", "6");
ListItem item7 = new ListItem("Option 7", "7");
ListItem item8 = new ListItem("Option 8", "8");
ListItem item9 = new ListItem("Option 9", "9");
lstFruits.Items.Add(item1);
lstFruits.Items.Add(item2);
lstFruits.Items.Add(item3);
lstFruits.Items.Add(item4);
lstFruits.Items.Add(item5);
lstFruits.Items.Add(item6);
lstFruits.Items.Add(item7);
lstFruits.Items.Add(item8);
lstFruits.Items.Add(item9);
I have already looked into this question on SO. It is not related to this plug-in. Though, I still added this code on my code behind. It still doesn't work.
item1.Attributes["OptionGroup"] = "Group 1";