User Id :    Password :      New Member   Forgot Password  
 
How to show dropdown list items in multiple colors in asp.net
Description In this article I will explain how to show dropdown list items in multiple colors in asp.net   No. of Views     23995
  Rating     5
Author Najmul Hoda   Posted On     27 Oct 2010
Tags ASP.NET,LINQ to Object,Style Sheet    

Sample Code   Download Code

 

Introduction

Some times we need to show items in the dropdown list in different color like example below.


 In this article I will show you how you can achieve this by adding a simple css to ListItem attribute.

To explain the article I have taken an example of employees.
I will bind dropdown list with name of employees and color the employee name depending on the name starts from. Ex.

Color                  Name Starts from
Blue                   A (“Adam”,”Anamika”,”Ainul”,”Ashish”)
Green                K (“Kamran”,”Kiran”,”Kamesh”,”Kasim”)
Red                    F (“Farhan”,”Feeroz”,”Firan”)

To have a list of items in the dropdown list we need to call a method named GetEmployeeName(), that will return list of Employee objects that contains name of the employees.
 

Code

public  class Employee
    {
        public Employee()
        {
 
        }
        public Employee(string EmpName)
        {
            EmployeeName = EmpName;
        }
        public string EmployeeName { get; set; }
    }
 
    public static List GetEmployeeName()
{
List objEmployeeList = new List();
objEmployeeList.Add(new Employee("Ashish"));
objEmployeeList.Add(new Employee("Kamran"));
objEmployeeList.Add(new Employee("Ashish"));
objEmployeeList.Add(new Employee("Firan"));
objEmployeeList.Add(new Employee("Kiran"));
objEmployeeList.Add(new Employee("Kamesh"));
objEmployeeList.Add(new Employee("Anamika"));
objEmployeeList.Add(new Employee("Farhan"));
objEmployeeList.Add(new Employee("Ainul"));
objEmployeeList.Add(new Employee("Adam"));
objEmployeeList.Add(new Employee("Kasim"));
objEmployeeList.Add(new Employee("Feeroz"));
objEmployeeList.Add(new Employee("Roshan"));
objEmployeeList.Add(new Employee("Depika"));
return objEmployeeList;
}

To color items in the dropdown list depending on the name of the employee we need to call a method FillDropDownList(DropDownList ddlEmployee, string ListItemColor, string NameStartsFrom)

public void FillDropDownList(DropDownList ddlEmployee, string ListItemColor, string NameStartsFrom)
    {
        var EmployeeList = from EmpList in GetEmployeeName()
                           where EmpList.EmployeeName.StartsWith(NameStartsFrom)
                           select new {EmpName= EmpList.EmployeeName};
        ListItem lstEmployee;
        foreach (var Emp in EmployeeList)
        {
            lstEmployee = new ListItem(Emp.EmpName);
 
            lstEmployee.Attributes.Add("style","color:"+ ListItemColor);
            ddlEmployee.Items.Add(lstEmployee);
        }
    }

 

In the method FillDropDownList(), I have further called a method  GetEmployeeName() that returs a list of all employees and from that list I have filtered employees whose name starts from name specified in the variable NameStartsFrom.

After filtering the employees I have added those employees in the dropdown list and have added color specified in the variable ListItemColor. In the code you can see in the ListItem object’s arrtibute I have added style attribute and assign color to the specified color. This way we can add color to the dropdownlist item.

Enjoy Coding………..

 

About Author

About Author He is a team lead, having 8+ years of experience. He loves writing technical article for .Net developers. Najmul Hoda
No Photo
 
Country United States
Company BirlaSoft
Home Page http://www.magixchat.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

 
 
Posted By Najmul on 29 Oct 2010 at 04:50 AM
 
Thanks Gaurav,
 
 
 
Posted By Gaurav on 29 Oct 2010 at 01:22 AM
 
Good Article
 
 
   
Write your comment here.
Comment
Verification Code