如何在SharePoint 2010 甘特视图上添加标题
创建一个Project Tasks列表，请问：如何在甘特视图上显示项目的名字。默认sharepoint甘特视图分两个区域，左侧是表格，右侧才算甘特图
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:
?123456789 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.
?12345678910111213141516171819 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!