In our applications at IS@Web we use the Dojo Grid from the Extension Library to display data in various places. The autoWidth property automatically sets the width depending on columns width.

This can be a problem, if you put the control into a panel with a fixed width. The next screenshot shows this situation,

Well, no problem. You can set the autoWidth property to false and the grid will grow to the size of the panel. BUT …

As you can see, the grid now fits into the panel, but does not look very nice. It would be great, if the last column would also expand to full width. But unfortunately, there is no such property.

I have attached a small demo application with a custom control that I have build. The control uses the extension library and retrieves its data via a REST service from any view provided a a custom property. The control uses some JavaScript to get the column header names, column width and also some style properties from the view. Set the font weight or style to bold or italic etc. and the grid will also show the content of the column using the weight and style. Also the color can be changed. The demo only contains some of the features. But you can easily extend the list of available colors.

To expand the last column to the full size of the underlying panel, I simply modify the JSON data that bulds the structure of the grid.

// make last column 100%
var _tmp:String = ‘[‘ + json.toString() + ‘]’;

return (true  == compositeData.prop_autoWidth) ? _tmp:
@LeftBack(_tmp,”width:”)  + “width:’auto” + @RightBack(_tmp,”px”);

This code snippet from the dojo.grid SSJS library replaces the last occurrence of width’:123px’ with width:’auto’

Download Sample