Grouping items in DropDownList control

As a Web Developer we use to work with Dropdownlist control many times in our daily life. But sometimes all the developers come across grouping the list items in Dropdownlist control.

Here I am going to showcase how to do this in ASP.NET with an example. Basically my example shows you, listing few of laptop models in Dropdownlist, where the laptop models are categorized by laptop manufacturer as shown in the screenshot.

Before getting to start this example, we can create two database tables. One is for storing, loptop manufacturers information and another for storing laptop models.







Step1: Create a table for storing laptop manufacturers info: Notebook_Manufacturer:

CREATE TABLE [dbo].[Notebook_Manufacturer](
 [NotebookId] [int] NOT NULL,
 [NotebookName] [varchar](20) NOT NULL,
 CONSTRAINT [PK_Notebook_Manufacturer] PRIMARY KEY CLUSTERED 
(
 [NotebookId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Step2: Create one more table for storing loptop models:

CREATE TABLE [dbo].[Notebook_Models](
 [ModelId] [int] NOT NULL,
 [ModelName] [varchar](20) NOT NULL,
 [ManufacturerId] [int] NOT NULL,
 CONSTRAINT [PK_Notebook_Models] PRIMARY KEY CLUSTERED 
(
 [ModelId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Step3: Insert some sample records into both the tables:

GO
INSERT [dbo].[Notebook_Manufacturer] ([NotebookId], [NotebookName]) VALUES (1, N'Dell Inc.')
GO
INSERT [dbo].[Notebook_Manufacturer] ([NotebookId], [NotebookName]) VALUES (2, N'Sony')
GO
INSERT [dbo].[Notebook_Manufacturer] ([NotebookId], [NotebookName]) VALUES (3, N'Samsung')
GO
INSERT [dbo].[Notebook_Manufacturer] ([NotebookId], [NotebookName]) VALUES (4, N'Acer')
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (1, N'Inspiron', 1)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (2, N'Vostro', 1)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (3, N'XPS', 1)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (4, N'Aspire', 4)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (5, N'Gateway', 4)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (6, N'AOD', 4)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (7, N'VAIO', 2)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (8, N'VPCZ', 2)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (9, N'N127-DA01IN', 3)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (10, N'NP-N148-DA01IN', 3)
GO
INSERT [dbo].[Notebook_Models] ([ModelId], [ModelName], [ManufacturerId]) VALUES (11, N'R528-DA03IN', 3)
GO

Step4: No we are ready to get the data as we need. We can build a query to get the loptop models which are categorized by laptop manufacturer.

SELECT '-- ' + ModelName AS ModelName,ModelId,ManufacturerId FROM Notebook_Models UNION 
SELECT UPPER(NotebookName),'',NotebookId FROM Notebook_Manufacturer ORDER BY ManufacturerId,ModelId

Ste5: Execute the above query from your ASP.NET application and bind the data to Dropdownlist. Add an 'DataBound' event to dropdown list. Inside the 'DataBound' event, access the bounded list items and disable 'Manufacturers' from the list.

        protected void dllNotebook_DataBound(object sender, EventArgs e)
        {
            DropDownList notebook = (DropDownList)sender;

            foreach (ListItem item in notebook.Items)
            {
                if (!item.Text.StartsWith("--"))
                {
                    item.Attributes.Add("disabled", "true");
                    item.Attributes.Add("style", "color:red");
                }                
            }
        }

That's It, You are done!

You can download this sample from Dotnet4Techies code lab.