title: jQuery to modify SharePoint 2010 Column Width
body: <p>I feel this is a remedial question, but I have been battling for several days now….so forgive me.  I am working in SharePoint 2010 and have a task list in Gantt View.  The list has 6 columns plus the gantt chart.  These tasks are sync’ed (created) with Microsoft Project 2010.  Since the column widths are not persistent in SharePoint, I would like Column 2 (Title) to have a default width of 450px  (should be simple enough…right?).  I have tried many jquery options using the CEWP to try and set this column width.  I thought this would be easier that it appears…Can someone help me determine where I am off the track?  I have hunted the internet until by browser couldn't take it anymore...any help would be greatly appreciated.</p>
  
  <p>Options I have tried:  None of them seem to work…I have them in a text file in the Library (linked to the CEWP), the script is running, because I can set the splitterposition and zoom levels…just not the widths of the column.</p>
  
  <p><strong>Option #1</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      $(function(){
      $("TH.ms-vh2-nograd:contains('Title')").css("width", "450px"); 
      $("TH.ms-vb:contains('Title')").css("width", "450px"); }); 
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Option #2</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt; 
      $(function() 
      { 
          $("tr.ms-viewheadertr th:contains('Title')").css("width", "450px"); 
      });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Option #3</strong></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt; 
      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)
      {
      var columns = grid.GetColumns();
      $.each(columns, function(key, value) {
      value.width=450;});
      grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
      }
      &lt;/script&gt;
  </code></pre>
  
  <p>The Code that works is here. But can't resolve the column width.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      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) 
      {
      // Set the Splitter and Zoom Levels
      grid.SetSplitterPosition(725);
      grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2);
      }
  
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Results from Answer #1/Update 3</strong></p>
  
  <p>I was determined to solve this problem yesterday, but alas....  I have tried with no results to get the function to work properly.  I have searched, read, researched, to no avail.  It appears that the syntax for the selector statement is widely varied, and so I am not sure if I have a syntax error or an issue with CEWP and it's rendering of the generating function.  Some of the variations I tried:</p>
  
  <pre><code>$('th[title="Title"]').css("width", "450px","important"); 
  $('th[title="Title"]').css("width", "450px", "important");
  $('th[title="Title"]').css('width', '450px', 'important');
  $('th [title="Title"]').css("width", "450px", "important");
  $("th [title='Title']").css("width", "450px", "important");  
  </code></pre>
  
  <p>and on and on and on....   So I guess I have a few more questions and I will have to let it lie...</p>
  
  <p>1)  Is it possible that I don't have the right JavaScript Source Library Referenced?  The scripts do not show failure or syntax issues no matter which library I reference or code I use, but don't work either.  Currently I have this one referenced....</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>2)  Does the SharePoint CEWP somehow interfer with the JQuery edit?  I read in another post (can't find it again); where the page was not rendered all the way before the edit was made????</p>
  
  <p><strong>Update 4 Information</strong></p>
  
  <p>I changed logic to what is below to try and make sure....no difference</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;  
  
  $(function()  
  {  
     $(document).ready(function() {
      //Get the th that has a title attribute and it contains the value Title 
      $('th[title="Title"]').css("width", "450px","important");  
      });
  });
  &lt;/script&gt;
  </code></pre>