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 :
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 !
19 comments:
Looking for some direction -can SPGantt.js be found via SharePoint Designer?
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.
I used your code in my project and worked like a charm. You saved my day. Thanks :)
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?
I have also used you code and it works well. Thanks you.
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
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
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.
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.
Hi Joe
Document ready statement - duh. Feeling really dumb here, so feel free to delete my comments.
Regards,
Ronel
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.
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);
}
I also had issue with it not scrolling in 2010. adding the setTimeOut function worked. thanks Teena.
+1 for setTimeout() to fix the error :
"
'0.jsgrid' is null or not an object'
I really got problems getting the focus onto the current date.
It just does not work. The gantt loads, but no view change to current date is made. -> SharePoint 2013
I pasted my script here: http://pastebin.com/Q400t9q9
Maybe someone can give me a hand. :-)
THIS IS A WORKING SOLUTION!
http://pastebin.com/qsEhk6B2
You have to save jquery.js in the SiteAssets to get it work. If you modify the row 1 url to jquery.js you will get a working Gantt-view jumping to the current date.
wow Thank you! it works great!
Thanks for the script, but I've to be doing something wrong, I'm getting:
Cannot read property 'ScrollGanttToDate' of undefined
My script looks like this:
=========================================
start script tag
// JavaScript Document
// A $( document ).ready() block.
$( document ).ready(function() {
setTimeout(movescroll, 1000);
});
function movescroll() {
if($("div [id$='_ListViewWebPartJSGrid']").length) {
console.log('found');
var todaydate = new Date('01/27/2017');
console.log(todaydate);
$("div[id$='_ListViewWebPartJSGrid']")[0].jsgrid.ScrollGanttToDate('01/27/2017');
} else {
console.log('missing');
}
}
end of script tag
I tried above solution, and got the same error.
I've jquery loaded to success; the console.log I added for debugging is showing fine.
Any ideas??
Thanks,
Laura
Hey Joe!
I'm trying to do this in Sharepoint 365 using a script editor and it isn't working.
Any tips?
Thanks Joe.
Post a Comment