Dynamic column sizing dgrid (fit content)

[BenFousek]

I have a dgrid as seen here:
[ATTACH=CONFIG]31111[/ATTACH]

I want the Title and Last Save columns to auto adjust to fit the widest cell without wrapping, thus leaving as much width as possible for the Description. I don't want to set the widths with css for a couple reasons: 1) what's the point if dynamic widths are the goal, and 2) the user can adjust the application font size.

If anyone knows how this might be easily accomplished or has a suggestion I'd appreciate it.

[JonathanUihlein]

Here is an article from Sitepen regarding CSS styling of dgrid:
https://www.sitepen.com/blog/2012/05/03/css-styling-of-dgrid/

If this doesn't answer your question, you might want to refer to the dgrid help page, since this isn't a specific JSAPI question:
http://dojotoolkit.org/community/

[BenFousek]

Thanks Jon,
I'm aware of dgird's styling. Can't seem to find any examples of content fitting. I'll hit up dojo for an answer too.
Ben

[JonathanUihlein]

No problem!

While I haven't had to do specifically what you are asking, I do know that you'll have to use width:auto; on your description column.

You might have to assume a maximum width for at least one column, which would let the others resize dynamically based on the remaining viewport width.

[RyanKoehnen]

I know this thread is old, but I thought I'd reply with a solution in case anyone is still scratching their head on this one.

In order to dynamically size the columns based on the length of the header titles you'll need to put the string in an empty (invisible) span, measure the span, add some margin value and then use that as your column width. I used the ColumnResizer mixin so the sizing happens through the resizeColumnWidth() method. the dojoObject.forIn() method comes from dojox/lang/functional/object as a way to iterate over an associative array.

fitColumns: function (grid) {

            dojoObject.forIn(grid.columns, function (item) {

                var node = domConstruct.toDom('<span style="position:absolute;visibility:hidden">' + item.label + '</span>');

                domConstruct.place(node, grid.id);

                var p = domGeom.position(node);

                domConstruct.destroy(node);

                grid.resizeColumnWidth(item.id, p.w + 8);

            });

        }