Adding dgrids dynamically to a TabContainer with varying widths

kenbuja

I'm rewriting an application I developed in Flex that allows a user to identify the features of all the visible layers and puts the result in a tab container, with each tab containing the results of each visible layer. This application can be viewed here.

[ATTACH=CONFIG]25337[/ATTACH]

I've gotten the new application to the point where I have populated the tab containers with the grids, but some of the grids are not showing all the fields. The issue is that there are varying number of fields to be shown...from two to 100. However, all the grids are the same width, so the grid for layer 224 is only showing 7 of the 97 fields. I've created a Fiddle that shows this issue.

This is what it's looking like now in JavaScript

[ATTACH=CONFIG]25340[/ATTACH]

A couple of things with the Fiddle. It isn't rendering the tabs correctly, but clicking on the numbers at top will show the different tabs. Also, the CSS section contains a couple of different files merged together, but the styles for the dgrid that I'm using are at the bottom of the list, setting the default size of the dgrid and the width of the fields (50px for all except the OJBECTID field).

Finally, the Fiddle should be showing one other issue I'm having with the dgrid. Sometimes the first row of the data overlaps the header.

[ATTACH=CONFIG]25341[/ATTACH]

flexapp.png

jsapp.png

headeroverlap.png

Anonymous User

Original User: kenbuja

I figured out how to accomplish this by using the addCssRule method to dynamically size the grids.

dataGrid.addCssRule("#" + dataGrid.id, "width: " + newsize + "px");

I have updated the Fiddle to show this, although it's still sometimes shoving the grid content into the header.