Solved

Jquery ASP Gridview Loop Rows Exclude Specific Columns?

Posted on 2014-02-04
13
1,058 Views
Last Modified: 2014-02-05
I have ASP Gridview I need to loop through all rows except the last row and all columns except the first 3 columns. The dynamic column count will vary from 10 to 15.
0
Comment
Question by:WorknHardr
  • 6
  • 6
13 Comments
 
LVL 55

Expert Comment

by:Julian Hansen
ID: 39834723
Can you post some code of what you have so far?

With Jquery it can be as simple as
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  var rows = $('#grid tr');
  for(i=0;i<rows.length-1;i++) {
    var cols = $('#grid tr:eq(' + i + ') td');
    for(j=3;j<cols.length;j++) {
      var cell = $('#grid tr:eq(' + i + ') td:eq(' + j + ')');
      $('#result').append(cell.html());
    }
  }
});

</script>
<style type="text/css">
</style>
</head>
<body>
<table id="grid">
  <tr>
    <td>Row1 Col 1</td>
    <td>Row1 Col 2</td>
    <td>Row1 Col 3</td>
    <td>Row1 Col 4</td>
    <td>Row1 Col 5</td>
  </tr>
  <tr>
    <td>Row2 Col 1</td>
    <td>Row2 Col 2</td>
    <td>Row2 Col 3</td>
    <td>Row2 Col 4</td>
    <td>Row2 Col 5</td>
  </tr>
  <tr>
    <td>Row3 Col 1</td>
    <td>Row3 Col 2</td>
    <td>Row3 Col 3</td>
    <td>Row3 Col 4</td>
    <td>Row3 Col 5</td>
  </tr>
  <tr>
    <td>Row4 Col 1</td>
    <td>Row4 Col 2</td>
    <td>Row4 Col 3</td>
    <td>Row4 Col 4</td>
    <td>Row4 Col 5</td>
  </tr>
</table>
<div id="result"></div>
</body>
</html>

Open in new window

0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 405 total points
ID: 39835181
Have a look at this:

//loop through each of the Table Rows except the last
$('tr:not(:last-child)').each(function() {
    $(this).addClass('red')

    //loop through each of the TDs, except the first 3 - gt (greater than) is zero-based, so 2 is third
    $('td:gt(2)', this ).each(function() {
        $(this).addClass('white');
    });
});

Open in new window

Here's a working demo : http://jsfiddle.net/ChrisStanyon/H5vjR/
0
 

Author Comment

by:WorknHardr
ID: 39835601
I placed my table in jsfiddle and get the top two rows as red. Must be the TH tags?

<table cellspacing="0" rules="all" border="1" id="GridView1" ">
<tr align="center" style="font-family:Arial;font-size:12px;">
<th scope="col">State</th>
<th scope="col">List Name</th>
<th scope="col">EffDate</th>
<th scope="col">Jones-Bob</th><th scope="col">&nbsp;</th><th scope="col">Smith-Jim</th><th scope="col">
        Doe-Jane</th>
		</tr><tr align="center" style="font-family:Arial;font-size:10px;">
			<td>AK</td><td>List 1</td><td>7/31/2012</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>
            &nbsp;</td>
		</tr><tr align="center" style="font-family:Arial;font-size:10px;">
			<td>AK</td><td>List 1b</td><td>7/26/2013</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>
            Not Priced</td>
		</tr><tr align="center" style="background-color:Gainsboro;font-family:Arial;font-size:10px;">
			<td>AL</td><td>List 2</td><td>7/1/2012</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>$90.00</td>
		</tr><tr align="center" style="background-color:Gainsboro;font-family:Arial;font-size:10px;">
			<td>AL</td><td>List 2b</td><td>11/15/2013</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>$101.00</td>
		</tr><tr align="center" style="font-family:Arial;font-size:10px;">
			<td>FL</td><td>List 3</td><td>4/1/2013</td><td>&nbsp;</td><td>&nbsp;</td><td>$20.00</td><td>$92.00</td>
		</tr>
	</table>

Open in new window

0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39835627
Give us a link to the fiddle and tell us what's wrong.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39835633
The code I showed you colours all the rows red except the last one, as per your original question.
0
 

Author Comment

by:WorknHardr
ID: 39835656
>> except the last row
>> except the first 3 columns.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39835683
The code I provided will loop through all the rows except the last one, and for each row it loops through, it will loop through all the TDs except the first 3. That's exactly what you asked for so I'm struggling to see what the problem is.

Can you be a little clearer on what you need.

I've updated the fiddle
0
 

Author Comment

by:WorknHardr
ID: 39835756
I must have VS2010 debug issues, works in js fiddle...
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39835788
In the HTML you posted, you had the row background colour set inline (style="background-color:Gainsboro;") so adding a class that set the background colour will get ignored - inline styles take precedence over class styles, so although the .red class was being added to each of the rows, it had no effect on the last 2.

The fiddle example I've just updated has removed that styling and instead of adding the class to the rows, it now only adds it to the cells.

Maybe why you had a problem with your version :)
0
 

Author Comment

by:WorknHardr
ID: 39835829
I have dynamic columns built in the code-behind like so. It seems the HtmlTextWriter is do some auto-formatting with the row.Backcolor.... Help


 protected override void Render(HtmlTextWriter writer)
        {
            if (GridView1.Rows.Count != 0)
            {
                Table gridView = (Table)GridView1.Controls[0];

                foreach (GridViewRow row in GridView1.Rows)
                {
                    row.Cells[6].Text = Convert.ToDateTime(row.Cells[6].Text).ToShortDateString();

                    int rowIndex = gridView.Rows.GetRowIndex(row);

                    if ((rowIndex - 1) % 4 > 1) //Every 2 rows white
                    {
                        row.BackColor = System.Drawing.Color.Gainsboro;
                    }
                }
            }
            base.Render(writer);
        }
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39835884
Help with what?

You clearly have a line in there that sets the background colour of a row (TR). If you don't want it, remove it (row.BackColor = System.Drawing.Color.Gainsboro;)

If you want to override the colour for the selected TDs then just add the background colour to the TDs, and not the TRs.

Can you explain in clear terms exactly what you want. I've shown you the code to select all rows except the last, and all cells except the first 3 as you requested. You haven't at any point told us what you intend to do with the selected cells.

If you want specific answers, you're going to have to ask specific questions
0
 

Author Comment

by:WorknHardr
ID: 39835901
Ok, its working now. Nuts, I had to reboot my dev pc, oh well, thanks for ALL your help... thx
0
 

Author Closing Comment

by:WorknHardr
ID: 39835908
Excellent, thx again...
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question