Set the column width in GANTT view
-
10-12-2019 - |
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)...
Solution
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);
}