How to Apply Color Coding SharePoint List using JQuery

No.of Views6075
Bookmarked0 times
Downloads 
Votes0
By  amalhashim   On  04 Feb 2011 20:02:07
Tag : SharePoint , Development and Programming
In this snippets, i will show How to Apply Color Coding SharePoint List using JQuery
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

In this snippets, i will show How to Apply Color Coding SharePoint List using JQuery

Try using the following script

<script type="text/javascript" src="/_layouts/jquery-1.4.4/jquery-1.4.4.min.js"></script>

<style type="text/css">
.MyStyle
{
    font-size: 11px;
    background-color: red;
}
</style>
<script type="text/javascript">

$(document).ready(function(){

$(".ms-vb2:contains('Completed')").each(function(){
$(this).addClass(MyStyle);
});
});

</script>

Problem with this approach is, it won’t work in views with grouping. The problem is, on grouping, collapsed group data is not rendered on page load. To tackle this we need to tweak scripts in INIT.js, but directly modifying is not a good practice. To overcome this we can override the method which is rendering the data as shown in the below script block.

<style type="text/css">
.MyStyle
{
    font-size: 11px;
    background-color: red;
}
</style>

<script type="text/javascript" src="/_layouts/jquery-1.4.4/jquery-1.4.4.min.js"></script>

<script type="text/javascript">

//wait until all of the SharePoint stuff is loaded...
_spBodyOnLoadFunctionNames.push("CustomExpGroupByFix"); 

function CustomExpGroupByFix() 
{
  //Replace the function in INIT.JS with our custom function
  window.ExpGroupReceiveData=function(x,y){ExpGroupReceiveDataC(x,y)}

}

//This is the exact replica of INIT.JS "ExpGroupReceiveData", we have added color coding code at the end
function ExpGroupReceiveDataC(htmlToRender, groupName)
{
    var ctxId="ctx"+groupName.substring(0, groupName.indexOf("-"));
    var indexBeginCTXName=htmlToRender.indexOf("CTXName=\"");
    if (indexBeginCTXName !=-1)
    {
        if (ctxId !="ctx1")
        {
            htmlToRender=htmlToRender.replace(/ CTXName=\"ctx1\" /g, " CTXName=\""+ctxId+"\" ");
        }
    }
    var needOuterWrap=false;
    if (htmlToRender.length < 4)
    {
        needOuterWrap=true;
    }
    else if (htmlToRender.substring(0,3) !="<tr")
    {
        needOuterWrap=true;
    }
    if (needOuterWrap)
    {
        htmlToRender="<TR><TD>"+htmlToRender+"</TD></TR>";
    }
    ExpGroupRenderData(htmlToRender, groupName, "true");
    g_ExpGroupInProgress=false;
    if (g_ExpGroupQueue.length > 0)
    {
        ExpGroupFetchData(g_ExpGroupQueue.shift());
    }
        
        //Color coding the cells
        $(".ms-vb2:contains('Completed')").each(function(){
                  $(this).addClass(MyStyle);
        });
}
</script>

To use this script, edit the page –> add a content editor webpart.That's all. hopes help and thank you for reading.

 
Sign Up to vote for this article
 
About Author
 
amalhashim
Occupation-Software Engineer
Company-Aditi Technologies
Member Type-Senior
Location-Not Provided
Joined date-07 Jun 2009
Home Page-http://lamahashim.blogspot.com
Blog Page-http://lamahashim.blogspot.com
I have done my masters in Computer Applications and graduation in Computer Science. I have great passion in working with Microsoft tool and technologies. I am also a Microsoft Most Valuable Professional. Personally my objective is to design/develop applications which eases user experience and performs better in long run.
 
 
Other popularSectionarticles
Comments
By:gokoolDate Of Posted:5/10/2012 6:56:17 AM
test
i am getting mystyle is undefined
By:BobbyDate Of Posted:8/15/2011 11:11:23 AM
Help
I've used the code above and used "http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js". It doesn't do anything :-(
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top