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.



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

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



        //Loop through all the TR element under the tbody



                    //Hide this table row







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


Building SharePoint Dashboards with Google Chart


Hey glad that I am back with another jQuery magic post here in Word Press. I apologize for taking so long to write this. I had a long list of TODO’s (rather TO-Writes) that I wanted to share but I got stuck onto one thing after another.

So here I am with another wonderful SharePoint recipe…with mixture of jQuery (essential ingredient) + SharePoint (it has to be) and Google Charts Tool.

I must admit that charting was one of the most required feature and which was missing in SharePoint 2007 (although it made place in SharePoint 2010). It was one of my longtime dreams to build a nice looking SharePoint executive dashboard. I also realized that people love to see Graphics more than the text/numbers. This was the motivation behind coming up with this article. And one fine day I accidently landed onto Google Charts Tool.

The code examples really looked difficult to me initially and it looked like Google level code. But somehow I started working with it and recently I had to create almost 10-11 nice looking charts that gave me enough confidence to publish this post.

Charts Gallery – Awesome collection of Tools

The collection of chart types available in Google Charts Tool is really amazing, I have seen some of the chart types for first time.

Have a look at Google Charts Gallery for the frequently used chart types, but there is really more to it when you look at specific chart types. They have got a really extensive list of charting possibilities.

Data Policy

None of the data is really posted to Google server, or travels through any network. It’s all client side rendering so you can be very sure about your data privacy. In fact you will find this end note in every chart samples.

Sample SharePoint Charts

Before we jump-in to the implementation details, below are some of the screenshots of what we are trying to implement. I am sure this samples will give you enough motivation to read further and implement your own chart, believe me all of those graphs are created using underlying SharePoint data.

Sample 1

Sample 2

Sample 3

Prepare Data for Chart

We will utilize the SharePoint grouping capabilities to calculate the data for chart. My strategy is to group the data by various aspects (for Example City, Customer, and Year). And then add the list view web part onto the dashboard page.

Our magical script is not intelligent enough to do the calculation, it just knows the place to read the information. Here is how I have prepared the data (I have included the list template along with the data).

  • Upload SalesData.stp onto list template gallery of your site collection. [Site Actions à Site Settings à List Templates under Galleries].
  • Create a new list based on Sales Data template; this will get you everything (data/views etc.) required for this sample.
  • Add list view web parts onto the dashboard page; we will use this later to read information.

Include jQuery Library [jQuerification]

I am sure by this time you must be pretty excited about looking at the implementation, alright enough of text and pictures onto this article it’s time to get our hands dirty with some coding.

As always the very first step in creating any magic is to add reference to jQuery files. Recently I shifted my jQuery implementation pattern a bit and instead of keeping a local copy of jQuery script onto SharePoint document library, I prefer to use the Google Hosted CDN. Thanks to Dave Ward for putting 3 reasons to let Google Host jQuery for you, this also saves me from keeping multiple local versions of jQuery.

Following line of code on element will load the jQuery library from Google CDN: – [copy the URL ]

Script 1

Load Google Charts API [gChartification]

Enabling Google Charts API is equally simple. It’s very much similar to what we do to load jQuery, add another script tab and make it point to https://www.google.com/jsapi

Script 2

Load appropriate chart package

You will need to load appropriate gchart package depending on what type of chart you are building. For most of the commonly used chart you can use “corechart” package. To include the chart package onto your code, write following line as first line of your script.

Script 3

While “corechart” contains most of the commonly used charts, there are some other packages that can be used when you are creating a different type of chart. To load a different chart you will use the google.load method (same as example above), provide the package name in the packages attribute. It is also possible to load multiple chart packages in the same script.

Chart Type Package
Gauge Chart “gauge”
Geo Chart “geochart”
Table “table”

Preparing the Code Structure

Once you have the jQuery and Google Chart script loaded along with appropriate chart package, next step is to combine the patterns for both the scripts.

Google charts expects google.setOnLoadCallBack() function and jQuery starts with $(document).ready(). In order to make them work together we have to come up with a structure that satisfied both the library.

Here is what I have come up with:-

Get the Google Chart data from ListView Web Part

Once we have the structure ready for google.setOnLoadCallBack() and $(document).ready() we can start writing the code to extract data and render the chart.

In this step we get the GUID for list view web part to read the information from group headings. I have prepared a short video on the process of reading GUID (Please feel free to comment for screencast).

Next step is to prepare the DataTable object using the data rendered in the ListView Web Part. Copy the “WebPartId” that we captured in the screen cast and assign the same to dataWebPartId
variable in the below script.

The script just does the job of looping through each group header and separating the label with the values. Group headers are located in the TD elements with class ms-gb

Draw Google Charts

Last step in this solution is to prepare the Google chart in the element of your choice (div, span etc.). Just create the appropriate chart object and invoke chart.draw() method along with DataTable we prepared in last step.

Complete Code

Below is the completed code for ProductSales.js file.

Source Code

Here is much awaited section of this blog, all the source code along with list template . Please download the code SudhirKe – SharePoint Google Chart repository.

Follow these steps to use the code from repository:-

  1. Upload SalesData.stp onto List Template Gallery.
  2. Create a custom list using the Sales Data Template.
  3. Add two list view web parts on the home page, make them point to different views.
  4. Get web part id for both the list view web parts.
  5. Paste them onto ProductSales.js and SalesChannel.js script file.
  6. Upload the javascript files onto document library.
  7. Add two content editor web part and make them point to the JavaScript files.

If you have done everything correctly you should see the Google Charts loaded onto your SharePoint home page.

Hope this helps, feel free to comment on this post. I am sorry for keeping it so long.

Happy Dashboarding….

jQuery : SharePoint Contact Card Web Part


I am back with another jQuery MagicJ. Whenever I was browsing through any social networking site I used to love those beautiful Contact List or Friends list. It was somewhere in the back of my mind to build something like this for our friend SharePoint. Today I got the opportunity to build some fancy (or not so fancy) contact card based on jQuery and SharePoint web services.

The best part of SharePoint is that gives you all the basic infrastructure for your day to day data requirements like Contact List, Task List, Calendar list and so on and once we have place to store such data jQuery gives you the power to read it and present it in the desired format.

Here also I tried something like that and came up with this solution for display contact list data in the card format.

Download the Code

Please download the source code and required files from : SudhirKe.jqContactCard.Source.zip in case the google docs link does not work you can download the code from my GitHub repository.



Default contact list from SharePoint. This solution also requires following files:-

– jQuery 1.4.3 [Note: jQuery1.5 is not compatible with SPServices yet.]

– jQuery UI 1.5.9

– jQuery SPServices

– jQuery UI Theme (I have used ui-lightness)

Apart from this I have developed following files:-

– jContactCard.css

– jContactCard.js

If you want to display the person image you can add a image field and get it link to your contact pictures. Other way is to read it from MySite, I have implemented a very basic solution and displayed the default image from SharePoint “/_layouts/images/no_pic.gif” with each contact.

See it in Action…

Here is the screen shot of the web part. Moving the mouse over a contact card highlights the contact card (thanks to jQuery UI J)

The Solution

I am really sorry for pasting the code as images, but it was getting formatted really badly by WordPress. Anyways I have given the link to download the code.

CSS File

CSS code is pretty simple, it just tells to format the contact card details and images etc.

jQuery Code

It’s very simple like my previous posts. I am using the SPServices solution from CodePlex to read data from SharePoint contact list. Very thanks to Marc D Anderson. Marc you have made huge differences to the life of jQuery and SharePoint and jQuery SharePoint lovers like us.

So the jQuery code is very oblivious, I am calling SharePoint lists web services using SPServices. I have called “processResult” method in the end to parse and format the return values. Below is the code to call the web service:-

Note: The below code can be found in the jContactCard.js file in the code.

My processResult method looks something like below:-


The required HTML script is really simple, the magical part is already taken care by jQuery all your html needs is a div element with “result” as id. Of course you need to add reference to the required JavaScript and CSS files.

Below is the HTML code.

Note: Please make sure to update the references of the JavaScript and CSS files when you upload it onto SharePoint document library.


– Upload all the JS and CSS file along with the HTML file onto SharePoint document library.

– Add a content editor web part and add link of the myjQuery.html file in the Content Link property.

– Below is the folder structure.

– JS folder contains required all the JavaScript files.

– CSS folder structure looks something similar to image below.

Hope this helps someone in need. Comments/Suggestions welcomed J

Sorting table using jQuery

Recently I worked for a requirement with my collegue Ankur Chourasia on consolidating the information from the sub sites and displaying it on the main site using Content Query Web Part.  I consider that as the first part of this post.  Please make sure to go through “A Little More about Content Query Web Part“. The consolidation and additional column displaying part is done by Ankur Chourasia and he did it fantastically. I will surely encourage him to add that onto his blog site.
There was another interesting requirement where in the user wanted the table data to be sorted. Just like we do in any other SharePoint lists, again my love jQuery came onto picture and we could achieve the sorting table functionality.

I found it worth putting down on paper and sharing. Comments welcome J

JQuery Library

The basic requirement to jQuerify any solution is the jQuery library. All we need to do is add a script tag that points to jQuery JavaScript file. For our solution we have downloaded the script file from jQuery Download page. We have uploaded the solution onto a document library the alternative way to enable jQuery is refer the file directly from Google Code CDN. The second way is definitely bit slowly since it has to load jQuery file from remote location.

Table Sorter Plug-in

The beauty of jQuery is the extensibility. We get plug-in written for almost every business problem, I was lucky here too many thanks to the simplest table sorter plug in by Christian Bach. I downloaded the JavaScript file and uploaded it onto the shared document. I also downloaded the StyleSheet to format my table from http://tablesorter.com/themes/blue/blue.zip.

Here is the final structure of my files.

Shared Documents


o Style.css

o Other gif files

è JS

o jquery.min.js

o jquery.tablesorter.min.js

è tablesort.html (this contains the jquery code)

JQuery Code

The jQuery code is pretty easy for this. Add the reference to jQuery library and Table Sorter javascript file along with stylesheet (style.css). in the jQuery code call tablesorter() method for all the “table” tags. This is it. Following is the code snippet. I have kept this code in tablesort.html file.


The table sorter plug in looks out for all the <table> tag which contains the “class=tablesorter” attribute. Other requirement is that the table columns should be inside the <thead> element and table body should be inside the <tbody> element. For e.g.

ItemStyle.xsl template modification

Here is the modified template in the ItemStyle.xsl file to achieve the required html output. Notice the class attribute of <table> element the <thead> and <tbody> elements.

Enabling sorting on the CQWP tables

– Upload the modified ItemStyle.xsl file onto Style Library.

– Make sure that required JavaScript files and html file are uploaded on the SharePoint document library.

– Navigate to the page where you have added the Content Query Web Part.

– Add a Content Editor Web Part. Edit the web part and set the Content Link property to URL of “TableSort.html” file in the Shared Documents library (e.g yoursitedocumentstableSort.html).

Tip: You can keep this content editor web part as hidden, the jquery code to enable sorting will still work.

– This will make the column heading clickable. Clicking on the column heading will sort the rows of the table.

End Note

I hope this helps some one in need. I sincerely like to thank Ankur Chourasia and Christian Bach

jQuery Magic – Search List Web Part


  1. jQuery Magic – Search List Web Part 1
  2. Overview.
  3. Search Web Part.
  4. See it in action…..
  5. HTML Script 3
  6. Inline Style Sheet 4
  7. jQuery(fication) : Enabling the Magical Library. 4
  8. jQuery: $(document).ready() handler 5
  9. jQuery: The Search() function. 6
  10. jQuery: the processResult() function. 7
  11. References. 7
  12. Summary. 8


After being quite for sometimes now, I am back with another jQuery magic. The search list web part, this is really handy when you have some data in SharePoint that hardly gets updated, rather than opening the list we could directly add a search web part on the home page and get the data.

Search Web Part.

The search web part that we are going to see will look something similar to figure1. I have made the script to search in the Calendar list based on the event location.

Figure 1

This web part can be configured to search on any SharePoint list. Following section of this article will cover the scripts in detail.

See it in action…

I thought of showing it in action to you before we dig deeper onto the code. Follow the instruction carefully.

1. Download the required files from jQuery Magic – Search List Web Part

· jquery.highlight-latest.min.js: This is the jQuery highlight plunging. This is used to highlight the searched terms. Sincere thanks to Johann Burkard for his Highlight Plugin

· searchList.js: This contains the logic to interact with the SharePoint services and render the required controls.

2. Update the references.

3. Upload both the files onto a SharePoint document library.

4. Add a content editor web part à and update the Content Link property to point to searchList.js

Figure 2

5. Click ok and you are done. You will see the search list web part in your page.

HTML Script

Following is the HTML script that is required to render the UI of the search web part. This HTML defines following element in the web part

quickSearchTextBox: Text box to enter the query.

cmdSearch: Command button to initiate search.

resultCount: Div element to show the number of records found from query.

quickSearchResults: Div element to show the result.

I have used the SharePoint style sheet classes to format the UI look similar to SharePoint.

Inline Style Sheet

The inline style sheet classes have been used to format the output and display it in the form of block. Following are the classes in this style sheet.

– .highlight : This class is used to define formatting for highlighting the search terms in the results.

– .ul: this class is used to remove the bullets in the UL element.

– .ul li : This class is used to display the search results in the form of block.

jQuery(fication) : Enabling the Magical Library

To load the jQuery library, I have used the direct link (ajax.googleapis.com). I am not uploading the jQuery library on my SharePoint (I did that in all my previous posts).

In case you want to load jQuery from local SharePoint site you will have to upload jQuery library onto your SharePoint document library and update the SRC parameter in the following code. (Note: You will have to update the {SPURL} for jquery.highlight-latest.min.js file)

jQuery: $(document).ready() handler

$(document).ready() handler is similar to void main() in C J. This script written inside this hander is executed when the entire DOM elements have been loaded.

jQuery script should be written inside ready() handler. Please refer to jQuery Documentation to learn more about writing jQuery script.

I have used ready() handler to associate various event handlers to the controls in my web part. This contains various ways to initiate search operation and other handler to clear search result when “X” is clicked.

Note that to clear the result I have used $(selector).live() handler, this will make sure to attach event handler with “X” button only when it is present in the UI.

jQuery: The Search() function

The search function takes care of talking to the lists.asmx SharePoint web service. This function prepares the soap request with the query and processes the result.

The soap packet contains the CAML query to search the list. It defines following parameter to execute the query:

– listName : Name of the source list.

– Query : Query to execute against the list

– viewFields: Fields that should be returned in the result.

jQuery.ajax() function is used to send the request to the lists web service. The complete attribute specifies the function name that should be executed once this request has been processed. The process result method will receive the resulting xml from the web service call.

jQuery: the processResult() function

The processResult() method is used to generate the resultant HTML script from the web service call result xml file. The role of this method is to parse the xml and get the required HTML.

Please excuse me for the bad formatting (I am really bad in the designing).

Notice the code that we have used to highlight the searched terms in the result set.







I have done very basic formatting to the search results. Be as creative as you can in the processResults() method, use the jQuery UI library to format the output.

We can build some really fantastic application with no server side coding and deployment overheads using jQuery.

jQuery : Enhancing List View web part rendering

jQuery : Enhancing List View web part rendering    1


The more I work on jQuery + SharePoint the more I get attracted to it.  There is limitless possibility when we use jQuery in SharePoint.  My latest research includes enhancing the way ListView web part gets rendered.
Once you get hold of the jQuery selector you feel like everything is possible and is very much in your hands. You just have to find a unique way of getting the required DOM element and then it obeys all your orders like a Gin (I am sure I am not exaggerating).

I hope this helps someone in need.


The requirement was to display following table in a web part.

Link to Presentation
Link to Video
Some topic Some presenter [ICON to download ppt] [Icon to download video]
I first thought of reading the data using our dear friend SharePoint web services and then rendering it on my own way.  But then I thought I should be able to do it in some OOB way.  But the issue was that I had to show two icons that are linked to content
       Icon to download presentation.
       Icon to download the video.


I uploaded all the presentations onto the document library.  The default document library did not have the columns to display the additional metadata about the presentation.  So I created the columns that described the presentation.
       Topic (Single line of text)
       Presenter (Single line of text)
       Video (Hyperlink that will contain the URL to video)
Figure 1
I uploaded the videos in the same folder and updated the metadata of presentation to contain link to the video file.
The benefit that I get out of this is the “Type” column renders the icon and it is linked to the original document.  And I had added the other metadata using columns, this is 70% complete, I still have the task to display the icon that is linked to video. 

When I add the list view web part I could see following view.

Figure 2

Note: Video column was getting rendered as the plain hyperlink.

jQuery – the lightweight magic

Since I am a big fan of jQuery and I knew there must be a way to select everything on the page.  I did some analysis on how this is rendered.  I found that its all Table and TD tags.  So the list view table is rendered as

<TABLE —- summary=”<<Web Part Title>>”>

Something worth noting is that the table contains a property called summary and the value contains the web part title.  Now the next job is to find how the link is getting rendered further down the line I found something interesting.

<TR><TD Class=”ms-vb2″><A HREF=”URL of Video”>Text to Display</A></TD></TR>

So it was a TD that contained class “ms-vb2” and contained a child node as <a>.

Once I identified the way it renders the link it was just a matter of replacing the text of <a> with <img> of my choice. 
By this time all the jQuery folks have an idea of how to do that.  Still I thought of copying the magical part of the script.
Note: My apologies for copying this as image, but for some reason I was not able to publish this document when it contained jQuery code. (Google and Blogger started boggling me J)

Figure 3
Just replace web part title with the summary of your list view table.  And here is the final output.
Figure 4
Now you see that I have the desired icon to download video and it looks really good.  And all that I needed was 4 lines of jQuery and understand how SharePoint renders the contents.

RegardsSudhir Kesharwani  MCTS – MOSS 2007 | MCTS – WSS 3.0 | MCPD-EA | MCSD.NET