SharePoint 2010: Customizing the Gantt view and the Client Grid

Hi everyone.

Time to revive this blog a bit. It’s been a long time since the last update and a lot has happened since. I’m now officially an independent SharePoint consultant, here in Belgium! Needless to say, I had a lot on my plate the last six months. But here I am again! Time for SharePoint.

As most of you, I’ve been working on SharePoint 2010 for some time now. And as usual we found some quirks and weirdness in the software that need some more “creative” solving. This time we’ll talk about the new Gantt view! The Gantt view is one of these list views that wasn’t really used in SharePoint 2007, mostly because nobody knew about it. It was kinda a nice view. It’s used to show event based items on a horizontal timeline. You configure a start date column, and a end date column, and presto! A Gantt View! In 2007 it looked like this:

Gantt view 2007

Kinda nice, right? Well, in 2010, they enhanced it. Visually ,it basically looks the same. (although the items are on the left side, and the timeline on the right) But the functionality is much more powerful. The item grid is now by default editable! More over, it looks like a datasheet view, but works without plugins! How is this, you ask me? JAVASCRIPT, I respond enthusiastically! ;-)

Gantt view 2010

Microsoft finally is discovering the power of Javascript in SharePoint 2010 and this is an excellent example of this! They developed a fully functional client side grid, using Javascript! It allows us to do some nice tricks as dynamic resizing of the columns, show/hiding columns, … and more.. Really nice! What’s even better, is that you can directly edit the grid, and the timeline and underlying items are automagically updated! Even more awesome!

Now, this is really nice and all, but it ain’t nothing you can read anywhere else. The problem I was having this week are the settings of this view. Or actually the lack of. There is quasi nothing you can set. Bummer!
Luckily, as it is Javascript, I suspected I could hack into the html and change defaults such as column widths etc by changing its CSS properties.
Well, that seemed kinda right. I managed to change some defaults, but as soon as the grid sprung alive on the page, everything went back to the internal defaults. Oh, and did I mention that some defaults are repeated a million times within the html code? So far for using *cascading* style sheets. :-(

Next try: can I hack the Javascript of the grid? After looking more closely at the Javascript code of the grid (all 25000 lines of it :p) I found out the gantt view consisted of a Javascript Gantt view component, using a Javascript grid component. (although they seem separate with separate files and all, they do show interdependencies in the details, however) And what’s nice about Microsoft they created a whole object model for the grid. Very quickly I found some useful methods such as: “FormatColumns”. Jeej! And as the methods were used in the Gantt view component, they were public. And then the kicker: the script object is not public! :-( C*$!!($à Back to square one! Or are we? Javascript is powerful, really powerful! The variables as methods and enclosures are really nice to use. Inheritance is also way more hackable, as we can override ALL Javascript functions That’s why I created my own Gantt view type, that is immediately loaded when the grid and Gantt view types are loaded. See this piece of code:

  ExecuteOrDelayUntilScriptLoaded(function()
  {
  	  	var oldGanttControl = SP.GanttControl;
  		SP.GanttControl = function()
  		{
  			oldGanttControl.call(this);
  			...
  		}; 	
  },"SPGantt.js");

Once I had my hook, it was only a matter of overriding the “init” method and catching the grid object, and doing nice stuff with it, such as the column hiding.

  ExecuteOrDelayUntilScriptLoaded(function()
  {
  	  	var oldGanttControl = SP.GanttControl;
  		SP.GanttControl = function()
  		{
  			oldGanttControl.call(this);
  			var oldInit = this.Init;
  			this.Init = function(jsGridControl, jsRawGridData, params)
  			{
  			    oldInit.call(this, jsGridControl, jsRawGridData, params);
  			    DoCustomizations(jsGridControl);
  			};
  		}; 	
  },"SPGantt.js");
  
  function DoCustomizations(grid)
  {
  	grid.HideColumn("Title");
  }

Now, the column hiding is only the beginning. You have access to all the grid methods, so there’s a lot of power! Be sure to check out the main Javascript file “jsgrid.js” to find out all the methods. Small hint: use the Visual Studio 2010 addon “Javascript parser” to have a nice overview of the methods in the Javascript file.

Gantt view in 2010 with optimizations

Now to add the Javascript to the view , you can use a content editor and add it to the web part page. Don’t forget to handle the view picker issue when using this method. (I created a second web part that fixes the issue)

Well, that’s a wrap for the post. Hope you’ve found it useful! Happy debuging!

27 Responses to “SharePoint 2010: Customizing the Gantt view and the Client Grid”

  1. Sven G Says:

    Nice post, TomPoint.

  2. Sandrino Says:

    TomTom does it again!

  3. Jim Robinson Says:

    Pretty cool, I would have been digging a while. Say did you see any way to change the colors? I have a need to change the bar red based on certain conditions.

  4. Jeroen Says:

    Nice post Tom :). Interesting read

  5. Tombo Says:

    Hello Jim,

    Don’t remember seeing those. You could use CSS and jQuery though, as it always uses CSS to set colors. If I do find specific functionality to set colors, I’ll mention it here!

    Good luck!

    Cheers
    Tom

  6. eg10013 Says:

    Thank you for your post. I am looking a way to adjust the left column width. Would you please provide me the code to accomplish the need.

    Thanks.

  7. Tombo Says:

    eg10013,
    You can use SetSplitterPosition if my memory serves right.

    Cheers
    Tom

  8. rg Says:

    Just starting, where do I put this code?

  9. Tombo Says:

    It’s mentioned in the article!

  10. chr Says:

    Thank You very-very much for this information!!!!

    It is really usefull, solved my weeks-old problem… headache vanished. :)

  11. Colin Says:

    I have managed to hide one column and set the splitter position but i am struggling to figure out how to set a columns width.

    Any help would be appreciated.

  12. Charline Says:

    Hi Tom,

    I used your script to do some customizations on the SharePoint gantt grid :
    - to change the splitter position
    - to change the zoom level
    - to change the columns width

    This is my code :

    function DoCustomizations(grid)
    {
    grid.SetSplitterPosition(800);
    grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()-1);
    var columns = grid.GetColumns();
    $.each(columns, function(key, value) {
    value.width=200;});
    grid.UpdateColumns();
    }

    The splitter position and the zoom level are changed with this piece of code. However, for the columns width, if I open the Configuration colums dialog, I can see the values I put, but changes are only applied to the columns if I click on OK button of the Configuration columns dialog.

    Any help would be appreciated.

  13. Charline Says:

    I finally find how to update columns and I think it could help someone, so this is how to do :

    function DoCustomizations(grid)
    {
    grid.SetSplitterPosition(800);
    grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()-1);
    var columns = grid.GetColumns();
    $.each(columns, function(key, value) {
    value.width=200;});
    grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
    }

  14. ChuPaChuPs Says:

    WONDERFUL post!! Thanks TOM!

  15. Tombo Says:

    Nice! Thanks Charline!

  16. ImBSqrd Says:

    Great post…new to Sharepoint 2010. Trying to just expand column 2 in my grid; can’t seem to find the right syntax. Any help? Thanks, really like your page

  17. Ravinder Says:

    Hi Tombo,

    Can you please help me!!!

    I am struggling to get Colouring sorted on the GANTT view on SP2010; i have checked online for solutions using JQuery and CEWP but nothing seems to work, also need a solution to jump to the current date on the GANTT timeline, can you please assist. You can email me on r_jamgotre@hotmail.co.uk if you prefer.

  18. Ocio10 Says:

    I have a need to display ‘month/year’ in the columns instead of 7-day week .. any suggestions .. thanks

  19. Wiktor Says:

    Hi Tom,
    I’m having problems inserting this script. When I do users are no longer able to edit the page from the browser interface. Any ideas?

  20. sygwin Says:

    hi,I want to change the columns width,but I got a error:
    “Column width should have been adjusted via
    headerMgr.AdjustColumnWidth(column);”
    could you tell me why?

  21. sygwin Says:

    hi,I’m sygwin.I’m sorry ,I forgot to give my code.
    //====
    function DoCustomizations(grid)
    {
    var columns = grid.GetColumns();
    $.each(columns, function(key, value) {
    if(value.name==”Title”)
    {
    value.width=200;
    }
    });
    grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
    }

  22. Harvey Says:

    how can modify the bar color of the gantt.?
    I think something like :
    grid.SetGanttColor=Red”;

  23. Tom Stevens Says:

    Our company just switched from 2007 to 2010 a few months ago and I hate the new side by side view.

    how can I get the old style back?

  24. Nithya K Pillai Says:

    Hi.

    Is it possible to change Gantt bar style using javascript?

  25. SP Gantt View – CSS and JS | //Home Says:

    [...] function after named js is loaded. I am hooking the SP.GanttControll object. This was taken off of tomblog. A great [...]

  26. Matthew Sammut Says:

    Do you have any solution to get this to work with SP2013 ?

  27. Matthew Sammut Says:

    Your comment is awaiting moderation.

    I’ve tried the ‘hook’ with SP2013 but i get an error saying

    “SCRIPT438: Object doesn’t support property or method ‘WaitForGanttCreation’
    sp.ui.timeline.debug.js, line 3335 character 13″

    Is there a solution for this to work on a Gantt View in SP2013 ?

Leave a Reply