Samuel Dana
Samuel Dana

Reputation:

How to set the Dojox Datagrid row height to a single line

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

Answers (3)

asdacap
asdacap

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

jfkelley
jfkelley

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

Mike Carey
Mike Carey

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

Related Questions