Comment faire en sorte que les largeurs de colonne puissent être liées dans deux Flex AdvancedDataGrids Flex?

Question

Ours avec moi ici. J'ai une configuration étrange pour accomplir ce dont j'ai besoin. J'ai fondamentalement un AdvancedDataGrid qui affiche des données retournées par un WebService. Les données sont au format XML:

<children label="parent 1" value="3100"> 
    <children label="child 1" value="1100"> 
     <children label="grandchild 1" value="200"> 
     </children> 
     <children label="grandchild 2" value="300"> 
     </children> 
     <children label="grandchild 3" value="600"> 
     </children> 
    </children> 
    <children label="child 2" value="2000"> 
     <children label="grandchild 4" value="1200"> 
     </children> 
     <children label="grandchild 5" value="800"> 
     </children> 
    </children> 
</children> 
<children label="parent 2" value="1000"> 
    <children label="child 3" value="1000"> 
     <children label="grandchild 6" value="300"> 
     </children> 
     <children label="grandchild 7" value="700"> 
     </children> 
    </children> 
</children> 

Je convertir le fichier XML à un objet HierarchicalData dans le gestionnaire de résultat WebService. Je construis également dynamiquement les colonnes pour AdvancedDataGrid, car il affichait différentes colonnes en fonction de l'entrée de l'utilisateur. Cependant, j'ai également besoin d'afficher une "ligne" de totaux en bas de AdvancedDataGrid. Je ne peux pas comprendre comment convertir mes XMLListCollection à un GroupingCollection, et ainsi créer une ligne de totaux de cette façon, donc, je calcule en fait les totaux dans le WebService et retourner en tant que nœud dans le fichier XML:

<totals value="4100" /> 

I utilisez ces données "totaux" pour remplir un second fichier AdvancedDataGrid sans en-tête situé directement sous le premier ADG, de sorte qu'il "apparaisse" comme étant la "dernière ligne" du premier ADG. Les deux ADG utilisent les mêmes colonnes Bindable Tableau:

<mx:AdvancedDataGrid id="reportADG" dataProvider="{__model.reportData}" 
    columns="{__model.adgDrillColumns}" width="100%" height="100%" /> 

<mx:AdvancedDataGrid id="reportTotalsADG" 
    dataProvider="{__model.reportTotalsData}" 
    folderOpenIcon="{null}" folderClosedIcon="{null}" 
    disclosureClosedIcon="{null}" disclosureOpenIcon="{null}" 
    defaultLeafIcon="{null}" showHeaders="false" 
    selectable="false" rowCount="1" 
    columns="{__model.adgColumns}" width="100%" /> 

Cependant, si les colonnes sont redimensionnées dans le premier ADG, je ne peux pas trouver un moyen d'avoir les colonnes du second sous-directeur pour redimensionner aussi bien. Que puis-je faire?

Answer 1

Vous pouvez utiliser la méthode de ligne récapitulative ou vous pouvez créer un composant personnalisé pour afficher les totaux séparément. Dans mon cas, j'ai dû créer un composant personnalisé qui obtient toutes les colonnes ADG, détermine leurs largeurs, dessine des lignes verticales/séparateurs, puis résume toutes les lignes et affiche une étiquette. Il est agréable car il est utilisé comme ceci:

<components:DataGridSummaryFooter id="summaryView" 
    height="6%" width="100%" 
    totalsColumns="{[impressionsCol, estimatedSpendingCol]}" 
    dataSource="{dataViewSource}" 
/> 

... et le reste est magique!

FYI, la raison pour laquelle j'ai dû créer un composant séparé et ne pas utiliser la ligne de résumé était due aux exigences de conception de cette application. En fait, j'espère que c'est toujours fait de cette façon, car avec les lignes de résumé, vous devez faire défiler tout le bas de la grille pour voir les résumés, et ce n'est pas très bon UX. J'espère que cela aidera quelqu'un avec quelque chose à un moment donné! :)

Vive