Hover (MouseOver) Highlight and Click to stay highlighted in a SharePoint list…

While I was working in CustomWare I had the great pleasure of working with a guy called Sukri, a SharePoint developer. He’s the kind of guy you’d mention something to, and it would tick over in the back of his mind, while he was doing his normal day-to-day work…. then a few days later, he’d come to you and say – "By the way, I know how we can address your client’s requirements". Like he did for one of our clients… we were going through the client’s needs, and we talked about how the client wanted to be able to present financial data in SharePoint, then allow the user to hover over and highlight a row of data… and allow the user to click the row and make it stay highlighted.

He came up with a script that allowed you to do both – then one of the other guys, Ben, decided to enhance it so you could select and deselect multiple rows. Here’s a screenshot of how it looked on the screen…

Code:

<script language="javascript" type="text/javascript">
var preRow;
var preClassName;
var orgBColor;
var hoverColor = "#ffcc99";
var selectedColor = "#d2d2ff";
var SPGridViewGuid = "{<<LIST GUID>>}-{<<LIST VIEW WEB PART GUID>>}"; 

_spBodyOnLoadFunctionNames.push("addSelectedRowEvent");
function addSelectedRowEvent() {
// Get all TABLE tag objects
var oTables = document.getElementsByTagName("TABLE");
for (var i=0;i < oTables.length; i++ )
{
  // Filter where table id equal to SPGridView guid
  if (oTables[i].id == SPGridViewGuid)
       {
        // Get all TR tag objects
        var oRows = oTables[i].getElementsByTagName("TR");
        for (var j=0;j < oRows.length; j++ )
   {
    if (j != 0)
    {
     // Add client event onMouseOver
     oRows[j].onmouseover = function() {
      this.style.backgroundColor = hoverColor;
     }
     // Add client event onMouseOut
     oRows[j].onmouseout = function() {
      this.style.backgroundColor = "";
     }
     // Add client event onClick
     oRows[j].onclick = function() {
      // If previous row is not null 

      if(typeof(preRow) != 'undefined')
      { 

       // Assign previous stored background color and class name to TR object
//Code below has been commented out prior to demo
//
//preRow.bgColor = orgBColor; //preRow.className = preClassName; // Change font weight // try{ChangeFontWeight(preRow,'normal');}catch(e){;} } // If this row is alternating row if(this.className != "") { // Assign previous alternating class to TR object preClassName = this.className; this.className = ""; } // Assign new background color to TR object orgBColor = this.bgColor; if(this.bgColor == "#d2d2ff") { this.bgColor = "white"; try{ChangeFontWeight(this,'normal');}catch(e){;} } else { this.bgColor = selectedColor; // Change font weight try{ChangeFontWeight(this,'bold');}catch(e){;} } preRow = this; } } } } } } function ChangeFontWeight(selectedRow,fontWeight) { ; for (i=0;i<selectedRow.cells.length;i++) { selectedRow.cells(i).style.fontWeight = fontWeight; } } </script>

How it works:
The code you see above affects the HTML that is already on the page, so you need to position this at the end of the page below the list you are trying to modify. Because it is restricted to a list and a view, you can put it on a standard page (such as default.aspx) and it will only affect one of the views on the page.

Configuration:
The only thing you need to do before using this script is to replace <<LIST GUID>> with the list GUID, and <<LIST VIEW WEB PART GUID>> with the web part GUID. you get both of these from the URL when editing a "View" – all you need to do is strip off the %7B and &7D, and the %2D’s replace with hyphens " – ".

image

image

Deployment:
I recommend creating a library and storing this as a .htm file – then referencing it from the Content Editor Web Part. Place the CEWP after the list view, and mark it as hidden. Change the title to something meaningful (such as Sukri’s cool mouseover highlighting and multiclick code) and you’re done!

image

Storing the code as a separate file in a helper library gives you maximum flexibility, minimum change (no unghosting of pages) and version control of your code.

Issues:
The only problem with the code is that it does not capture what the original background colour was – so if you click and unclick a row, it stays white. Not so bad if your list view is white rows, but an issue if you have alternating background colours. Ben was working on getting that resolved too, but he didn’t get it debugged in time for the demo (check the highlighted part above). If anyone can see where the issue in the code is, please let me know 🙂

Cheers!

Brad

Advertisements

About Brad Saide

I'm a SharePoint consultant. I'm also slowly going bald, seem to have a permanent spare tyre around my waist and enjoy socialising with friends over a beer or 10. The last 2 may possibly be related. Started working with SharePoint when the first version was in limited beta release (participated in the Technology Adoption Program while at Woolworths) and have been committed to the adoption of the technology as a business enabler ever since.
This entry was posted in Uncategorized. Bookmark the permalink.

3 Responses to Hover (MouseOver) Highlight and Click to stay highlighted in a SharePoint list…

  1. Unknown says:

    The color changes do not persist. That is, if I go to another list, then come back to the list with this feature, the colors are gone.Am I doing something wrong?

  2. Brad says:

    Hi "No Name".No, the colour changes do not persist. There is no section within the code to write to a session variable or a cookie (although I suppose it could be done).This is designed to be used in a list with many rows of data (eg lots of columns of numbers). – it\’s UI enhancement.

  3. Anil says:

    It doesn’t work for GroupBy columns.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s