how to implement option group in asp.net drop down list

In my previous article i have explained about Bind Specific Columns Of Datatable To Gridview In C#.Net, ASP.Net. In this tutorial i am explaining about how to implement option group in asp.net drop down list. In html select list option group is used to group the similiar items. But in asp.net dropdown list we don't have that option. But we can achieve this with the help of jQuery. Dropdownlist is a asp.net control used to show list of values from that the user can select one value.

Here for explanation purpose I have a datatable which contains employees from different department. And the drop down list will group the items based on the department. To use the datatable add the below namespace first.

using System.Data;

Below is the complete cs code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class OptionGroup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //creating data table
        DataTable dtable = new DataTable();
        
        //adding columns to data table
        dtable.Columns.Add("EmpId", typeof(int));
        dtable.Columns.Add("EmployeeName", typeof(string));
        dtable.Columns.Add("Departmaent", typeof(string));
        
        //adding rowa to datatable
        dtable.Rows.Add(1, "Daniel", "Development");
        dtable.Rows.Add(1, "Nancy", "Development");
        dtable.Rows.Add(1, "Alen", "Development");

        dtable.Rows.Add(1, "Baskar", "Design");
        dtable.Rows.Add(1, "Saleem", "Design");
        dtable.Rows.Add(1, "Mohammed", "Design");

        dtable.Rows.Add(1, "Akbar", "Quality Control");
        dtable.Rows.Add(1, "Crystal", "Quality Control");
        dtable.Rows.Add(1, "Iren", "Quality Control");

        // adding datatable rows to drop down list 
        ListItem newItem;
        foreach(DataRow drow in dtable.Rows)
        {
            newItem = new ListItem(drow["EmployeeName"].ToString(), drow["EmpId"].ToString());
            newItem.Attributes["OptionGroup"] = drow["Departmaent"].ToString();

            ddlOptionGroup.Items.Add(newItem);
        }
    }
}

Equivalent vb.net code is given below

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data

Public Partial Class OptionGroup
 Inherits System.Web.UI.Page
 Protected Sub Page_Load(sender As Object, e As EventArgs)
  'creating data table
  Dim dtable As New DataTable()

  'adding columns to data table
  dtable.Columns.Add("EmpId", GetType(Integer))
  dtable.Columns.Add("EmployeeName", GetType(String))
  dtable.Columns.Add("Departmaent", GetType(String))

  'adding rowa to datatable
  dtable.Rows.Add(1, "Daniel", "Development")
  dtable.Rows.Add(1, "Nancy", "Development")
  dtable.Rows.Add(1, "Alen", "Development")

  dtable.Rows.Add(1, "Baskar", "Design")
  dtable.Rows.Add(1, "Saleem", "Design")
  dtable.Rows.Add(1, "Mohammed", "Design")

  dtable.Rows.Add(1, "Akbar", "Quality Control")
  dtable.Rows.Add(1, "Crystal", "Quality Control")
  dtable.Rows.Add(1, "Iren", "Quality Control")

  ' adding datatable rows to drop down list 
  Dim newItem As ListItem
  For Each drow As DataRow In dtable.Rows
   newItem = New ListItem(drow("EmployeeName").ToString(), drow("EmpId").ToString())
   newItem.Attributes("OptionGroup") = drow("Departmaent").ToString()

   ddlOptionGroup.Items.Add(newItem)
  Next
 End Sub
End Class

Refer the jquery library in your asp.net web page.

Once the drop down list is loaded by using the jQuery wrapAll function we are grouping the drop down list items using the department attribute of the each list item. wrapAll() function Wraps a HTML structure around all elements in the set of matched elements.. Below is the jQuery code used to group the drop down list items.

Below is the complete aspx code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OptionGroup.aspx.cs" Inherits="OptionGroup" %>




    
    


    
    

        

Asp.Net Dropdown List Option Group Example

            
        

The final output will look like the below image.