asked on

SharePoint List column color code

Please look at the following list. The color code works but when you paginate, the color coding is gone. Also, I notice that the tab for my list settings is gone and only appears when I remove the code for the color coding.

http://www.isogunro.com/demos/Lists/IceCreamTrucks/AllItems.aspx

Here's the code:

<script type="text/javascript">
$(document).ready(function() {
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["In Progress"]) >= 0; }).css("background-color", "#008000"); 
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["Completed"]) >= 0; }).css("background-color", "#FFFF00"); 
  $("td.ms-vb2").filter(function() { return $.inArray( $(this).text(), ["Canceled"]) >= 0; }).css("background-color", "#FFA500"); 
});
</script>

Open in new window

How can I modify this to fix those two issues>

Jamie McAllister

The code is running on Document.Ready but pagination doesn't fire that event as it's a partial page load. You could try hanging your method call off the pagination button.

Not sure about the missing tab without being able to mess with the code.

Julian Hansen

It is not that simple - the pagination click results in an AJAX call back to the server which means even if you trap the click on the pagination button you have to wait for the AJAX to complete and update the table before running the code again.

What you want to do is pick up the ajaxComplete event - not sure if this is going to work in the SP implementation you are using but you can give it a go

function ColourCells()
{
  $('td.ms-vb2:contains("In Progress")').css({backgroundColor: '#008000'});
  $('td.ms-vb2:contains("Completed")').css({backgroundColor: '#FFFF00'});
  $('td.ms-vb2:contains("Canceled")').css({backgroundColor: '#FFA500'});
}

$(function() {
  ColourCells();
  $( document ).ajaxComplete(function() {
    ColourCells();
  });
});

Open in new window

The above works in a JQuery AJAX ($.ajax) implementation.

Failing that a hack would be to use the setTimeout function to execute the ColourCells function after a specified time period.

Isaac

ASKER

Neither one of those options worked

Julian Hansen

Neither one of those options worked

It is advisable when responding to a post to provide as much information as possible. Saying it did not work does not really help take the process forward. For instance the setTimeout option - depends entirely on implementation - as does the first option. Giving us some code to look at or even a page that has the two options implemented would go a long way to finding a solution.

Basically, saying it does not work does not really give us any way to move forward.

Can you provide some more details on errors , code snippets, links to pages etc.

Isaac

ASKER

You're right JulianH. Sorry about that.

Here's the code I implemented

function ColourCells()
{
  $('td.ms-vb2:contains("In Progress")').css({backgroundColor: '#008000'});
  $('td.ms-vb2:contains("Completed")').css({backgroundColor: '#FFFF00'});
  $('td.ms-vb2:contains("Canceled")').css({backgroundColor: '#FFA500'});
}

$(function() {
  ColourCells();
  $( document ).ajaxComplete(function() {
    ColourCells();
  });
});

Open in new window

Here's the site
http://www.isogunro.com/demos/Lists/IceCreamTrucks/AllItems.aspx

I did use the developer tool but couldn't find anything that jumped out.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac

ASKER

Your solution seemed to work.

>>What component are you using for the Grid?>>
What do you mean?

Can you please explain the major difference between onclick an .on?
I have not been able to find a good explanation online, well, one that I understand.

Julian Hansen

onclick is specifically an event handler for the click event.

.on binds an event to an element.

Not sure if that is what you were asking.

.on is the preferred method to use - it allows for events to be handled for dynamic elements. In other words you use .on to bind an event to an element by way of its parent so that if the contents of the parent change the event will still fire as opposed to binding directly to the element itself - which if removed removes the event handler with it.