Group asp.net webapplication listbox items (Not using WPF)

Question

I have an asp.net web application in which i am using a listbox control to fetch the data from database. I have 3 groups of data in my database and i want to group these items while fetching and show it with headers for each group on my list box. I have done some research online but all the articles i found are using WPF and i cannot use WPF in my case because my application is an asp.net web application and i cannot change it now. Please help me in finding if there is any way to group my items as shown in the picture using C# and asp.net.

Thanks in advance

enter image description here

lucidgold · Accepted Answer · 2014-04-07T20:07:59.253

1

You can use CSS Classes to set the look/feel of each item in the list:

CSS:

<style>
    .red
    {
        background-color:pink;
        color:red;       
    }
</style>

ASPX: On each item header you must use Class="red" and disabled="disabled" (thanks @Arman)

    <asp:ListBox ID="ListBox1" runat="server">
        <asp:ListItem Text="A" Disabled="disabled" Class="red"></asp:ListItem>
        <asp:ListItem Text="Adam"></asp:ListItem>
        <asp:ListItem Text="Ami"></asp:ListItem>
        <asp:ListItem Text="B" Disabled="disabled" Class="red"></asp:ListItem>
        <asp:ListItem Text="Bob"></asp:ListItem>
        <asp:ListItem Text="K" Disabled="disabled" Class="red"></asp:ListItem>
        <asp:ListItem Text="Kim"></asp:ListItem>
        <asp:ListItem Text="L" Disabled="disabled" Class="red"></asp:ListItem>
        <asp:ListItem Text="Lena"></asp:ListItem>
        <asp:ListItem Text="Leo"></asp:ListItem>
        <asp:ListItem Text="Limi"></asp:ListItem>
    </asp:ListBox>

Code-Behind: Since you are populating the items in the ListBox dynamically from a DB you will need to set the CSS attribute of the header item like so:

ListItem x = new ListItem("A"));
x.Attributes.Add("class","red");
ListBox1.Items.Add(x);

edited Apr 07 '14 at 20:07

answered Apr 07 '14 at 19:16

lucidgold

4,432
5
31
51

And better use `disabled="disabled"` in each group header – Arman Apr 07 '14 at 19:19
@Arman: For somereason, doing that changes the forecolor of the header item, it "disables" it and sets Gray as item forecolor, however the BG color remains unchanged. I thought pointer-events: none; would fix that but no... I am still looking into this, great comment though! – lucidgold Apr 07 '14 at 19:24
Thanks for the reply arman. This is helpful but i still have one more question. The data to my listbox is fetched from database instead of statically adding it as list items on asp.net page. Can you please tell how i can add the css if the data is dynamically fetched from DB. – user545359 Apr 07 '14 at 19:58
I know i am asking a lot. But just got one last question. Can we add a tree like functionality to an asp.net listbox so that we can collapse or expand a group as necessary. I just ask this questions because in future the number of list items will increase and it may be difficult for users to select & also look and feel will be good. Please let me know your opinion. – user545359 Apr 07 '14 at 20:10
@user545359: If that is where you are headed I suggest NOT using a ListBox. You will probably need to look at collabsable DIVs, then in each dive you could add a ListBox? Collabsable DIVs are very usefull, you can find an approach [here](http://stackoverflow.com/questions/14519796/collapsible-div) – lucidgold Apr 07 '14 at 20:20
Lucidgold - While implementing the logic i am stuck with a logic. As i am fetching the data from database i have 3 categories of data which i am binding to a listbox. If i have to add the header to each category like A, B, C. Do i need to bind the items to grid and loop through the items and insert the item at an index or do you suggest any good practice to do it? – user545359 Apr 07 '14 at 22:33

Group asp.net webapplication listbox items (Not using WPF)

1 Answers1