Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    How to highlight a GridView row, then after 1 sec set it to normal

    I have a gridview which data is populated from Access. And to html button to start the highlighting on onclick event.

    What I want is to highlight its first row, then after 1 second, set it to normal and highlight the next row. Repeat for all rows.

    Below is the code that I'm using to highlight all rows:

    Code:
    function setToHighlight() {
                var objGridView = document.getElementById("HistoryGridView") 
                if (objGridView.rows.length > 0) {
                    for (i = 0; i < objGridView.rows.length; i++) {
                        //Apply your CSS class name here
                        objGridView.rows[i].className = "even";
                    }
                }
            }
    My Gridview :
    Code:
    <asp:GridView ID="HistoryGridView" runat="server" PageSize="5" ShowHeader="False" 
                          AutoGenerateColumns="False">
                        <Columns>
                            <asp:BoundField DataField="Latitude" />
                            <asp:BoundField DataField="Lontitude" />
                        </Columns>
                    </asp:GridView>
    Last edited by vanphamvn; 06-01-2012 at 11:43 AM. Reason: update

  • #2
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Please paste your gridview markup (HTML and CSS) as well, at the very least. Or paste the whole page code (HTML, CSS, and JS), or a link to the live web page. Then it will be easier for someone to help you here.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    vanphamvn (06-01-2012)

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    I meant the browser source code...not the ASP.NET stuff....Javascript manipulates your code on the client side after it is compiled...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,845
    Thanks
    21
    Thanked 157 Times in 148 Posts
    Well assuming your gridview is similar to the one in my example code below, then something like this could work:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>TITLE</title>
      <style type="text/css">
    /*<![CDATA[*/
      table.c1 {border-collapse:collapse;}
      /*]]>*/
      </style>
    	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    	<script type="text/javascript">
    		var rowNum = 0;
    		function highlightRow()
    		{
    			$("#GridView1 tr").each(function(){
    				$(this).css("background-color", "")
    			});
    			if (++rowNum < $("#GridView1 tr").length-2)
    			{
    				$("#GridView1 tr:eq("+rowNum+")").css("background-color", "yellow");
    				setTimeout(function(){highlightRow();}, 1000);
    			}
    			else
    			{
    				rowNum = 0;
    			}
    		}
    		$(document).ready(function(){
    			$("#highlighter").click(highlightRow);
    		});
    	</script>
    </head>
    
    <body>
      <p><input type="button" id="highlighter" value="highlight" /></p>
      <table cellspacing="0" rules="all" border="1" id="GridView1" class="c1">
        <tr>
          <th scope="col">ProductID</th>
    
          <th scope="col">ProductName</th>
    
          <th scope="col">QuantityPerUnit</th>
    
          <th scope="col">UnitPrice</th>
    
          <th scope="col">UnitsInStock</th>
    
          <th scope="col">Discontinued</th>
        </tr>
    
        <tr>
          <td>1</td>
    
          <td>Chai</td>
    
          <td>10 boxes x 20 bags</td>
    
          <td>18.00</td>
    
          <td>39</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl02_ctl00" type="checkbox" name="GridView1$ctl02$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>2</td>
    
          <td>Chang</td>
    
          <td>24 - 12 oz bottles</td>
    
          <td>19.00</td>
    
          <td>17</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl03_ctl00" type="checkbox" name="GridView1$ctl03$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>3</td>
    
          <td>Aniseed Syrup</td>
    
          <td>12 - 550 ml bottles</td>
    
          <td>10.00</td>
    
          <td>13</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl04_ctl00" type="checkbox" name="GridView1$ctl04$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>4</td>
    
          <td>Chef Anton's Cajun Seasoning</td>
    
          <td>48 - 6 oz jars</td>
    
          <td>22.00</td>
    
          <td>53</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl05_ctl00" type="checkbox" name="GridView1$ctl05$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>5</td>
    
          <td>Chef Anton's Gumbo Mix</td>
    
          <td>36 boxes</td>
    
          <td>21.35</td>
    
          <td>0</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl06_ctl00" type="checkbox" name="GridView1$ctl06$ctl00" checked=
          "checked" disabled="disabled" /></span></td>
        </tr>
    
        <tr>
          <td>6</td>
    
          <td>Grandma's Boysenberry Spread</td>
    
          <td>12 - 8 oz jars</td>
    
          <td>25.00</td>
    
          <td>120</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl07_ctl00" type="checkbox" name="GridView1$ctl07$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>7</td>
    
          <td>Uncle Bob's Organic Dried Pears</td>
    
          <td>12 - 1 lb pkgs.</td>
    
          <td>30.00</td>
    
          <td>15</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl08_ctl00" type="checkbox" name="GridView1$ctl08$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>8</td>
    
          <td>Northwoods Cranberry Sauce</td>
    
          <td>12 - 12 oz jars</td>
    
          <td>40.00</td>
    
          <td>6</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl09_ctl00" type="checkbox" name="GridView1$ctl09$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td>9</td>
    
          <td>Mishi Kobe Niku</td>
    
          <td>18 - 500 g pkgs.</td>
    
          <td>97.00</td>
    
          <td>29</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl10_ctl00" type="checkbox" name="GridView1$ctl10$ctl00" checked=
          "checked" disabled="disabled" /></span></td>
        </tr>
    
        <tr>
          <td>10</td>
    
          <td>Ikura</td>
    
          <td>12 - 200 ml jars</td>
    
          <td>31.00</td>
    
          <td>31</td>
    
          <td><span class="aspNetDisabled" title="Discontinued"><input id=
          "GridView1_ctl11_ctl00" type="checkbox" name="GridView1$ctl11$ctl00" disabled=
          "disabled" /></span></td>
        </tr>
    
        <tr>
          <td colspan="6">
            <table>
              <tr>
                <td><span>1</span></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$2')">2</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$3')">3</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$4')">4</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$5')">5</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$6')">6</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$7')">7</a></td>
    
                <td><a href="javascript:__doPostBack('GridView1','Page$8')">8</a></td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </body>
    </html>
    Last edited by chump2877; 06-01-2012 at 06:09 AM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • Users who have thanked chump2877 for this post:

    vanphamvn (06-01-2012)

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thank you very much. It's very helpful.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •