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

14 comments:

Anonymous said...

Looking for some direction -can SPGantt.js be found via SharePoint Designer?

Joe said...

Hello anonymous, SPGantt.js can be found on the server (C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS)
But it's not to be modified as it's an out of the box file.

To actually integrate this code i would recommend full development (Visual Studio) or for a single usage you can just add a Content Editor Web Part and open the HTML code editor to input JavaScript code. Don't forget to include jQuery.

Christophe said...

I used your code in my project and worked like a charm. You saved my day. Thanks :)

Jesper G. Simonsen said...

I'm using it and it works perfect, thanks!

Maybe you have a hint? On the SPGantt chart there's a (big) grey area of empty space in the bottom. Is there anyway to resize or auto size the control to only show the actual filled in rows?

Anonymous said...

I have also used you code and it works well. Thanks you.

Anonymous said...

I am trying to use this code in 2013 calendar gantt chart but its giving me a error saying - Message: '0.jsgrid' is null or not an object
Line: 657
Char: 1

Please suggest.
Kind Regards,
Tina

Joe said...

Hello Tina,

Are you using the Gantt Chart or the new 2013 timeline ?
I double checked on a gantt right now with success.

Thank you,
Jonathan

Ronel said...

Hi Joe

I'll admit to being new to both js and sharepoint, so I'm hoping I'm doing something really stupid, but whenever I add this script my entire Gantt chart disappears.

I've saved jquery in our sharepoint portal in the library "SiteAssets". I've then added the code via a script editor:

"<" script src="http://.../SiteAssets/jquery.js" type="text/javascript">

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

< /script>

I also tried adding the script within a function and had the same happen.

Have I missed something important?

Thanks for your help.

Ronel said...

Hi Joe

Me again! If I load jquery in a separate script first then my Gantt chart doesn't disappear but it's still not scrolling.

Thanks.

Ronel said...

Hi Joe

Document ready statement - duh. Feeling really dumb here, so feel free to delete my comments.

Regards,
Ronel

Teena said...

I am trying this in 2013 out of the box gantt view. the script recognize the div element but not as jsgrid.
Where should i call this script? I tried with and without document.ready?

This article helped me to achieve same in gantt view created using custom code using ScrollGanttToDate method.

Teena said...

I got it working after adding a delay before calling this function. Couldnt find the right event.


setTimeout(movescroll, 1000);
function movescroll() {
var todaydate = new Date();
$("div[id$='_ListViewWebPartJSGrid']")[0].jsgrid.ScrollGanttToDate(todaydate);
}

B.J. Davis said...

I also had issue with it not scrolling in 2010. adding the setTimeOut function worked. thanks Teena.

Vader said...

+1 for setTimeout() to fix the error :
"
'0.jsgrid' is null or not an object'