Configuring dgrid cells to display the full width of the data

Question

I'm writing an application where the resulting dgrid may have a different number of columns/column-widths depending on the input. Note the following two screenshots. The first one only has a few select fields, and the cells/data render nicely horizontally. the second query has many select fields, and as you can see renders undesirably as it attempts to fit all the cells into one screen cluttering the data. Note the dgrid is also sitting within a dijit BorderContainer.

Screenshot 1 (Small SELECT fieldset, renders ok)

Screenshot 2 (Large SELECT fieldset, renders undesirably

There will be a number of issues to contend with here, but I guess my main question is:

1. is there a css rule (or any other way - a dgrid function/event?) I can use to specify for the cells to expand to use the full width of the data within it without cutting it off (ie no overflow)? This would then need the grid to be displayed with a horizontal scrollbar. So I'd like the data to drive the width of the grid, rather than setting the width. I tried .dgrid-cell { white-space:nowrap; } but this seemed to be ignored. It almost seems like a span needs to be added inside of the cell, which would have the above css rule?
2. Secondarily - the next issue will be determining in which cases I should apply the above rule, vs the cases where the data DOES fit in the screen. In those situations it may be best to just let the table use the 100% width as per the first screenshot. any input on this one?

Thanks

Answer 1

Here I the way I set a grid cell width based on data. This is for a datagrid obj but you probably need to make a few adjustments for dgrid obj.

There are a few steps:

1) Create a <div> tag in your html call test

<div id="test"></div>

2) Loop through the data for each column in the grid and capture the largest width of the data for that column using javascript like:

var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
  tst_item.innerHTML = columns[i]; //columns array represents data that will display for the column
   widthPX = (tst_item.clientWidth + 1); //Give width in PX of the data pad it a bit as needed
}

Important items here include setting the appropriate font-size (fnt_sz), looping though all the column data to find the largest width in PX for the column. Use the largest widthPX for the column to set the column width in your layout object for the datagrid.

3) When creating the layout JSON data for your datagrid, set the width for each column (Max data widthPX for the column). Something like:

var build_layout = "    var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
  build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},"; 
}
build_layout += "]];";
eval(build_layout);

/*create a new grid*/
var grid = new DataGrid({
  id: 'grid',
  store: store,
  structure: layout, //Use layout JSON data which has width: xxpx; set for each column
  rowSelector: '20px',
  style: 'font-size:9pt',
  rowsPerPage: 1000,
  columnReordering: true,
  autoWidth: true,
  autoHeight: autoH});

When the grid displays, it should look good in any browser and all data should be visible because the column width PX value is greater than the largest data item for that column.. Should be easy enough to add a max px value for each column so things don't get out of hand with the width.

This is a bit of a pain in the $ss and should be a property of the dojo datagrid object but......

Here is what I end up with going through these steps: