Hi,

Many a times we have a requirement where we are showing data in a dropdown list. Many of the times the data belongs to a particular group. But there is no way to show the group in the dropdown list. Hence there is no way for the user to know which group (or category) the data belongs to.

Most of the time we use two dropdown list to show the data. When the user selects the category dropdown we populate the sub category of the product itself. (We can also use Ajax to populate the second dropdown, but that’s not in the scope of this post). But this solution is still not the best as the user still cannot look at one list of products (or sub category) and understand which category it belongs to.

So what to do if I want the user to see the entire product list in a list control and also show him group it belongs to. Well I tried to search and found there is no inbuilt control in Asp.Net for it. But then I came across this HTML element which was exactly what I wanted.

The optgroup element can be used in the select (It works with both List box and dropdown) element. As the name suggest the element can be used to group the items in the List control. And more importantly it cannot be selected by the user hence we need not worry about selection of the base category. Be low is a simple example on how to use the control.

<select id="SiteList">

    <optgroup label="Technical">

        <option>VikramLakhotia.com</option>

    </optgroup>

    <optgroup label="Fun">

        <option>justlikethat.Vikramlakhotia.com</option>

    </optgroup>

</select>

 The output is shown below.

Here the user cannot select the items in optgroup but there are easily visible to him. This can be very useful from the user prospective.

Thanks
Vikram

P.S. Currently there is no asp.net control available for the same but I have decided to create one myself (Infact already started the work). That will be another blog in a few days time.