ASP.NET add individual Background Color for each MenuItem dynamically from codebehind

Question

0.00/5 (No votes)

See more:

I'm using asp Menu Control. I was binding Menu items from database. However, I've got a requirement that each MenuItem's Background color must be different colors(i.e) Each menu will be displayed in different colur. Is this possible to do that? or Suggest me any other method to do.

Many thanks in advance

Posted 6-Apr-14 23:54pm

Archana Venkatramani

Updated 7-Apr-14 1:53am

v3

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nagaraj Muthuchamy · Answer 1 · 2014-04-07T01:08:00

Solution 1

Yes, same workaround is discussed here.
http://stackoverflow.com/questions/705440/asp-net-menuitem-individual-styles[^]

Posted 7-Apr-14 1:08am

Nagaraj Muthuchamy

Comments

Archana Venkatramani 7-Apr-14 7:29am

Hi Nagaraj Muthuchamy,
Thanks for your reply. I have tried that link that you have provided. Its changing the color around the text not full menu.

Nagaraj Muthuchamy 7-Apr-14 7:38am

If you want to change the background color of the menu item, change 'ForeColor' to 'BackColor' in asp:Panel.

Archana Venkatramani 7-Apr-14 7:52am

Yes i have changed 'backcolor' from 'ForeColor'.. It is changing the color around the text. Not full menu.

Nagaraj Muthuchamy 7-Apr-14 7:54am

Please check the following link, this will apply styles for full Menu control.
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menuitemstyle%28v=vs.90%29.aspx

Archana Venkatramani 7-Apr-14 7:57am

I need to display the menu like the following link.
http://blogs.msdn.com/cfs-filesystemfile.ashx/__key/communityserver-blogs-components-weblogfiles/00-00-00-56-40-metablogapi/2605.4_5F00_0631ECBB.png

But the menu should be taken from database. That's why i am using asp menu control. In that i need to change each and every menu item background color. This background color code also should be taken from database.

Nagaraj Muthuchamy 7-Apr-14 8:02am

Please post your code here, will help to understand the issue better.

Archana Venkatramani 7-Apr-14 8:06am

this is my code and .css content.
.aspx:
<asp:Menu ID="menuBar" runat="server" Orientation="Horizontal" OnMenuItemClick="menuBar_MenuItemClick"
StaticPopOutImageUrl="~/Images/down.png">
<dynamichoverstyle cssclass="DynamicHover">
<dynamicmenuitemstyle cssclass="DynamicMenuItem">
<dynamicselectedstyle cssclass="DynamicHover">
<statichoverstyle cssclass="staticHover">
<staticmenuitemstyle cssclass="StaticMenuItem" itemspacing="1px">
<staticselectedstyle cssclass="staticHover">

.aspx.cs:
foreach (DataRow dr in objDs.Tables[0].Select("ParentID =" + 0))
{
menuBar.Items.Add(new MenuItem(dr["MenuName"].ToString(), dr["pkid"].ToString(),
"", dr["MenuLocation"].ToString()));

}
foreach (DataRow dr in objDs.Tables[0].Select("ParentID >" + 0))
{
MenuItem mnu = new MenuItem(dr["MenuName"].ToString(), dr["pkid"].ToString(),
"", dr["MenuLocation"].ToString());

menuBar.FindItem(dr["ParentID"].ToString()).ChildItems.Add(mnu);
}

.css:
.MenuBar
{
padding: 0 10px 0 10px;
width: 935px;
margin: auto;
height: 80px;
font-weight: bold;
vertical-align: middle;
margin-left: 20px;
}

.StaticMenuItem
{
text-align: center;
border-width: 0;
color: #FFFFFF;
text-decoration: none; /*text-shadow: #FFF 0 0 0;*/
padding-right: 4px;
padding-left: 4px;
margin-right: 20px;
height: 60px;
font-weight: bold;
background-color: #d67500;
vertical-align: middle;
width: 160px;
}
.DynamicMenuItem
{
text-align: left;
border-width: 0;
color: #FFF;
text-decoration: none; /*text-shadow: #FFF 0 0 0;*/
background-color: #007a99;
padding-right: 4px;
padding-left: 4px;
height: 40px;
vertical-align: middle;
width: 160px;
}

.staticHover
{
text-align: center;
border: 3px solid #ffffff;
color: #FFF;
text-decoration: none; /*text-shadow: #FFF 0 0 0;*/
padding-right: 4px;
padding-left: 4px;
margin-right: 20px;
height: 60px;
font-weight: bold;
vertical-align: middle;
width: 160px;
}

.DynamicHover
{
text-align: left;
background-color: #2d55ab;
color: #FFF;
text-decoration: none; /*text-shadow: #FFF 0 0 0;*/
padding-right: 4px;
padding-left: 4px;
height: 40px;
width: 160px;
}

Nagaraj Muthuchamy 7-Apr-14 8:31am

Posted the workaround.

Archana Venkatramani 8-Apr-14 4:18am

i haved tried your solution. Now the menu is displaying like this. Please check the below URL.

http://www.dotnetspider.com/attachments/forum/334677-54831-Menu.png

Nagaraj Muthuchamy · Answer 2 · 2014-04-07T02:31:00

<br />
public partial class WebForm1 : System.Web.UI.Page<br />
    {<br />
        protected void Page_Load(object sender, EventArgs e)<br />
        {<br />
<br />
            DataTable dt = new DataTable();<br />
<br />
            dt.Columns.Add("pkid");<br />
            dt.Columns.Add("MenuName");<br />
            dt.Columns.Add("ParentID");<br />
            dt.Columns.Add("MenuLocation");<br />
<br />
            dt.Rows.Add("1", "Parent 1", 0, "#");<br />
            dt.Rows.Add("2", "Parent 2", 0, "#");<br />
<br />
            dt.Rows.Add("3", "Child 1-1", 1, "#");<br />
            dt.Rows.Add("4", "Parent 1-2", 1, "#");<br />
            dt.Rows.Add("5", "Parent 1-3", 1, "#");<br />
<br />
            dt.Rows.Add("6", "Child 2-1", 2, "#");<br />
            dt.Rows.Add("7", "Parent 3-2", 2, "#");<br />
            dt.Rows.Add("8", "Parent 3-3", 2, "#");<br />
<br />
            foreach (DataRow dr in dt.Select("ParentID =" + 0)) <br />
            {<br />
                MenuItem mnu = new MenuItem(dr["MenuName"].ToString(), dr["pkid"].ToString(), "", dr["MenuLocation"].ToString());<br />
                menuBar.Items.Add(mnu); <br />
            }<br />
<br />
            foreach (DataRow dr in dt.Select("ParentID >" + 0)) <br />
            { <br />
                MenuItem mnu = new MenuItem(dr["MenuName"].ToString(), dr["pkid"].ToString(), "", dr["MenuLocation"].ToString()); <br />
                menuBar.FindItem(dr["ParentID"].ToString()).ChildItems.Add(mnu); <br />
            } <br />
        }<br />
<br />
        public Color GetItemColor(MenuItemTemplateContainer container)<br />
        {<br />
            MenuItem item = (MenuItem)container.DataItem;<br />
<br />
            //identify based value<br />
            //if (item.Value == "value 2")<br />
            //    return Color.Brown;<br />
<br />
            //identify based on depth and index<br />
            if (item.Depth == 0)<br />
                switch (Convert.ToInt32(item.Value))<br />
                {<br />
                    case 0: return Color.Red;<br />
                    case 1: return Color.Blue;<br />
                    case 2: return Color.DarkGreen;<br />
                    default:<br />
                        return Color.Black;<br />
                }<br />
<br />
            return Color.Black;<br />
            //else<br />
                //switch (container.ItemIndex)<br />
                //{<br />
                //    //case 0: return Color.Purple;<br />
                //    //case 1: return Color.Aqua;<br />
                //    //case 2: return Color.DarkOrange;<br />
                //    //default:<br />
                //        return Color.Black;<br />
                //}<br />
<br />
<br />
        }<br />
    }<br />

XML

<asp:Menu ID="menuBar" runat="server" Orientation="Horizontal"  StaticPopOutImageUrl="~/Images/down.png">
        <StaticItemTemplate>
        <asp:Panel runat="server" BackColor='<%# GetItemColor(Container) %>' ForeColor="White">
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </StaticItemTemplate>
    <DynamicItemTemplate>
        <asp:Panel ID="Panel1" runat="server" BackColor='<%# GetItemColor(Container) %>' ForeColor="White">
            <%# Eval("Text") %> - <%# Eval("Value") %>
        </asp:Panel>
    </DynamicItemTemplate>
    </asp:Menu>