Friday, December 14, 2012

How to highlight a selected row


We can set up the connection between two list view web parts easily. However, for the provider, users can only tell the selected row by "Select" column icon



Is there any simple way to highlight the whole row?

The answer is "Yes".

Below is the javascript (with JQuery reference) we need to put into a content editor web part on the page, which can highlight the whole row.


<script src="/_layouts/1033/unitingcare/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("IMG[alt='Selected']");
$Text.parent().parent().css("background-color", "lightgreen");
});
</script>


Below is what it looks like.


17 comments:

  1. Hi
    This solution works great with normal sharepoint lists.
    However, is there any way to get this to work with external lists?

    Many thanks
    Andy

    ReplyDelete
  2. It should be similar.

    Instead of "IMG[alt='Selected']", please find the relevant keyword from the page source code.

    ReplyDelete
  3. Hi Eric
    Thanks for your response. The issue appears to be with enable asynchronous load on the web part itself. Your code works fine, however, whenever i disable the Enable Asynchronous Load option on the web part, it gets selected automatically again on saving the page.

    ReplyDelete
  4. I am afraid there is no easy to fix the "asynchronous load" issue. We may have to change the master page, which is something I try to avoid.

    ReplyDelete
  5. Hi Eric
    Had another look at this and found a simple solution. Instead of using $(document).ready(function() i used $(window).load(function() and it worked!
    Useful to know if using jquery on external lists.
    Cheers
    Andy

    ReplyDelete
  6. Andy, I think you are right. Thanks for sharing :-)

    ReplyDelete
  7. Fantastic...saved me a lot of time!!

    ReplyDelete
  8. Very Nice! I did discover an OOTB way to do this for those not able to deploy JavaScript in their environment.

    After you create the web part connection, open the page in SharePoint Designer. In the web part that sends the filter value (the one with the selectors) click in to one of the rows and from the ribbon select Conditional Formatting > Format Row > Advanced Expression. Advanced Expressions will be "$SelectedID=@ID". Then choose your formatting.

    ReplyDelete
    Replies
    1. This is perfect if u work with SP2010. But ist not possible to do it that way with SP2013 Designer. There u have only the code view

      Delete
  9. What about on the default page before the user actually selects an item and SelectedID is populated in the URL or only one item shows up in the list view? The first row in the list will show up as highlighted, but any data that you try to retrieve about the row is 'undefined'? is there a way to get the first row field value such as the ID when SelectedID is not available? I'm trying to use this selection to pass parameters to another list web part. thanks

    ReplyDelete
  10. How do you get a field value from the highlight row...such as the title and move into a variable.

    ReplyDelete
    Replies
    1. it should be done through web part connection, I think.

      Delete
  11. Fantastic article Eric, thank you for sharing. I do have a question though......

    Using your method, how would you change the colour or bolden the text on the selected line also, whilst maintaining the background colour?

    ReplyDelete
  12. Hi,
    I put two lists in webparts and get filters from one list. but i wanna mark it like you, i put the js.file in SP. can you explain me how should I do that?

    ReplyDelete
  13. Perfect. Thank You for the quick fix.

    ReplyDelete