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
24 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 :)
Can you please advise where exactly has to be added this code?
I have a Project Management Sharepoint page that I cannot edit in order to add an editor web part.
I can edit it with Sharepoint Designer though.
Thanks,
M. R.
M.R.
you can add one content editor web part on the above list view web part and mentioned script in content editor.
This is great for getting colors by row. Let's say I wanted to have a whole column colored the same color defined by the column name?
Hay Anonymous,
we had not tried this yet but
this might be possible if you see the Script we are finding td (table cell) content some particular department like "Sales" or "Account" and then changing row color by that cell.parent . now you can change each cell color rather then changing row color.
give it a try it might work
Thanks for responding quickly. I tried the above method, and was unsuccessful. The row was still selected rather than the cell itself.
I'd really like to color the entire column by column name so I can have multiple colors in a single row. The limiter for me is I'm using time data which is updated daily so finding a table cell wouldn't be a good reference, which is why I thought the column name would work better. Any suggestions?
Thanks - Anon
make sense in your case,
we had not tried this so cannot point you to exact solution but check few JQuery function on internet and you must get it.
may be just find our main table and find which number of column you want to highlight then loop through each cell or row and highlight that cell which is on some particular space.
if we get time we will do it and post an article on this but it will not be soon as we have quite few request in queue.
hope this help
Hi,
How could modify this script to highlight just word/cell, not the entire row?
Thanks,
Eric
Eric,
refer this link http://www.sharepointkings.com/2010/04/sharepoint-custom-so-called-kpi.html
study javascript you should get idea from this.
hi
i followed all the steps..but the colors are not changing for me....
my code lokks like this
var jQPath="/-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js'
i used my jquery path like this..
can any one help me..i need this urgent....
hi
Can you please help me
i followed all the steps..but i didnt get the colors...
i used my jquery path into script like this(refer this url:http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html)
var jQPath="-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'
can u pls help me..its urgent for me ...
Can you please help me?i follwed all the steps(refer this link :http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html).i used my jquery path into script tag like this...
var jQPath="-LAYOUTS/js/jquery.js";
document.write("<script src='",jQPath,"jquery.min.js' type='text/javascript'
any body help me...i need this urgent...
chakri,
just check are you getting proper path or not.
if its only path problem then you can directly user path from
like http://code.jquery.com/jquery-1.7.1.js
Post a Comment