Unable to dynamically highlight a row in a GridView using JavaScript

Question

Unable to dynamically highlight a row in a GridView using JavaScript

Performing this task used to be simple, but it was my first time dynamically generating the GridView. Each cell in the GridView is styled with its own CSS when created. In the RowDataBound event, I set up the highlighting as usual:

e.Row.Attributes.Add("onmouseover", "this.style.cursor='pointer';HilightRow(this);")
e.Row.Attributes.Add("onmouseout", "HilightRow(this);")

On the scripting side, I have the following:

var curSelRow = null;
function HilightRow(row) {
    var selRow = row;
    var i;
        .
        .
    if (selRow != null) {
        curSelRow = selRow;
        curSelRow.style.backgroundColor = '#FFEEC2';
    }
}

I have checked the script and it seems to be working fine with no errors. When examining the row in question, it displays the correct background color value (#FFEEC2). However, the hover effect does not change the row's color. This issue is perplexing to me. I am unsure why this is happening because I have done similar tasks many times before without any problems, although those gridviews were not dynamic like this one.

javascript gridview dynamic mouseover

Answer 1

Answer №1

It seems like there might be a small oversight in your code - both the over and out functions seem to be assigning the same background color (#FFEEC2).

Could it be possible that both onmouseover and onmouseout events are triggering the same function, HilightRow(this)? Maybe the initial onmouseover event is responsible for setting the background color?

Answer 2

It seems like there might be a small oversight in your code - both the over and out functions seem to be assigning the same background color (#FFEEC2).

Could it be possible that both onmouseover and onmouseout events are triggering the same function, HilightRow(this)? Maybe the initial onmouseover event is responsible for setting the background color?

Answer 3

Answer №2

One effective approach would be to assign a specific class to the row, such as "Highlightrow", and keep script separate from HTML elements to maintain structure and behavior segregation.


var hiliclass = "Hilightrow";
var trhilight = document.getElementById("mytable").getElementsByTagName("tr");
var len = trhilight.length;
for (var i = 0; i < len; i++) {
    if (trhilight[i].className == hiliclass) {
        trhilight[i].onmouseover = function() {
            trhilight[i].style.backgroundColor = "red";
        }
        // additional logic here
    }
}

To ensure cleaner code organization, consider placing the script within a function and invoking it using window.onload or a self-invoking function like below:


function highlightrows() {
    // your code here
}();

Answer 4

One effective approach would be to assign a specific class to the row, such as "Highlightrow", and keep script separate from HTML elements to maintain structure and behavior segregation.


var hiliclass = "Hilightrow";
var trhilight = document.getElementById("mytable").getElementsByTagName("tr");
var len = trhilight.length;
for (var i = 0; i < len; i++) {
    if (trhilight[i].className == hiliclass) {
        trhilight[i].onmouseover = function() {
            trhilight[i].style.backgroundColor = "red";
        }
        // additional logic here
    }
}

To ensure cleaner code organization, consider placing the script within a function and invoking it using window.onload or a self-invoking function like below:


function highlightrows() {
    // your code here
}();

Answer 5

Answer №3

After some trial and error, I finally managed to solve the issue at hand. The key is to clear the current style applied to a row before applying new highlighting. This can be achieved by resetting the background color of

curSelRow.cells[i].style.backgroundColor = ''

. Once you've done that, you can then proceed to highlight the row using

curSelRow.style.backgroundColor = '#FFEEC2'

, effectively setting it to the desired color.

Furthermore, it's crucial to store each cell's original style before making any changes, and then restore these styles when the cursor moves away from the row. Failure to do so may result in all rows appearing white when hovered over. Remember to reset the highlighted row's style prior to reverting each cell back to its initial state.

Dealing with these nuances can certainly be quite frustrating!

Answer 6

After some trial and error, I finally managed to solve the issue at hand. The key is to clear the current style applied to a row before applying new highlighting. This can be achieved by resetting the background color of

curSelRow.cells[i].style.backgroundColor = ''

. Once you've done that, you can then proceed to highlight the row using

curSelRow.style.backgroundColor = '#FFEEC2'

, effectively setting it to the desired color.

Furthermore, it's crucial to store each cell's original style before making any changes, and then restore these styles when the cursor moves away from the row. Failure to do so may result in all rows appearing white when hovered over. Remember to reset the highlighted row's style prior to reverting each cell back to its initial state.

Dealing with these nuances can certainly be quite frustrating!

Unable to dynamically highlight a row in a GridView using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Combine an array of arrays with its elements reversed within the same array

Transforming an array of strings into a visual representation

When a user clicks, they will be directed to the specific product page using Angular UI router

Parsing JSON data using if/else conditions

What are some cookie serialization techniques in JavaScript and PHP?

The click event for getelementbyid() function is malfunctioning

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

Utilizing Angular 11's HostListener to capture click events and retrieve the value of an object

Slide containing Ionic list views

The Vue 3 router seems to be malfunctioning and I am quite puzzled as to why

Can Selenium in JavaScript be used to retrieve child elements from a webpage?

Structure of Sequelize calls

Saving the object returned by the useRef hook into the Redux state

Leverage the Power of AngularJS to Harness Local

Set maximum size for background image in div

The feature to select a cell on a Bootstrap table is not functioning as expected

Issue with mobile.changePage() function not executing as expected

How can I send a form without having the page reload using a combination of AJAX, PHP

disable the react .hover behavior once clicked

I am experiencing difficulty with Three.js rendering textures from my planet constructor function