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";

Related posts

Recent Viewed