Gridview alternate shading, c# codebehind

I use the following code for conditional formatting on gv1 (it works ok). I want to apply alternate row-shading on a different gridview basically using a modified version of the following code.

Question: How can I revise this code to apply alternate row-shading on new gridview (gv2)?

Thank you.
  protected void gv1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            e.Row.CssClass = "headerBracketGround";
        }
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
           e.Row.CssClass = "highlightBracketground";
           var val = e.Row.Cells[2].Text;
          var snglVal = Single.Parse(val);
          e.Row.CssClass = snglVal > 0.0 ? "highlightBracketground" : "bracketground";
        }
    }

Open in new window

LVL 34
Mike EghtebasDatabase and Application DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You use nth child: odd
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

I can give a better example later
0
Shaun KlineLead Software EngineerCommented:
If you only care about alternating colors, you can assign a CSS style to the alternating row as such:
<asp:gridview id="YourGridView" runat="server">        
    <RowStyle CssClass="Row" />
    <AlternatingRowStyle CssClass="AltRow" />
</asp:gridview>

Open in new window

0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Scott Fell (padas),
Not helpful.

Shaun Kline,
I am looking for codebehind solution.
---------

Thanks
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Shaun KlineLead Software EngineerCommented:
If you wish to use a code method, you need only change
 if (e.Row.RowType == DataControlRowType.DataRow)
{
...
}

Open in new window

block of code to use the e.Row.RowIndex property and the modulus routine to determine which row gets the normal CSS style and which row gets the alternating CSS style.
0
Shaun KlineLead Software EngineerCommented:
The code would look something like this:
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.CssClass = e.Row.RowIndex % 2 == 1 ? "alternatingCSSStyle" : "normalCSSStyle";
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
I was looking for   e.Row.CssClass = e.Row.RowIndex % 2 == 1 ?...

brb
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Sorry that didn't work for you.  This is really a front end issue.  It is much easier to think of your rendered output.


You end up with a table like below and add the following css and your good as shown in this sample http://jsbin.com/necipi/1/edit?html,output.
 tr:nth-child(even){background-color:#ccc;}

Open in new window

<table id="abc">
    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>

    <tr>
      <td>row 1</td>
    </tr>
  </table>

Open in new window

0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
Thank you.

Scott Fell (padas), I was looking for codebehind in c#.

in the aspx file, i will have no more than:
  <form id="form1" runat="server">
    <div>
    <asp:GridView runat="server" ID="grdHighLight"  onrowdatabound="grdHighLight_RowDataBound" CellSpacing="-1" GridLines="None" >
            
    </asp:GridView>
    </div>
    </form>

Open in new window


I mean no <table>, <tr> etc.
0
Shaun KlineLead Software EngineerCommented:
I agree with Scott that this should be handled in the front-end page, and not in the code behind. The main reason is that if you ever need to use a different style class, you need to re-code and re-deploy, while using a CSS approach or "coding" the CSS into your aspx page would not necessarily require a re-deployment of the entire application, just the parts that changed.

One note: the nth-child is a CSS3 enhancement. If you need to support older browsers, it may not work for you. (http://www.w3schools.com/cssref/sel_nth-child.asp)
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I think it is safe to not support ie7 and below at this point unless your client is a business with mostly XP and no plans to change any time soon.  http://caniuse.com/#search=nth-child
0
Mike EghtebasDatabase and Application DeveloperAuthor Commented:
The issue is that, I have to create the gridview using code behind as opposed to have it done my gridview control on the toolbar. This is because, using gridview control from toolbar, returns lots on inline css that html5 doesn't like.
'
So, in order for me to have html5 complaint project, I have to have all gridview related tags (except a single tage I showed before) in codebehind.

Of course, if any cahnges later, I do it from css file.

Mike
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.