c# - Asp.net webforms ListBox Grouping -

i have webform page has listbox on list of cameras on it. populated datatable has column camera name, ip address, , group.

    dataclasses1datacontext dc = new dataclasses1datacontext();     public list<cameratable> cameralistbox;     public list<listitem> selectedlistbox;      protected void page_load(object sender, eventargs e)     {         if (!ispostback)         {             cameralistbox = (from x in dc.cameratables                              select x).tolist();             listbox1.datasource = cameralistbox;             listbox1.datatextfield = "cameraname";             listbox1.datavaluefield = "ipaddress";             listbox1.databind();         }     } 

that code works fine populate listbox camera names, make has group cameras in group. have no idea how this. learned not asked questions on here unless absolutely have to, i've researched few days , cannot find anything. possible? have of programmatically?

based on great approach answer: how can add option groups in asp.net drop down list?

a listbox in asp.net not support optgroup html required grouping requesting. 1 approach inject functionality adding attribute list items capture category, using favorite front-end framework modify dom build appropriate optgroup structure.

because listbox control not have onitemdatabound type of event, can't access each item during data binding process. since time access group of cameratable record, cannot databinding - have build list can add group html attribute each option.

the method below helper create single list item data attribute if possible.

public listitem getlistitem(cameratable item) {     var listitem = new listitem(item.cameraname, item.ipaddress);     if (string.isnullorempty(item.groupname) == false)         listitem.attributes.add("data-category", item.groupname);     return listitem; } 

then, instead of databinding code on listbox, build listbox directly. you'll have account view state , persistence across postbacks, @ least approach:

var itemstoadd = cameralistbox     .select(c => getlistitem(c))     .toarray(); listbox1.items.addrange(itemstoadd); 

finally, pull out favorite client framework (jquery below) build optgroup elements.

var groups = {}; $("select option[data-category]").each(function () {     groups[$.trim($(this).attr("data-category"))] = true; }); $.each(groups, function (c) {     $("select option[data-category='"+c+"']").wrapall('<optgroup label="' + c + '">'); }); 

this should complete grouping elements.

update based on comment question

if you're going put in head of html, have ensure dom has loaded - otherwise manipulating elements not yet ready.

to stay jquery here, wrap client script in $(document).ready event. included full sample page below.

aspx page

<%@ page title="" language="c#" masterpagefile="~/site.master" autoeventwireup="true" codebehind="webform1.aspx.cs" inherits="web.webform1" %>  <asp:content id="content1" contentplaceholderid="headcontent" runat="server">     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>     <script type="text/javascript">         $(document).ready(function () {             var groups = {};             $("select option[data-category]").each(function () {                 groups[$.trim($(this).attr("data-category"))] = true;             });             $.each(groups, function (c) {                 $("select option[data-category='" + c + "']").wrapall('<optgroup label="' + c + '">');             });         });     </script> </asp:content> <asp:content id="content2" contentplaceholderid="bodycontent" runat="server">     <asp:listbox id="listbox1" runat="server" height="100" width="200" /> </asp:content> 

aspx code behind (with mocked data context , cameratable)

using system; using system.collections.generic; using system.linq; using system.web; using system.web.ui.webcontrols;  namespace web {     public partial class webform1 : system.web.ui.page     {         dataclasses1datacontext dc = new dataclasses1datacontext();         public list<cameratable> cameralistbox;          protected void page_load(object sender, eventargs e)         {             if (!ispostback)             {                 cameralistbox = (from x in dc.cameratables                                  select x).tolist();                 var itemstoadd = cameralistbox                     .select(c => getlistitem(c))                     .toarray();                 listbox1.items.addrange(itemstoadd);             }         }          public listitem getlistitem(cameratable item)         {             var listitem = new listitem(item.cameraname, item.ipaddress);             if (string.isnullorempty(item.groupname) == false)                 listitem.attributes.add("data-category", item.groupname);             return listitem;         }      }      public class dataclasses1datacontext     {         public iqueryable<cameratable> cameratables         {                         {                 return new list<cameratable>()                 {                     new cameratable("back hallway", "1.1.1.1", "floor 1"),                     new cameratable("bedroom 1", "2.2.2.2", "floor 1"),                     new cameratable("bedroom 2", "3.3.3.3", "floor 2"),                 }.asqueryable();             }         }     }      public class cameratable     {         public string cameraname { get; set; }         public string ipaddress { get; set; }         public string groupname { get; set; }         public cameratable(string name, string ip, string group)         {             this.cameraname = name;             this.ipaddress = ip;             this.groupname = group;         }     } }