Hi All,here is some JQuery Stuff that will help you to highlight rows of SharePoint List items based on some condition.
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'><\/script>");
}
</script>
<script>$(document).ready(function(){
$Text = $("td .ms-vb2:contains('Sales')");
$Text.parent().css("background-color", "green");
$Text =$("td .ms-vb2:contains('Account')");
$Text.parent().css("background-color", "orange");
});
</script>
above JQuery code will highlight if Column has 'Sales' then row will highlight with color green.if column has value Account then it will highlight with orange color.
Look at second Post http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html
12 comments:
Hi
I try to change list rows by adding the javascript in content editor webpart. it's not working
Please help me to how to work with this
Regards
Chakravarthi
Can you please help me how hilight rows with respective colors using this Script.
Please help by providing steps
It's Nice !!!
Do u have any Information abt how to use Yahoo UI Lib. in sharepoint
hi all,
this here you need to download jQuery.js from
http://docs.jquery.com/Downloading_jQuery
you need to download jQuery.1.3.1.js rename this file to jQuery.js and put it in layouts folder and referece this javascript in code as i did in this code..
now as you can see in the code I have find a colums that contains value "sales" and highlight it in green , find account in column and highlight in orange. same way you can do in the list..
for simply way try to simulate the list as given in above image.. and apply this code you will understand how to do it..
Regards,
SharePointKings
I can't get this working in SharePoint either. I'm embedding the javascript in a Content Editor WebPart. A simple alert works, bu as soon as I add the js file link & script for the colouring it doesn't run.
Hi Daz,
I have mentioned steps above you need jQuery for this. follow above steps hope it will work for you..
Regards,
SharePointKings
The above code snippet works fine for me.But if i use Group by based on any column , the view doesnt diplay the colors. And i need to set colors based on the content of a field . i mean if a column value equlas G, then it should display green color in the column , if it equals R, it should display Red color in that column.pls help
Daz/Jabeen
we check that with using group by this thing is not working.
that is because JQuery works same javascript after page load it will fire and find particular table/td/tr/div/cell/text or anything and change its color. but while using group by that collapsed group item is not rendered on the browser so JQuery or javascript is not able to find and change color.
thanks for you effort and comments. we will try to find some work around asap.
Thanks,
SharePoint Kings Team
Could you please add how to highlight only when a word like "Sales" is in a specific column, say "Dept"????
Hi Jayesh,
You are good~ I've been looking for solutions on other blogs but none is as clear and elaborative as yours.
May I ask you, what are the codes for this requirement?
"Approved" = green
"Waiting Approval" = yello
"Declined" = Red
So, instead of numbers, I want to have texts, but I dont know how to change~
I'll be grateful if you could help me~
Felicia, read the both post again. your answer is in the post it self.
search for your text like 'Approved' instead 'Sales' that used currently.
ZebulonP,
you have to work a little in Jquery :)
Post a Comment