Solved

How to you change a gridview rows background color for chrome

Posted on 2014-11-14
3
333 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
3 Comments
 
LVL 35

Accepted Solution

by:
Robert Schutt earned 500 total points
Comment Utility
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
C3-->D3 Line Chart 4 16
Limiting string to two deciamls 18 30
Round up to 100% in .NET 10 41
Showdialog 8 20
Creating an analog clock UserControl seems fairly straight forward.  It is, after all, essentially just a circle with several lines in it!  Two common approaches for rendering an analog clock typically involve either manually calculating points with…
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…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now