none
How to highlight a SharePoint List Item programatically on conditions

    Question

  • I have a SharePoint List column named Salary.

    When the Salary is above 100000 then i have to highlight the Listitem.

    I can't use SharePoint Designer approach in this sector.

    Everything should be done through VS Studio.

    Anyway to achieve this using VS Studio 2010.

    I am not getting any idea to start...


    kukdai

    Wednesday, February 29, 2012 12:57 AM

Answers

  •  

    Hi Kukdai,

    I have a test in my local server with the code you provide, it has some format error, like the format of quotation marks (“, ‘), please try the following code snippet, it works well in my test:
    <script src="/Shared%20Documents/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

    var x = document.getElementsByTagName("TD");
    var i=0;
    for (i=0;i<x.length;i++)
    {
    if (x[i].className=="ms-vb2")  {
    if (x[i].innerHTML=="Next") 
    {
     x[i].parentNode.style.backgroundColor="yellow";
    }
    }
    }
     </script>

    Note: please put the CEWP in the bottom of the list view web part.

    If you have any more questions, feel free to ask.

    Thanks,
    Qiao


    Qiao Wei

    TechNet Community Support

    Thursday, March 01, 2012 6:37 AM
    Moderator

All replies

  • http://saltypc.com/?p=99

    The post doesnt show how to do this using VS. But you can always incorporate this inside a script file and use Control delegates to inject the script into the AdditionalPageHead of the masterpage.

    But if can get away without using VS, it is much simpler and you only need to place a CEWP on the page.


    - Sid

    Wednesday, February 29, 2012 1:05 AM
  • I think jquery will help you do this in double quick time. Check out this link where they are highlights list rows based on column conditions. Very easy to do.

    http://www.sharepointkings.com/2008/12/highlight-sharepoint-list-rows.html


    Varun Malhotra
    =================
    If my post solves your problem could you mark the post as Answered or Vote As Helpful if my post has been helpful for you.

    Wednesday, February 29, 2012 2:30 AM
  • Actually both of the codes in the links doesnot works for me.

    I Thought if testing both codes so included them in the CEWP but none of these working there is no change in the column with chaning any of the value.

    Is there anything i am missing other than adding a CEWP.

    First of all i was trying to test the scripts. it doesnot works.


    kukdai

    Wednesday, February 29, 2012 8:43 AM
  • In my example, did you change the script source? <script src=”/PublishingImages/javascript/jquery-1.3.2.min.js” type=”text/javascript”> is local to the author's environment.


    - Sid

    Wednesday, February 29, 2012 10:19 PM
  •  

    Hi Kukdai,

    The suggestions posted above can meet your requirement to highlight list items, to use them, you need to download the expected jquery file, and upload to your site, then type the url of the file in the script src location like<script src=””>, to the first sample, you may need to put the CEWP to the bottom of the list view web part, also, please change the condition to your condition, and pay more attention to the format of the punctuation, it’s better to rewrite them. Here is a similar article about this issue, you can also refer to it to check whether it works:
    http://sharepointjavascript.wordpress.com/2009/12/31/highlight-row-by-value-in-yesno-column/

    Thanks,
    Qiao


    Qiao Wei

    TechNet Community Support

    Thursday, March 01, 2012 2:29 AM
    Moderator
  • Guys this is on SharePoint 2010.

    WHAT I DID WAS ALL this

    wrote this code

    <script src="../Shared Documents/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    var x = document.getElementsByTagName("TD") // find all of the TDs
    var i=0;
    for (i=0;i<x.length;i++)
    {
    if (x[i].className==”ms-vb2″) //find the TDs styled for lists
     {
     
     if (x[i].innerHTML==”Next”) //find the data to use to determine the color
     
      {
     
      x[i].parentNode.style.backgroundColor=’yellow’; // set the color
     
      }
     
     }
     
    }
     
    </script>

    i wrote above code in a text file and uploaded that text file to sharepoint library as well as the js refrenced file too.

    after then

    i linked through CEWP put that CEWP at the end of the page below my list.

    When a changed my column value to Next then nothing happens.

    Am i missing something......


    kukdai

    Thursday, March 01, 2012 4:22 AM
  •  

    Hi Kukdai,

    I have a test in my local server with the code you provide, it has some format error, like the format of quotation marks (“, ‘), please try the following code snippet, it works well in my test:
    <script src="/Shared%20Documents/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

    var x = document.getElementsByTagName("TD");
    var i=0;
    for (i=0;i<x.length;i++)
    {
    if (x[i].className=="ms-vb2")  {
    if (x[i].innerHTML=="Next") 
    {
     x[i].parentNode.style.backgroundColor="yellow";
    }
    }
    }
     </script>

    Note: please put the CEWP in the bottom of the list view web part.

    If you have any more questions, feel free to ask.

    Thanks,
    Qiao


    Qiao Wei

    TechNet Community Support

    Thursday, March 01, 2012 6:37 AM
    Moderator