Saturday, June 15, 2013

Scroll Gantt view to today in SharePoint 2010 & 2013

Abstract, here is a trick to have the SharePoint Gantt view displayed scolled to today instead of the first day of the earliest task. Tested on SharePoint 2010 & SharePoint 2013. Here comes the trick and how it was found

SharePoint Gantt views are a great tool to visualy embrace a set of data\dates but they suffer from a few usability issue. First one is that Gantt view always center on the earliest date of the tasks displayed. This is often an issue if you display projects spanning multiple months or year as you don’t see today’s situation :
Default SharePoint Gantt view centers on the earliest date


We decided to fix it. Our first stop was to take a look at SharePoint out of the box SPGantt.js file (SPGantt.debug.js for convenience), where best to find out what was possible. Searching for scroll brought up a few reference including this very promising one :

 this.ScrollGanttToTask=function()

      ….

      _jsGridControl.ScrollGanttToDate(date);

      ….


Next step was to manage to get an handle on this jsGridControl object. Fiddling through the DOM with Google Chrome (Elements and console tabs) we found out the *_ListViewWebPartJSGrid object had a nice jsgrid property that returns the object we need

 And this object indeed have a ScrollGanttToDate function

 If you use jQuery here is how to retrieve the object and scroll to today. Depending how\where you use it, you might want to make sure the object exists (if($("div [id$='_ListViewWebPartJSGrid']").length) ) before using the property jsGrid.

$("div [id$='_ListViewWebPartJSGrid']")[0].jsgrid.ScrollGanttToDate(new Date()) 

Tada !
SharePoint Gantt view centered on today's date