Ever wished your WebDataGrid could have Table Layout = Auto like old UltraWebGrid? Then it could automatically resize columns width to data width with respect line breaks. Well, it can, and in style (pan intended). Thanks to Infragistics tech-support for starting me in the right direction – here’s first 2 steps that need to be taken:

1. Don’t set column width property – either default or for specific column either in server-side code or declaratively and don’t set grid’s width property
2. Open your grid CSS class file, it’s located at ~/ig_res/[Your Style Name]/ig_dataGrid.css.
   Locate tbody.igg_[Your Style Name]Item>tr>td class and add one more line at the end: white-space:nowrap. Here is an example with Office 2007 Style:

   tbody.igg_Office2007BlueItem>tr>td
   {
   	background-color:White;
   	border-right:solid 1px #D0D7E5;
   	border-bottom:solid 1px #D0D7E5;
   	padding:2px 5px 2px 5px;
   	height: 18px;
   	overflow: hidden;
   	text-align:left;
   	vertical-align:middle;
   	white-space:nowrap;
   }

Run your project – you will get a nicely autoresized grid columns:

But there’s one problem with this approach. If width of the data in the grid column is smaller than column header width (or if there’s no data at all) – column shrinks – cutting header’s text:

This can be fixed client-side by setting column width explicitly for those columns whose width is too small to show full header. Here’s a sample code that can be put in grid Initialize client-side event:

 // reference to the grid
var oGrid = $find('xwdgMyGrud'); if (!oGrid) return;

// refefrence to grid columns
var aGridCols = oGrid.get_columns(); if (!aGridCols) return;
var iColCount = aGridCols.get_length(); if (iColCount == 0) return;
var oCol;

// looping thru grid columns, checking width
for (var I = 0; I < iColCount; I++) {
   oCol = aGridCols.get_column(I);

   if (!oCol.get_hidden()) {
      // If header width is less then data width - resize column
      if (oCol.get_headerElement().offsetWidth < 
                                  oCol.get_headerText().length * 7) {
         oCol.set_width(oCol.get_headerText().length * 7);
      }
   }
}

This code loops thru all columns in the grid and if a column isn’t hidden – checks if header text is visible. The way it does it is a bit of a hack – the code compares current header’s HTML element’s offset width against header text length in characters times times font size in pixels (in my case it’s * 7, in your case – make proper adjustments). And it works, but I found a small caveat: If column width is not set server-side, client-side set_width() method only adjusts header width, leaving the rest of the column original size!

Columns width data become misaligned against their headers. Infragistics says it’s not a bug, but oh well then we have to correct it in our code. To fix it – we have to set width of the grid’s data part (which is rendered as a separate HTML table) to total width of all the columns after autosizing. Let’s modify the code above a little:

 // reference to the grid
var oGrid = $find('xwdgMyGrud'); if (!oGrid) return;

// refefrence to grid columns
var aGridCols = oGrid.get_columns(); if (!aGridCols) return;
var iColCount = aGridCols.get_length(); if (iColCount == 0) return;
var oCol;
var iColLength = 0;

// looping thru grid columns, checking width
for (var I = 0; I < iColCount; I++) {
   oCol = aGridCols.get_column(I);

   if (!oCol.get_hidden()) {
      // If header width is less then data width - resize column
      if (oCol.get_headerElement().offsetWidth < 
                                  oCol.get_headerText().length * 7) {
         oCol.set_width(oCol.get_headerText().length * 7);
      }

      // calculating total size of columns
      iColLength += oCol.get_headerElement().offsetWidth; 
   }
}

//setting grid width to summary width of all columns
oGrid.get_rows().get_element().parentElement.style.width = iColLength + 'px';

The only difference between this snipped and the one above – we calculate total length of all visible columns and assign the value to width of the HTML table element that holds grid data. The result – perfectly aligned auto-sized columns in WebDataGrid.

P.S. (and thanks again Infragistics tech-support for the tip). Grid rendered this way can become quite lengthy. If you don’t want to scroll your entire browser window – you can place the grid into a container element, for example DIV with fixed dimensions and overflow style set to auto.

Update: Here is an improved approach to column auto-sizing, that also works for WebHierarchicalDataGrid