Auto-size columns in Infragistics WebDataGrid

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:

WebDataGrid with autosized 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:

WebDataGrid with shrunk columns

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!

WebDataGrid columns resized incorrectly

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

7 replies on “Auto-size columns in Infragistics WebDataGrid”

  1. I have grid inside WebTab. I implemented and later found that in Firefox WebTab disappears when I hook this code as client side event in WebDataGrid.

  2. @Sree, it shouldn’t really affect any outside controls (in my case grid is inside of WebSplitter control which is in turn inside of WebTab). Does it look OK in IE?

  3. Hi Yuriy,
    As you said in the comment for the newer version of this post, the solution with setting the width on server-side is not perfect.
    I’m trying to implement this solution but I’m kinda stuck. I don’t have width set anywhere and the columns fill my datagrid proportionally. They doesn’t expand for longer text. See screen: http://prntscr.com/23uoni

    That’s the problem number one.
    The other one is that the function: oCol.set_width() does not seem to work. Any help would be appreciated.

  4. @JKL glad you found the problem. And thanks for pointing the “px” issue, I guess I was testing with IE only at that time and IE doesn’t care if “px” is there or not.

Leave a Reply

Your email address will not be published. Required fields are marked *