jQuery to modify SharePoint 2010 Column Width

Question

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.

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.

Option #1

    <script type="text/javascript">
    $(function(){
    $("TH.ms-vh2-nograd:contains('Title')").css("width", "450px"); 
    $("TH.ms-vb:contains('Title')").css("width", "450px"); }); 
    </script>

Option #2

    <script type="text/javascript"> 
    $(function() 
    { 
        $("tr.ms-viewheadertr th:contains('Title')").css("width", "450px"); 
    });
    </script>

Option #3

    <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)
    {
    var columns = grid.GetColumns();
    $.each(columns, function(key, value) {
    value.width=450;});
    grid.UpdateColumns(grid.parentNode.jsgridtableviewparams.columns);
    }
    </script>

The Code that works is here. But can't resolve the column width.

    <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) 
    {
    // Set the Splitter and Zoom Levels
    grid.SetSplitterPosition(725);
    grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2);
    }

    </script>

Results from Answer #1/Update 3

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:

$('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");  

and on and on and on.... So I guess I have a few more questions and I will have to let it lie...

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....

<script src="http://code.jquery.com/jquery-latest.js"></script>

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????

Update 4 Information

I changed logic to what is below to try and make sure....no difference

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">  

$(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");  
    });
});
</script>

Answer 1

Finally got it nailed....The finial script is below that does all the actions I was needing (for future reference of others). Thanks so much for hanging with me and helping me out. Combiniation of your logic and some syntax cleanup on my code and we got it resolved. Thanks Again, I would have struggled for many more days without help!

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
JSRequest.EnsureSetup();
    //ensure document is ready
    $(document).ready(function() 
    {
        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(725); //set the splitter position
        grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2); //set the zoom level
        $("th[title='Title']").css("width", "450px","important"); // set the column width
    }
</script>

Answer 2

Try changing the selector to: :

<script type="text/javascript"> 
$(function() 
{ 
    //Get the th that has a title attribute
    $("th[title]").css("width", "450px","important"); 
});
</script>

Update

Does this css reference sheet contains a reference to the element you need? Also check the selector.

Also, can you post the generated HTML instead of the generating function?

Update two

Ok, based on the generated code i did a example of the structure in jsfiddle and i also added the important to the css atribute to asure if would work out. Although you might need to change the example to make it work for you (you have div inside the th so you might need to change those div's to) i'm updating the code again so you can try it this instead (changed the T for t in title).

Update three

Thank you for that, know i understand that you don't need the element to just have the attribute title but that it contains Title. There are many options to find a attribute value, however i commonly use this three:

• Attribute Contains Prefix Selector [attr|="value"]

Description: Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).

• Attribute Contains Selector [attr*="value"]

Description: Selects elements that have the specified attribute with a value containing the a given substring.

• Attribute Equals Selector : [attr="value"]

Description: Selects elements that have the specified attribute with a value exactly equal to a certain value.

In our specific case i suggest you to use the third option. I'm going to write a new code of block to keep a bit more of this post history.

<script type="text/javascript"> 
$(function() 
{ 
    //Get the th that has a title attribute and it contains the value Title
    $('th[title="Title"]').css("width", "450px","important"); 
});
</script>

Hope it's finally fixed now.

Update Four

Are putting your jquery code inside jquery document ready?

Update Five

I've been reading that there might be a conflict using $, so try using jQuery instead.

<script type="text/javascript"> 
   jQuery(function(){ 

      //Get the th that has a title attribute and it contains the value Title
      jQuery('th[title="Title"]').css("width", "450px","important"); 

   });
</script>

Answer 3

TH tags in SharePoint don't contain a title attribute.

Answer 4

This probably should just be a comment on BryanB's answer, however I lack the reputation and I believe that other people will benefit from this, so here goes.

I used the solution that BryanB posted, however only changing the css width did not change the internal width that the grid stores. This caused to distinct issues:

1. The column dropdown, where you can select a sort, did not move from the original 100px default position
2. When adjusting the width of the column by dragging it would jump to the original 100px default position and then adjusted as normal.

The solution is to adjust the column width in the jsRawGridData variable before it initializes the grid. I only got it to work with the direct array reference, however the title is in there so worst case a simple loop would allow you to set a width by column title instead of position.

<script src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
JSRequest.EnsureSetup();
    //ensure document is ready
    $(document).ready(function() 
    {
        ExecuteOrDelayUntilScriptLoaded(function() 
        { 
            var oldGanttControl = SP.GanttControl; 
            SP.GanttControl = function() 
            { 
                oldGanttControl.call(this); 
                var oldInit = this.Init; 
                this.Init = function(jsGridControl, jsRawGridData, params) 
                { 
                    FixColumnWidth(jsRawGridData);
                    oldInit.call(this, jsGridControl, jsRawGridData, params); 
                    DoCustomizations(jsGridControl); 
                }; 
            }; 
        },"SPGantt.js"); 
    });

    function FixColumnWidth(data)
    {
        data.Columns[1].width=450;
    }


    function DoCustomizations(grid) 
    {
        grid.SetSplitterPosition(725); //set the splitter position
        grid.SetGanttZoomLevel(grid.GetGanttZoomLevel()+2); //set the zoom level
    }
</script>