The following function could be used to autosize all cells in all columns for the UltraWebGrid.  The oerall Column width will auto set itself to the most characters, whether its a Column Header or a Cell

function InitWidth(gridName) {
    // Retrieve the grid based on its ID.
    var oGrid = igtbl_getGridById(gridName);

    // Get the Bands collection
    var oBands = oGrid.Bands;

    // Get the columns collection for Band 0
    var oBand = oBands[0];
    var oColumns = oBand.Columns;

    // The column count is equal to the length of the Columns array.
    var count = oColumns.length;
   
    // Create Column Array.
    var colArray = new Array();
   
    // Set each Column Header width.
    for (var i = 0; i < count; i++) {
        colArray[i] = document.getElementById(oColumns[i].Id).firstChild.offsetWidth;
    }

    var oRows = oGrid.Rows;
    var index = oColumns.Index;

    // Loop thru each row in the grid to set the column to the largest cell width.
    for (var i = 0; i < oRows.length; i++) {
        for (var n = 0; n < count; n++) {
            var cell = oRows.getRow(i).getCell(n);
            if (colArray[n] < cell.Element.firstChild.offsetWidth) {
                colArray[n] = cell.Element.firstChild.offsetWidth;
            }
        }
    }

    // Loop thru each Column in the grid to set the Column width to the largest width.
    for (var i = 0; i < count; i++) {
        oColumns[i].setWidth(colArray[i] + 5);
    }
}

You can call this function in:

thanks for the post.. it helped me when there is no group by selection

// Column Size Array
var colArray;
function InitWidth(gridName) {         
  // Retrieve the grid based on its ID.
  var oGrid = igtbl_getGridById(gridName);

  // Get the Bands collection
  var oBands = oGrid.Bands;

  // Get the columns collection for Band 0
  var oBand = oBands[0];
  var oColumns = oBand.Columns;

  // The column count is equal to the
  // length of the Columns array.
  var count = oColumns.length;

  // Initialise Column Size Array on the first call.
  if (colArray == null) {
    colArray = new Array();
    for (var i = 0; i < count; i++) {
      colArray[i] = 0;
    }
  }

  // Set each Column Header width.
  var oColHeaders;
  for (var i = 0; i < count; i++) {
    // Don't check columns that aren't displayed
    if (!oColumns[i].ServerOnly && !oColumns[i].Hidden) {
      // This loop is needed since each Column Header
      // have the same Id in every group. We need to
      // check them all because only opened groups will
      // have a value in "offsetWidth".
      oColHeaders = oGrid.MainGrid.getElementsByTagName('th');
      for (var j = 0; j < oColHeaders.length; j++) {
        if (oColHeaders[j].getAttribute('id') == oColumns[i].Id) {
          var colWidth = oColHeaders[j].firstChild.offsetWidth;
          if (colArray[i] < colWidth) {
            colArray[i] = colWidth;
          }
          if (colWidth > 0) {
           // We found a displayed header, no need to check them all.
            break;
           }
        }
      }
    }
  }

  // Get the width from the data rows
  ParseNonGroupingRows(oGrid.Rows, oColumns, colArray);

  //if  grid widths > colArray's count
  ChangeColumnsWidthToFix(oColumns,oGrid.MainGrid.clientWidth-50,colArray);
  /*
 
  var colWidthCount=0;
  var enableColumns=0;
  var avgWidth=5;
  var maxWidth=200;
  for (var i = 0; i < count; i++) {
    // Don't check columns that aren't displayed
    if (!oColumns[i].ServerOnly && !oColumns[i].Hidden) {
        colWidthCount+=colArray[i];enableColumns++;
    }
  } 
  if(colWidthCount<oGrid.MainGrid.clientWidth)
  {   
     avgWidth=Math.round((oGrid.MainGrid.clientWidth- colWidthCount)/enableColumns);    
  }
 
 
  // Loop through each Column in the grid to set
  // the Column width to the largest width found.
  for (var i = 0; i < count; i++) {
    // Don't set the width for columns that weren't available
    if (colArray[i] > 0) {
      // Note: the 10 pixels padding here might need to be
      // adjusted depending on the layout and styles of the grid.     
      oColumns[i].((colWidthArry[i]+avgWidth)>maxWidth?maxWidth:(colWidthArry[i]+avgWidth));
    }
  }
 }*/

}

function ChangeColumnsWidthToFix(colList,gridWidth,colWidthArry)
{  //debugger;
  var enableColumns=0;
 
  var avgWidth=5; 
  var maxWidth=200;
 
  var colWidthCount=0;
  var gerColWidthCount=0;
 
  var lstWidth="";
  for (var i = 0; i < colList.length; i++) {
    // Don't check columns that aren't displayed
    if (!colList[i].ServerOnly && !colList[i].Hidden) {
        enableColumns++;
        colWidthCount+=colArray[i];
        if(colArray[i]>maxWidth)
            lstWidth+=(lstWidth==""?i:","+i);
        else
            gerColWidthCount+=colArray[i];
    }
  }  
  if(colWidthCount<gridWidth)
  {        
     avgWidth=Math.round((gridWidth- colWidthCount)/enableColumns);        
  }
  else
  {
      if(lstWidth!="")
      {
        var strA=lstWidth.split(',');
        var w=gridWidth-gerColWidthCount;
        if(w<0 || (colWidthCount-gerColWidthCount-strA.length*maxWidth)<0)
        {
            for(var e=0;e<strA.length;e++)
                colWidthArry[parseInt(strA[e])]=maxWidth;  
        }
        else
        {           
            var nw=Math.round(w/strA.length);
            for(var e=0;e<strA.length;e++)
                colWidthArry[parseInt(strA[e])]=nw;
        }
      }     
  }
  // Loop through each Column in the grid to set
      // the Column width to the largest width found.
      for (var i = 0; i < colList.length; i++) {
        // Don't set the width for columns that weren't available
        if (colWidthArry[i] > 0) {
          // Note: the 10 pixels padding here might need to be
          // adjusted depending on the layout and styles of the grid.     
          colList[i].setWidth(colWidthArry[i]+avgWidth);
        }
      }    
}

// This function go through each level of grouping rows
// in order to get to the data rows
function ParseNonGroupingRows(rowList, colList, colWidthArray) {
  if (rowList.getRow(0).GroupByRow) {
    // Check if the first row is a GroupBy row
    for (var i = 0; i < rowList.length; i++) {
      // If so, call the function recursively for each
      // GroupBy row in the list, passing out it's
      // (child) Rows collection to the function.
      ParseNonGroupingRows(rowList.getRow(i).Rows, colList, colWidthArray);
    }
  } else {
    // The first row is a data row, parse all the rows
    // in the collection to get their cells width.
    GetRowsCellWidth(rowList, colList, colWidthArray);
  }
}

// This function do the actual job of getting the columns
// width from each cell
function GetRowsCellWidth(rowList, colList, colWidthArray) {
  for (var i = 0; i < rowList.length; i++) {
    for (var n = 0; n < colList.length; n++) {
      // Don't check columns that aren't displayed
      if (!colList[n].ServerOnly && !colList[n].Hidden) {
        var cell = rowList.getRow(i).getCell(n);
        if (colWidthArray[n] < cell.Element.firstChild.offsetWidth) {
          colWidthArray[n] = cell.Element.firstChild.offsetWidth;
        }
      }
    }
  }
}

// Call the function in the grid's events
function InitializeLayout(gridName){
  InitWidth(gridName);
}

function AfterRowExpanded(gridName){
  InitWidth(gridName);
}

// Column Size Array
var colArray;
function InitWidth(gridName) {         
  // Retrieve the grid based on its ID.
  var oGrid = igtbl_getGridById(gridName);

  // Get the Bands collection
  var oBands = oGrid.Bands;

  // Get the columns collection for Band 0
  var oBand = oBands[0];
  var oColumns = oBand.Columns;

  // The column count is equal to the
  // length of the Columns array.
  var count = oColumns.length;

  // Initialise Column Size Array on the first call.
  if (colArray == null) {
    colArray = new Array();
    for (var i = 0; i < count; i++) {
      colArray[i] = 0;
    }
  }

  // Set each Column Header width.
  var oColHeaders;
  for (var i = 0; i < count; i++) {
    // Don't check columns that aren't displayed
    if (!oColumns[i].ServerOnly && !oColumns[i].Hidden) {
      // This loop is needed since each Column Header
      // have the same Id in every group. We need to
      // check them all because only opened groups will
      // have a value in "offsetWidth".
      oColHeaders = oGrid.MainGrid.getElementsByTagName('th');
      for (var j = 0; j < oColHeaders.length; j++) {
        if (oColHeaders[j].getAttribute('id') == oColumns[i].Id) {
          var colWidth = oColHeaders[j].firstChild.offsetWidth;
          if (colArray[i] < colWidth) {
            colArray[i] = colWidth;
          }
          if (colWidth > 0) {
           // We found a displayed header, no need to check them all.
            break;
           }
        }
      }
    }
  }

  // Get the width from the data rows
  ParseNonGroupingRows(oGrid.Rows, oColumns, colArray);

  //if  grid widths > colArray's count ,
  var colWidthCount=0;
  var enableColumns=0;
  var avgWidth=5;
  for (var i = 0; i < count; i++) {
    // Don't check columns that aren't displayed
    if (!oColumns[i].ServerOnly && !oColumns[i].Hidden) {
        colWidthCount+=colArray[i];enableColumns++;
    }
  } 
  if(colWidthCount<oGrid.MainGrid.clientWidth)
  {   
     avgWidth=Math.round((oGrid.MainGrid.clientWidth- colWidthCount)/enableColumns);    
  }
 
 
  // Loop through each Column in the grid to set
  // the Column width to the largest width found.
  for (var i = 0; i < count; i++) {
    // Don't set the width for columns that weren't available
    if (colArray[i] > 0) {
      // Note: the 10 pixels padding here might need to be
      // adjusted depending on the layout and styles of the grid.     
      oColumns[i].setWidth((colArray[i] + avgWidth));
    }
  }
}

// This function go through each level of grouping rows
// in order to get to the data rows
function ParseNonGroupingRows(rowList, colList, colWidthArray) {
  if (rowList.getRow(0).GroupByRow) {
    // Check if the first row is a GroupBy row
    for (var i = 0; i < rowList.length; i++) {
      // If so, call the function recursively for each
      // GroupBy row in the list, passing out it's
      // (child) Rows collection to the function.
      ParseNonGroupingRows(rowList.getRow(i).Rows, colList, colWidthArray);
    }
  } else {
    // The first row is a data row, parse all the rows
    // in the collection to get their cells width.
    GetRowsCellWidth(rowList, colList, colWidthArray);
  }
}

// This function do the actual job of getting the columns
// width from each cell
function GetRowsCellWidth(rowList, colList, colWidthArray) {
  for (var i = 0; i < rowList.length; i++) {
    for (var n = 0; n < colList.length; n++) {
      // Don't check columns that aren't displayed
      if (!colList[n].ServerOnly && !colList[n].Hidden) {
        var cell = rowList.getRow(i).getCell(n);
        if (colWidthArray[n] < cell.Element.firstChild.offsetWidth) {
          colWidthArray[n] = cell.Element.firstChild.offsetWidth;
        }
      }
    }
  }
}

// Call the function in the grid's events
function InitializeLayout(gridName){
  InitWidth(gridName);
}

function AfterRowExpanded(gridName){
  InitWidth(gridName);
}

Instead of looping through all the cells in a column just use the PerformAutoResize on the specific column

Hi Mike,

Nice code sample. Unfortunately, it will only works on the first grid's band and if the grid doesn't have GroupBy rows nor ServerOnly columns. Getting it to work on multiple Bands isn't that hard. Getting it to work with GroupBy rows is somewhat harder...

I've been playing around with your code (quite) a bit and I've been able to get it to work with more complicated grids. I just wanted to post my take on this and I'd like to know if there is anything that could be improved.

Here's my code:

// Column Size Array
var colArray;

function InitWidth(gridName) {

  // Retrieve the grid based on its ID.
  var oGrid = igtbl_getGridById(gridName);

  // Get the Bands collection
  var oBands = oGrid.Bands;

  // Get the columns collection for Band 0 
  var oBand = oBands[0];
  var oColumns = oBand.Columns;

  // The column count is equal to the
  // length of the Columns array.
  var count = oColumns.length;

  // Initialise Column Size Array on the first call.
  if (colArray == null) {;
    colArray = new Array();
    for (var i = 0; i < count; i++) {
      colArray[i] = 0;
    }
  }

  // Set each Column Header width.
  var oColHeaders
  for (var i = 0; i < count; i++) {
    // Don't check columns that aren't displayed
    if (!oColumns[i].ServerOnly && !oColumns[i].Hidden) {
      // This loop is needed since each Column Header 
      // have the same Id in every group. We need to
      // check them all because only opened groups will
      // have a value in "offsetWidth".
      oColHeaders = oGrid.MainGrid.getElementsByTagName('th')
      for (var j = 0; j < oColHeaders.length; j++) {
        if (oColHeaders[j].getAttribute('id') == oColumns[i].Id) {
          var colWidth = oColHeaders[j].firstChild.offsetWidth
          if (colArray[i] < colWidth) {
            colArray[i] = colWidth;
          }
          if (colWidth > 0) {
           // We found a displayed header, no need to check them all.
            break;
           }
        }
      }
    }
  }

  // Get the width from the data rows
  ParseNonGroupingRows(oGrid.Rows, oColumns, colArray);

  // Loop through each Column in the grid to set
  // the Column width to the largest width found.
  for (var i = 0; i < count; i++) {
    // Don't set the width for columns that weren't available
    if (colArray[i] > 0) {
      // Note: the 10 pixels padding here might need to be 
      // adjusted depending on the layout and styles of the grid.
      oColumns[i].setWidth(colArray[i] + 10);
    }
  }
}

// This function go through each level of grouping rows 
// in order to get to the data rows
function ParseNonGroupingRows(rowList, colList, colWidthArray) {
  if (rowList.getRow(0).GroupByRow) {
    // Check if the first row is a GroupBy row
    for (var i = 0; i < rowList.length; i++) {
      // If so, call the function recursively for each 
      // GroupBy row in the list, passing out it's 
      // (child) Rows collection to the function.
      ParseNonGroupingRows(rowList.getRow(i).Rows, colList, colWidthArray)
    }
  } else {
    // The first row is a data row, parse all the rows
    // in the collection to get their cells width.
    GetRowsCellWidth(rowList, colList, colWidthArray);
  }
}

// This function do the actual job of getting the columns 
// width from each cell
function GetRowsCellWidth(rowList, colList, colWidthArray) {
  for (var i = 0; i < rowList.length; i++) {
    for (var n = 0; n < colList.length; n++) {
      // Don't check columns that aren't displayed
      if (!colList[n].ServerOnly && !colList[n].Hidden) {
        var cell = rowList.getRow(i).getCell(n);
        if (colWidthArray[n] < cell.Element.firstChild.offsetWidth) {
          colWidthArray[n] = cell.Element.firstChild.offsetWidth;
        }
      }
    }
  }
}

// Call the function in the grid's events
function myGrid_InitializeLayoutHandler(gridName){
  InitWidth(gridName);
}

function myGrid_AfterRowExpandedHandler(gridName){
  InitWidth(gridName);
}

Some points of interest:

• This code still works only on the first band.
• The <th> elements used by the UltraWebGrid to display the same column header under each GroupBy row will all have the same "id" attribute value. So using something like "document.getElementById(oColumns[i].Id).firstChild.offsetWidth" will return the first header found in the grid (that is, the one found under the first GroupBy row). Now if this header is under a collapsed GroupBy row, it's width will always be 0...
• Columns that are ServerOnly are still listed in a band's Columns list, but no actual HTML objects will be rendered for them. So calling document.getElementById(oColumns[i].Id) on these columns will return null.
• If the grid starts in a collapsed state, you will need to wire the AfterRowExpandedHandler of the grid to the InitWidth function because the grid can't get the width of collapsed rows cells. Another way around would be to expand all the rows in the grid before calling InitWidth and then to collapse all the rows back again after. Not sure which way is better.
• Keeping the column size array outside the function call allows it to remember the widest columns that were found, even if the rows containing them have been collapsed afterward. Since the function will be called each time a row expands. This will give the grid a more constant appearance (it won't shrink back a column).

All in all, this has been a fun experiment with the UltraWebGrid CSOM. God bless my JavaScript debugger for being able to inspect how all these objects where interacting!

Hope this can help someone else.

By the way, it would be very nice to add an actual AutosizeColumns() function somewhere in the CSOM or even better a property on the Band object in server side.

Regards,

Eric Brousseau,
Software developper