Show the webpart tabs on a SharePoint 2010 page when you have multiple webparts

December 27th, 2012 | Posted by Marijn in Uncategorized

Probably the last blogpost of the year 2012, but I didn’t want to keep this small jquery gem on how to get back the webpart tabs from all SharePoint 2010 users.

Problem when adding multiple webparts: losing view and webpart tabs

From time to time, you have a page with multiple webparts and you lose track of some key elements from your header. What if you are in a, for example, document library and you have an extra webpart there, like a content editor with some remarks on the documents. You lose the webpart tabs and the views.

This is a normal library where we can see the view selector and the tabs:

normal library with view selector and tabs

normal library with view selector and tabs

But if we edit the page and add a content editor webpart, where we add some text, a funny thing happens. You lose the view selector and the documents and library webpart tabs are gone! You can get them back by clicking somewhere in the webpart or on the browse tab.

multi webpart loses the view selector and webpart tabs

multi webpart loses the view selector and webpart tabs

How can we fix the views and webpart tabs in the ribbon ?

On how to fix the views I already covered in this blogpost where I talk about the free add-on ViewRescue from Pentalogic.

But how can we fix the tabs ?

A quick google Bing around the interwebs brought me to this question/answer on StackOverFlow where Hans Thorsten gave this piece of jquery as an answer:

$(document).ready(function() {
    var target = document.getElementById("MSOZoneCell_WebPartWPQ2");
    if(target != null) {
        var fakeEvent = new Array();
        fakeEvent["target"] = target;
        fakeEvent["srcElement"] = target;
        WpClick(fakeEvent);
    }
 });

What this code does is trigger the build-in WpClick event, which is triggered when you click somewhere in the webpart. At my client, it didn’t always work however, probably due to loading time issues.

What did help (but not fix it completely) is adding a $.delay(2000) to the code.

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Leave a Reply

%d bloggers like this: