Ajouter une info bulle sur une DataGrid

Lorsque l’on utilise des DataGrid pour afficher des informations provenant par exemple d’une base de donnée il n’est pas rare de constater que les largeurs de colonne sont insuffisantes.

Dans ce cas deux solutions sont possible, élargir les colonnes mais on se retrouve alors confronté a l’apparition de scroll barre l’autre solution plus esthétique consiste à afficher une info bulle au passage de la souris sur le contenu de la colonne en question.

Voici la méthode pour mettre en œuvre la deuxième solution.

1°) Définir une fonction qui sera appelé par le gestionnaire d’évènement du composant DataGrid

/* mouse over tp */
private function infoBulle(item:Object):String{
var myString:String = "";
if(item != null) {
myString = myString + "Méthode : " + item.methode + "n";
myString = myString + "Prix : " + item.prix + "€n";
}
return myString;
}

2°) Configurer notre DataGrid en précisant la fonction appelée pour formater le texte afficher dans l’info bulle (attribut : dataTipFunction) ainsi que les colonnes utilisant cet artifice (attribut : showDataTips).

<mx:DataGrid id="methodeLivraison" dataProvider="methodesExpedition" headerHeight="0" sortableColumns="false" dataTipFunction="infoBulle">
<mx:columns>
<mx:DataGridColumn editable="false" dataField="titre" headerText="Nom" showDataTips="false" />
<mx:DataGridColumn editable="false" dataField="methode" headerText="Méthode" wordWrap="false" width="200" showDataTips="true" />
<mx:DataGridColumn editable="false" dataField="prix" headerText="Prix" showDataTips="true" />
</mx:columns>
</mx:DataGrid>