JQuery for Everyone: Fixing the Gantt View

Does anyone know how to freeze the Title column in Project Task list Gantt chart view?

Since I want to get better using jQuery, and tweaking the UI will be easier than fixing the web part, I went after it. Instead of freezing the Title column, I decided to drop the x-axis scrollbar and add labels to the ends of each activity. Since the header rows also disappear when you scroll down on the inner scrollbar, I froze the date header by moving it out of the chart area.

But I couldn't stop there.  I don't always need the Task List View below my chart and sometimes I need to see more of the chart at once. I decided to add some buttons to the toolbar that control the List View display and Gantt View height.

Check out the results of these tweaks in this screencast: Video: SharePoint Gantt Fix

view source

print?

01	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

02	<script type="text/javascript">

03	$(function() {

04	//capture variables

05	var div=$("div[class^='ms-ganttDiv']:eq(0)");

06	var tlv=$("table.ms-listviewtable:eq(0)");

07	var w = $("#GanttTable").width();

08	var a = "img[src='/_layouts/images/EndNormal.gif']"

09	var b = "img[src='/_layouts/images/MileStone.gif']"

10	//build new html from header rows

11	var html="<table class='ms-ganttInnerTable' cellspacing='0' cellpadding='0' style='table-layout:fixed' width='"+w+"'>"+

12	"<col width='222px'></col>"+

13	"<tbody><tr>"+

14	$("#GanttTable tr:eq(0)").html()+

15	"</tr><tr class='ms-ganttDetailTimeUnitRow'>"+

16	$("#GanttTable tr:eq(1)").html()+

17	"</tr></tbody></table>";

18	//build toggle buttons

19	var bt1="<input id='tlv0' class='ms-ButtonHeightWidth' type='button' target='_self' value='Toggle List' name='togglelv'/>";

20	var bt2="<input id='div100' class='ms-ButtonHeightWidth' type='button' target='_self' value='Full Gantt' name='div100'/>";

21	var bt3="<input id='div272' class='ms-ButtonHeightWidth' type='button' target='_self' value='Min Gantt' name='div100'/>";

22	//DOM manipulation

23	$("#GanttTable").prepend("<col width='222px'></col>");

24	$("table.ms-menutoolbar:eq(0)").after(html);                                //insert html

25	$("td.ms-toolbar[width='99%']").append(bt1).append(bt2).append(bt3);//add buttons

26	$("#tlv0").click(function() {$(tlv).toggle()});                     //add toggle fn

27	$("#div100").click(function() {

28	$(div).height("100%");

29	$(div).css({"overflow-y": "visible", position: "relative"});

30	});                                                                 //add 100% fn

31	$("#div272").click(function() {

32	$(div).height("272");

33	$(div).css({"overflow-y": "auto"});

34	});                                                                 //add 272 fn

35	$("#GanttTable tr:lt(2)").replaceWith("<th></th>");                 //replace original rows

36	$(a+", "+b).each(function(i,e) {                                    //add labels

37	var title = $(e).parent().siblings("th").text();

38	$(e).parent().next().html("<div style='position:relative;z-index:99;white-space: nowrap'>"+title+"</div>");

39

});

40	//css fixes

41	$("#GanttTable").css({"table-layout":"fixed","word-wrap":"normal",width:w});

42	$("table.ms-listviewtable > tbody > tr[class='']").css("background-color","#fff");

43	$(div).css({"overflow-y": "auto", "overflow-x": "hidden"});

44

});

45

</script>

46	<style type="text/css">

47	body {background-color:#83B0EC}

48	.ms-main {height:97%}

49	.ms-globalTitleArea {background-color:#fff}

50	.ms-bodyareapagemargin {border-top:1px solid #83B0EC}

51	.ms-bodyareaframe {background:none transparent}

52	.ms-ganttInnerTable {background-color:#fff}

53	.ms-bodyareacell {background-color:#83B0EC}

54

</style>