jQuery How To: Hide rows in SharePoint 2007 List View Grouped web part


I had been looking for a script to hide all the rows in a SharePoint 2007 Grouped list view web part, today I had the opportunity to come up with my own and thought of sharing it with you all. A Grouped list view makes it bit tricky to hide all rows since the resulting HTML contains group header and the structure is very difficult to read.

As always the first step is to read the HTML script, thank fully we have Developer Tools and I simply love it.

To keep this blog short and simple I will not get onto details of pre-requisites and add my script but here is a rough idea

  • Make sure to have everything required for jQuery (Content Editor etc.)
  • Create a SharePoint List (or use existing), create a view that is grouping the rows based on one column.
  • Add a list view web part on the home page (or web part page)
  • Make sure to use a grouped view to display in the list view web part.

Here is how the HTML is organized in case of grouped list view, I just took the screen capture from my developers tool:-

<Div> element represents the area where list view web part is loaded, under that you will find that the Group Header row and data row is organized using <tbody> element. Also note that list view header row is also rendered using the <tbody> element, we would like to keep the header rows intact while hiding everything else beneath it.

You will notice that except for the header row every <tbody> contains and ID that is bit dynamic (the number changes depending on the number of groups) .

Below is the jQuery script that could result in hiding every details row (including group header) and keep the list view header row.

Sorry for keeping this as image but here is the code for you to copy J ( I am not sure if formatting will be right but the code is correct J).

Note: Please ensure to change the web part ID in the below code to run, look for the div element and replace the id.

<script
type=”text/javascript”>

$(‘document’).ready(function(){

    //Loop through all the <tbody id=””> element that contains an ID attribute

    /*Note: The header tbody does not have ID attribute*/

    $(“div#WebPartWPQ11”).find(“tbody[id]”).each(function(){

    

        //Loop through all the TR element under the tbody

        $(this).children(‘tr’).each(function(){    

        

                    //Hide this table row

                    $(this).hide();

                });        

    });

});

</script>

 

Once again, sorry for keeping a running blog rather than the detailed one, but I just wanted to share this quickly with you all, hope this will help someone in need, feel free to comment or reach out to me.

Sudhir Kesharwani