asked on

Cannot seem to get rid of alternating row color

http://test.huskyshoponline.com//checkout.aspx?checkout=1go

(use mike for both username and password if you need to authenticate)

For the shipping method, the second row is grey.

I want to get rid of the grey color, but I can't find what is setting it to grey.

Here is the styling applied:

.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}

.grid-view tr.normal
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

.grid-view tr.alternate
{
   color: White;
   background-color: Blue;
   height: 25px;
   vertical-align: middle;
   text-align: center;
}

.grid-view tr.normal:hover
{
   background-color: Black;
   color: White;
   font-weight: bold;
}

.grid-view tr.alternate:hover
{
   background-color: Black;
   color: White;
   font-weight: bold;
}


.grid-view tr.selected
{
   background-color: Blue;
   color: White;
   font-weight: bold;
}

.grid-view tr.selected:hover
{
   background-color: White;
   color: Blue;
   font-weight: bold;
}

Open in new window

Here is the relevant page markup:

<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>



Been staring at this for a while.  I think another pair of eyes could help me.



Tom


<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
<RowStyle HorizontalAlign="Left" />
</asp:GridView>

Open in new window

Tom Knowlton

ASKER

Here is the page with the shipping methods

jonahzona

<tr class="alternate" align="left" style="background-color:Silver;border-color:Transparent;border-width:0px;border-style:None;" onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$gvShipping','Select$1')">

Open in new window

The background-color is set to Silver.

ASKER CERTIFIED SOLUTION

jonahzona

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jonahzona

It looks like you were able to get it working. Did my fix help you at all?

From what I can tell you removed the styling from the alternate table.

Also, I would recommend changing the password for logging in. When I used it access to the admin panel came up. I don't want some troll messing with your site!

:)

Tom Knowlton

ASKER

>>>>Also, I would recommend changing the password for logging in. When I used it access to the admin panel came up. I don't want some troll messing with your site!

Understood.

I'll see about having the login info removed from this question.

jonahzona

You could just change the password on that UN. That would probably be the fastest way...

Tom Knowlton

ASKER

jonahzone:

The points are yours.

I was wondering if you could advise me on a related question.

First....how can I make the "Select" show up on hover?

Second:

https://www.experts-exchange.com/questions/27043953/Have-white-space-grow-shrink.html

Here's hoping I caught you online!

Tom

Tom Knowlton

ASKER

thx

jonahzona

Change these two rules to below:

.grid-view tr.normal:hover, .grid-view tr.normal:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window

and

.grid-view tr.alternate:hover, .grid-view tr.alternate:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window

Notice I added the second half of the selector to the preexisting :hover selectors.

jonahzona

I will take a look at the link you posted.

Tom Knowlton

ASKER

NOTES ON SOLUTION SO FAR:

MARKUP:

<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">    
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>

<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>

Open in new window

CODE BEHIND:

(Note: This was originally found in RowCreated, and had trouble working correctly for that event handler. Moving the same code over to RowDataBound seemed to fix the hover / selected assignment of the CSS styling)

  protected void gvShipping_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          //  e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
          //  e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvShipping, "Select$" + e.Row.RowIndex);


        }

        //Add CSS class on header row.
        if (e.Row.RowType == DataControlRowType.Header)
            e.Row.CssClass = "header";

        //Add CSS class on normal row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Normal)
            e.Row.CssClass = "normal";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Alternate)
            e.Row.CssClass = "alternate";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Selected)
            e.Row.CssClass = "selected";

    }

Open in new window

CSS:

(Note: It took me a while to realize that "normal" did not apply to ALL rows when I was not interested in alternate rows. Once I realized I needed to always set styling for alternate rows as well....things smoothed-out quite a bit)

.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}



.grid-view tr.normal
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.normal:hover
{
    background-color: Blue;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.alternate
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.alternate:hover
{
    background-color: Blue;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.selected
{
    background-color: Green;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.selected:hover
{
    background-color: White;
    color: Green;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

Open in new window

Tom Knowlton

ASKER

Notes on solution does not include your fix for the "Select" link yet, sorry. :)

Tom Knowlton

ASKER

FINAL SOLUTION:

MARKUP:

<asp:GridView ID="gvShipping" runat="server" AutoGenerateColumns="False" DataKeyNames="TABLE"
OnRowCommand="gvShipping_RowCommand" Visible="False" GridLines="None"
Width="350px" BorderStyle="Solid" BorderWidth="1px" EnableModelValidation="True"
OnRowCreated="gvShipping_RowCreated" 
        onselectedindexchanged="gvShipping_SelectedIndexChanged" 
        onrowdatabound="gvShipping_RowDataBound" CssClass="grid-view">    
    <Columns>
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select Shipping Method">
            <EditItemTemplate>
                <asp:TextBox ID="textBox1" runat="server" Text='<%# Bind("DISPLAY") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblDisplay" runat="server" CommandName="Select" 
                    Text='<%# Bind("DISPLAY") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Left" />
            <ItemStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:CommandField />
        <asp:TemplateField HeaderStyle-HorizontalAlign="Right" HeaderText="Amount">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="lblAmount" runat="server" Text='<%# Bind("AMOUNT") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle HorizontalAlign="Right" />
            <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:TemplateField>
        <asp:BoundField DataField="TABLE" HeaderText="Table" Visible="False" />
        <asp:ButtonField CommandName="Select" HeaderStyle-HorizontalAlign="Right" 
            HeaderText="Select" Text="Select">
        <HeaderStyle HorizontalAlign="Right" />
        <ItemStyle HorizontalAlign="Right" Width="60px" />
        </asp:ButtonField>
    </Columns>

<EditRowStyle HorizontalAlign="Right" />
<HeaderStyle HorizontalAlign="Right" />
</asp:GridView>

Open in new window

CODE-BEHIND:

   protected void gvShipping_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          //  e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
          //  e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.gvShipping, "Select$" + e.Row.RowIndex);


        }

        //Add CSS class on header row.
        if (e.Row.RowType == DataControlRowType.Header)
            e.Row.CssClass = "header";

        //Add CSS class on normal row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Normal)
            e.Row.CssClass = "normal";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Alternate)
            e.Row.CssClass = "alternate";

        //Add CSS class on alternate row.
        if (e.Row.RowType == DataControlRowType.DataRow &&
                  e.Row.RowState == DataControlRowState.Selected)
            e.Row.CssClass = "selected";

    }

Open in new window

CSS:

.grid-view
{
   padding: 0;
   margin: 0;
   border: 1px solid #fff;
   font-family: "Verdana, Arial, Helvetica, sans-serif, Trebuchet MS";
   font-size: 0.9em;
}

.grid-view tr.header
{
   color: Blue;
   background-color: White;
   height: 25px;
   vertical-align: middle;
   text-align: center;
   font-weight: bold;
}



.grid-view tr.normal
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}




.grid-view tr.alternate
{
    background-color: White;
    color: Blue;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}



.grid-view tr.selected
{
    background-color: Green;
    color: White;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}


.grid-view tr.selected:hover
{
    background-color: White;
    color: Green;
    font-weight: bold;
    height: 25px;
    vertical-align: middle;
    text-align: center;
}

.grid-view tr.alternate:hover, .grid-view tr.alternate:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

.grid-view tr.normal:hover, .grid-view tr.normal:hover a {
    background-color: Blue;
    color: White !important;
    font-weight: bold;
    height: 25px;
    text-align: center;
    vertical-align: middle;
}

Open in new window