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:
- 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? - 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
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 fordgrid
obj.There are a few steps:
1) Create a
<div>
tag in your html calltest
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:
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 yourlayout
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:
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: