Solved

How to you change a gridview rows background color for chrome

Posted on 2014-11-14
3
353 Views
Last Modified: 2015-01-02
I am using vb.net.
I have a gridview with a checkbox in column 0. When the checkbox is selected it fires a script that changes the background color of the row. It works fine in internet explore but not in chrome. I set the checkboxes onclick in the gridview's rowdatabound event. Here is my script code
<script type="text/javascript">
    //variable that will store the current color of the selected row
    var RowColor;
    function ChangeRowColor(row) {
        //get the color of the selecte row
        RowColor = document.getElementById(row).currentStyle.backgroundColor;
        // if current color is white then change it to blue
       if (RowColor == "#ffffff") {
            // change the color to blue
           document.getElementById(row).style.backgroundColor = "#3399FF";
        }
        // if current color is white then change it to blue  
        else if (RowColor == "white") {
        document.getElementById(row).style.backgroundColor = "#3399FF";
        }
        else
        //  current color is blue then change it to white
        {
            document.getElementById(row).style.backgroundColor = "#ffffff";


        }
    }
     </script>

How do I get this to work in chrome?
0
Comment
Question by:whiwex
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
ID: 40444106
Chrome doesn't support currentStyle, that's IE only. You could probably use getComputedStyle() (also supported by IE9+) but I think it's a bit unnecessary (it's relatively costly) because on subsequent calls for the same row it would always be sufficient to check .style as that is set by your function. So another option would be to check for some defaults that you may encounter on the first call for a row. Or even make sure a background color is always set in the style but that is not recommended for another reason. In the end what you should probably be doing is not set background-color but toggle a 'selected' class which defines the alternate color. You wouldn't happen to be using jQuery on this page, would you? That would make it a lot easier. But there are implementations to be found to toggle classes without jQuery.

Anyway, option 1 (used directly here, alternatively you could use a cross-browser helper function from the web, for example at the bottom of this quirksmode.org page):
            if (document.getElementById(row).currentStyle) {
                RowColor = document.getElementById(row).currentStyle.backgroundColor;
            } else {
                RowColor = window.getComputedStyle(document.getElementById(row)).backgroundColor;
            }

Open in new window

and option 2, use style directly and check for more initial values (may be needed anyway, also in the above code, depending on the rest of your page/css):
            RowColor = document.getElementById(row).style.backgroundColor;
            // if current color is white then change it to blue 
            if (RowColor == "#ffffff" || RowColor == "white" || RowColor == "transparent" || RowColor == "" || RowColor == "rgb(255, 255, 255)" || RowColor == "rgba(0, 0, 0, 0)") {
                // change the color to blue
                row.style.backgroundColor = "#3399FF";
            }
            else
            //  current color is blue then change it to white
            {
                row.style.backgroundColor = "#ffffff";
            }

Open in new window

To check the actual value it's always a good idea to use the tools at your disposal, specifically the IE/Chrome developer tools (F12) can show you what's going wrong with your script.

And like I said earlier, if it's an option to use jQuery there's a much simpler solution:
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('input:checkbox').click(function () {
                $(this).closest('tr').toggleClass('selected');
            });
        });
     </script>
     <style>
        .selected {
            background-color: #3399FF;
        }
     </style>

Open in new window

Note that this handles clicking on any checkbox so it would need some work to fit into your page (maybe just remove your current change/click handler code) but hopefully the basic idea is clear.

If you need help implementing any of these solutions in your page, please share your relevant code or generated html (from your browser's "view source") so that it's clearer where it would need to go.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

718 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