Set the column width in GANTT view

Question

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.

[update]

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

Answer 1

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){
    if(!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);   
}