Wednesday, February 6, 2013

SharePoint 2010: Gantt View - displays months scale instead of default day scale

I've had this business requirement wherein I needed to present a Gantt view of an on-going project in a month view scale.

By default, Project Task list displays a project on a daily scale:

Default Gantt View Scale


Unfortunately, there is no out-of-the-box way of displaying this in a zoomed-out fashion automatically.

I've tried to fish out few ideas over the Internet on how we could work around this and I haven't found any straight forward articles hence, the post.

So, how to workaround this default day scale view automatically?

By scripting of course!

Thankfully, I found useful post from Cees Timmerman on Stack Exchange related to WebPartWPQ2_JSGridController.ZoomOutGantt().

So how to setup the Gantt view to display in month scale?

Add a content editor web part on the bottom of the page (bottom because the page loads from top to bottom and it will be easier if the Gantt view has been loaded first because the script kicks in), edit in HTML mode and paste this script:

<script src="indicate jquery.js location here" type="text/javascript">
$(function(){
  setTimeout(function(){
    for (var i = 0; i < 3; ++i) WebPartWPQ2_JSGridController.ZoomOutGantt()
  }, 2000)
})
</script>


The script zooms out the Gantt view 3 times from default to achieve the month scale view. Once done, hide the content editor web part and save the page.

Sample output:
Sample Output - Gantt Auto Zoom

6 comments:

  1. This is a great post, thanks for spending your time to publish this useful JS on the net :)

    ReplyDelete
  2. This is a great trick, but it's not working on SP2013... An updated version would be fantastic!

    ReplyDelete
  3. Hi,

    I've tried to used your script, but nothing has changed.

    $(function(){
    setTimeout(function(){
    for (var i = 0; i < 3; ++i) ctl00_m_g_796f6533_bcc1_477f_9d4e_2318a0275740_ProjectCenterJSGridControl_JSGridController.ZoomOutGantt()
    }, 2000)
    })


    "ctl00_m_g_796f6533_bcc1_477f_9d4e_2318a0275740_ProjectCenterJSGridControl" is my Gantt name that I get from source view.

    Please help me.
    Thanks!

    ReplyDelete
  4. We have a cost-effective gantt chart control for SharePoint 2013 to uses a simple slider to zoom the Gantt timescale in and out. It will remember where you last set it between sessions as well. If you want to check it out:

    http://www.teamdirection.com/igwebpart/sharepoint_index.html

    And other stuff like scheduling, multi-level undo. colors, simple printing, adjustable columns and task list aggregation. :)

    ReplyDelete
  5. How to insert this Gantt View to sharepoint subsites?

    ReplyDelete