SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

When the GANTT view is being used, how could one resize the columns using jQuery without using the generated controlid (like in this example)? I'm looking for a way to do this in a re-usable javascript function.

I'm thinking to be able to find a control that has ListViewWebPartJSGrid in its id. It is possible that there would be more than one on the page, but that would work out.


Okay, I figured out how to fetch the control id (you can see the color change):

var $trackingGridID = $("[id$=_ListViewWebPartJSGrid_leftpane_mainTable]").attr("id");
$('#' + trackingGridID).css("background-color", "blue");

//this will fetch:  ctl00_ctl21_g_c3e5fead_d466_4448_9648_dcb92778921d_ListViewWebPartJSGrid_leftpane_mainTable

Now that I have the ID, it is a matter of figuring out how to modify the column widths...

But I want to do something like this:

function SetColumnWidths(column1, column2, column3)...
share|improve this question
up vote 2 down vote accepted

Ah, got it.

First, fetch the dynamic controlid. For our purposes, the non-dynamic part of it is _ListViewWebPartJSGrid_leftpane_mainTable, so we'll jQuery that.

var $trackingGridID = $("[id$=_ListViewWebPartJSGrid_leftpane_mainTable]").attr("id");
$('#' + trackingGridID).css("background-color", "blue");

//this will fetch: ctl00_ctl21_g_c3e5fead_d466_4448_9648_dcb92778921d_ListViewWebPartJSGrid_leftpane_mainTable

Fetch the Column by index (to change the colour, you have to modify the various a properties)

var thiscolumn = $('#' + trackingGridID + " th[role='columnheader']:eq(0)");    
$(thiscolumn).css("width", "400");

Fetch a row by index:

var thisrow = $('#' + trackingGridID).find("tr:eq(2)"); 
$(thisrow).css("background-color", "blue");

Fetch a particular cell by index:

var thiscell = $('#' + trackingGridID).find("td:eq(6)");
$(thiscell).css("background-color", "yellow");

Of course, to change the width, you just add this to the vars:

.css("width", "400");

The Function

SetGanntColumnWidth(0, 400)  //set the first column's width
SetGanntColumnWidth(2, 350)  //set the third column's width

//The third parameter is optional in case the idpart changes
function SetGanntColumnWidth(whatcolumn, whatwidth, whatidpart){
        whatidpart = "_ListViewWebPartJSGrid_leftpane_mainTable";
    var thisid = $("[id$=" + whatidpart + "]").attr("id");
    var thiscolumn = $('#' + thisid + " th[role='columnheader']:eq(" + whatcolumn + ")");

    $(thiscolumn).css("width", whatwidth);
    $(thiscolumn).children().css("width", whatwidth);   
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.