Imaginons (car taper tout le code est inutile) que vous affichiez une liste de personnes dans un CFGRID et que, lorsque vous sélectionnez une ligne, vous affichez toutes les coordonnées de votre sélection dans un formulaire. Le tout, dans un un CFFORM au format Flash (FlashForm donc).
Pour lier un champ "Text" à votre grille (et vice-versa), c'est assez simple et même documenté. Cela donne quelque chose du genre :
<cfinput type="text" name="FIRSTNAME" label="Prénom :" message="Prénom obligatoire" required="yes" bind="{myGrid.dataProvider[myGrid.selectedIndex]['FIRSTNAME']}" onChange="myGrid.dataProvider.editField(myGrid.selectedIndex, 'FIRSTNAME', FIRSTNAME.text);" validateat="onsubmit">
Jusque là, tout va bien. Jusqu'au moment où vous souhaitez ajouter une liste déroulante (CFSELECT), sélectionnée par défaut en fonction du contenu du CFGRID et qui, une fois utilisée, met à jour la valeur dans le CFGRID. Vous testez en vous inspirant du CFINPUT, vous lisez la documentation, vous cherchez sur le web, difficile de trouver l'info recherchée.
Pourtant, vous aviez déjà trouvé la première pièce du puzzle avec la syntaxe suivante :
<cfselect name="GENDER" label="Genre :" onchange="myGrid.dataProvider.editField(myGrid.selectedIndex, 'GENDER', GENDER.selectedItem.data);">
<option value="M">Masculin</OPTION>
<option value="F">Féminin</OPTION>
</cfselect>
Seulement, cela ne suffit pas. Si vous sélectionnez une ligne du CFGRID, vous constatez que les CFSELECT ne se positionnent pas sur les valeurs décrites par le CFGRID. Le lien entre ses deux composants ne fonctionne que dans un sens. Du moins pour le moment.Reprenons le CFGRID et ajoutons une petite fonction pour tout changement d' état (propriété onChange). Pour mémoire, sélectionner une ligne change son état :
<cfgrid name="myGrid" height="360" query="lstUsers" appendkey="yes" griddataalign="left" gridlines="yes" rowheaderalign="left" colheaderalign="left" selectmode="edit" enabled="yes" visible="yes" format="flash" autowidth="true" rowheaders="no" onchange="#majDeroulants#">
Et plaçons cette dernière au début de notre page :
<cfsavecontent variable="majDeroulants">
for (var i:Number = 0; i<GENDER.length; i++) {if (GENDER.getItemAt([i]).data == myGrid.selectedItem.GENDER) GENDER.selectedIndex = i};
</cfsavecontent>
Voilà, cela fonctionne à présent. Que vous sélectionnez une ligne ou modifiez un liste déroulante, les deux composants sont à présent synchrones.
A bientôt !
