Problem

There is no way to fix a Project Tasks View column width permanently in SharePoint. A column width can be changed from heading by using the Configure Columns option but after navigation to other site/library width goes back to its default value. For example if someone wants to show the Resource Name column width 200 pixels instead of default 100 pixels,  then he will need to change column width again and again from the column configuration. Changed width configuration doesn’t persist forever.

Solution

The above mentioned problem can be solved by using JavaScript. Below are steps needed to add script on a page that will adjust required column(s) width.

  1. Open browser and go to Project Site with Project Tasks view
  2. From Site Actions click Edit Page
  3. On page click Add a Web Part

4. Under Categories, select Media and Content;under Web Parts select Content Editor and click the Add button

5. Select newly added web part and click Edit HTML Source under HTML from top menu

6. In the HTML Source editor,add following code and click OK button

<script type=”text/javascript”>

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.SetSplitterPosition(650);

grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()-1);

var tabl = document.getElementById(‘ctl00_m_g_98b1d4ed_6602_42da_b393_b4e2781c58cd_ListViewWebPartJSGrid_leftpane_mainTable’);

var row = tabl.rows(0);

AdjustWidth(row, 1, “150px”, “149px”, “140px”);

}

function AdjustWidth(row, cellNumber, cellWidth, divWidth, innerDivWidth)

{

row.cells(cellNumber).style.width=cellWidth;

var divs = row.cells(cellNumber).getElementsByTagName(‘div’);

divs(0).style.width=divWidth;

divs(1).style.width=divWidth;

var innerDivs = divs(1).getElementsByTagName(‘div’);

innerDivs(1).style.width=innerDivWidth;

}

</script>

7. In above code function  AdjustWidth(ROW, COLUMN_NUMBER, NEW_COLUMN_WIDTH, NEW_CELL_WIDTH, NEW_DIV_WIDTH);  is calling other function to adjust width of column according to the passing column number as parameter. Other parameters are adjusting cell width and div width contains this cell

Hope this post will give you an idea on how we can hook up the Gantt Control in startup and adjust the column width.