Hello guys,

I would like to mark a whole row in red, but depending on a specific value in a row, e.g. completed. Then mark the row in red.

How can I fulfill that?

Best regards

Matthias

Hi Matthias,

I have created a JavaScript based generic solution for you.

All you need to add this code in content editor web part.

function applyJS()
{
var theTDs = document.querySelectorAll(".ms-vb-title");   
    var i=0;   
    var TDContent = " ";   
    var indexFinder = ""; 
    var tLength = theTDs.length; 
    while (i < theTDs.length)  
    {       
        try  
        {          
            
		if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'completed')
		{
			theTDs[i].parentNode.style.backgroundColor = '#ccc';
		}
		
		if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'progress')
		{
			theTDs[i].parentNode.style.backgroundColor = 'yellow';
		}	
        }   
        catch(err){}   
        i=i+1;   
    };   
 }

_spBodyOnLoadFunctionNames.push("applyJS"); 

It gives output this way,



EXplanation of Code:

you just need to find the column status by writing the next sibling of title column.

In above example, status column is 5 columns away from Title column that's why I have used,

nextSibling.nextSibling.nextSibling.nextSibling.nextSibling for total 5 times, so change it accordingly.

Also, color is as per status, 

if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'completed' ==> apply grey shade

if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'progress' ==> apply yellow shade.

Please reply in case of issues and mark as helpful if it really helped you,

Hi Matthias,

Following url also explains another way of achieving the same.

http://www.c-sharpcorner.com/UploadFile/sagarp/sharepoint-2013-list-column-status-wise-change-row-color-usi/

http://www.idubbs.com/blog/2014/js-link-highlighting-a-row-with-csr/

Regards  Roy Joyson
Please remember to mark your question as "answered"/"Vote helpful" if this solves/helps your problem.

Hello guys,

the highlight function is working, but I have problems when I try to use the Quickedit mode.

Then I get an error message. How could we avoid this? Is it not possible to highlight the quickedit view?

Best regards

Matthias

Hello,

is the class .ms-vb-title the class for the Title in SP 2013? How can I find the class for other objects? This code is also working on the quick edit view?

Best regards

Matthias

This is the error message, when I stop editing and I used another function to fulfill the highlighted rows, but it won't work on a datasheet view (QuickEdit)

TypeError: Unable to get value of the property 'style': object is null or undefinedTypeError: Unable to get value of the property 'style': object is null or undefined

Best regards

Matthias

I have modified my code for null check, you can tweak too :)

function applyJS()
{
var theTDs = document.querySelectorAll(".ms-vb-title");   
    var i=0;   
    var TDContent = " ";   
    var indexFinder = ""; 
    var tLength = theTDs.length; 
    while (i < theTDs.length)  
    {       
        try  
        {          
            
		if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'completed')
		{
			if(theTDs[i].parentNode)
			{
				theTDs[i].parentNode.style.backgroundColor = '#ccc';
			}
		}
		
		if(theTDs[i].nextSibling.nextSibling.nextSibling.nextSibling.nextSibling.innerText == 'progress')
		{
			if(theTDs[i].parentNode)
			{
				theTDs[i].parentNode.style.backgroundColor = 'yellow';
			}
		}	
        }   
        catch(err){}   
        i=i+1;   
    };   
 }

_spBodyOnLoadFunctionNames.push("applyJS"); 

But how can I finde the right class? In my SharePoint I can't find .ms-vb-title

It would be nice fi you could explain that to me.

Best regards

Matthias