ListGrid custom layout and dynamically resizing embedded ListGrids

[mgreenberg]

Hi,

I am trying to do something that seems like it should be fairly simple but I am having issues.

I have a ListGrid whose columns can be resized. I want some custom information specified under some columns as depicted below. I have specified a custom layout in my ListGrid with a simple embedded list grid that just has one row and two columns with showHeader set to false. In my main ListGrid I then have gridComponents:["header", goalGrid, "body"].

--------------------------------------------------
Col 1            | Goal        | Col 3
--------------------------------------------------
            GOAL:| 80%              
--------------------------------------------------
r1c1		   70%          r1c3
r2c1	           90%          r2c3

When I resize the main ListGrid or any of the columns, I want the goalGrid to be resized too to look like it is part of the main list grid. I have tried updating the goalGrid field widths on fieldStateChanged() on the main list grid but it doesn't seem to redraw the goalGrid.

fieldStateChanged: function() {
			goalGrid.getField(0).width = this.getFieldWidth(0);
			goalGrid.getField(1).width = this.getFieldWidth(1) + this.getFieldWidth(2);
			goalGrid.markForRedraw();
		}

Is there a simpler way to accomplish what I am trying to? For example, is there a way to have gridCellComponents for example versus gridComponents?

Thanks.

[AndyBell]

Hi

Try calling refreshFields() on the grid after you've set all the field widths...

Andy