Reputation:
I'm trying to fix the height of a Dojox 1.3 Datagrid to a single line (like Excel). The current functionality is to automatically increase the row's height when more data than will fit into a single line is available.
Is there an easy way to accomplish this? It seems like it should be built in functionality for a datagrid, conisidering that this is the default behavior for spreadsheets.
Thanks for the help
Upvotes: 0
Views: 5638
Reputation: 838
Found a hack!
use this as the column formatter:
function(obj){
return "<div style='height:15px;text-overflow:ellipsis'>"+obj+"</div>"
}
This is just a hack and I'm seeing some problem with the row selector. But anyway, hope this help you guys.
Upvotes: 1
Reputation: 83
I think you can.
Here is what I've been experimenting with:
In class .dojoxGridCellContent, add:
white-space:nowrap; overflow:hidden;
For my "Squeeze/Expand" functions, I use a little function to dynamically change a class attribute and then I re-paint the grid.
I'm a firm believer in the need to be able to crunch rows (both in Excel and in html) down to 1 "row" high in order to facilitate vertical visual scanning (truncating cell contents as necessary) and then to be able to expand them out again to see the full contents in a cell on any particular row.
Manually sizing the column to be wide enough to fit all the possible text in any given cell is a terrible solution if you have variable amounts of text in any given cell. For productivity apps, non-functional white space is the enemy.
I wish there were a way built in to Dojo to do this useful thing (also solving the perennial cross-browser conditional ellipses thing).
Upvotes: 1
Reputation: 131
You can't set the height, but you can adjust the width. If you have a good idea how wide your cell will normally need to be in order to fit the string on one line you can set it in your < th > element to maximize the number of rows that fit onto one line.
<table //dojo grid properties>
<thead>
<tr>
<th width="90px" field="fieldName" ...>
Field Name
</th>
...
</tr>
</thead>
</table>
Hope this helps.
Upvotes: 0