SharePoint 2010 Gantt View Zoom In and Out Buttons

In SharePoint 2010 Gantt view you have the added ability to Zoom In and out, the disadvantage is that the zoom buttons are placed with in the ribbon which makes them a bit uncomfortable to use.



Ribbon zoom buttons

Ribbon zoom buttons

This solution allows you to add Zoom in and out buttons to your SharePoint 2010 Gantt view and place them wherever you choose on the page, by following these simple steps:

 

 

 

 

  1. Create a new list of a “Project Tasks” type.
  2. Edit this list page or create a new page and add this list as a web part on that page.
  3.  Add a content editor web part and paste the following code in it:

{code type=html}<table cellspacing=”0″ style=”width: 300px; height: 18px; font-size: 1em”><tbody><tr><th><a href=”#” onclick=”javascript:GuyZoomIn()”><span unselectable=”on”><span unselectable=”on”><img src=”/_layouts/1033/images/formatmap16x16.png” unselectable=”on” alt=”” style=”top: -16px; left: -56px”/></span></span> <span unselectable=”on”>Zoom In</span> </a>?</th>

<th><a href=”#”  onclick=”javascript:GuyZoomOut()”><span unselectable=”on”><span unselectable=”on”><img src=”/_layouts/1033/images/formatmap16x16.png” unselectable=”on” alt=”” style=”top: -240px; left: -176px”/></span></span><span unselectable=”on”>Zoom Out</span> </a>?</th></tr></tbody></table>
<script type=”text/javascript”>

function GuyZoomIn()
{

if(location.href.indexOf(‘gantt.aspx’) > 0)

{
setTimeout(“SetZoomIn()”, 1000);
}
}
function SetZoomIn()

{
WebPartWPQ2_JSGridController.ZoomInGantt();
}
function GuyZoomOut()
{
if(location.href.indexOf(‘gantt.aspx’) > 0)
{
setTimeout(“SetZoom()”, 1000);
}
}
function SetZoom()
{
WebPartWPQ2_JSGridController.ZoomOutGantt();
}</script>{/code}

4.  In the code change ‘ gantt.aspx’ to your current page name.

5. Enjoy!

* 06/11/2012 I’d used the OOTB ‘formatmap16x16.png’ Image, which contains all the icons, You could simply replace the image source in the code with your own Magnifying glass image.

Gantt view with Zoom Buttons

Gantt view with Zoom Buttons