Remplacer touche tab par entrée navigation focus datagrid

Bonjour à tous,

le contexte :

j'ai un datagrid avec des colonnes dynamiques.

Dans chaque colonne, j'ai un itemrenderer (parfois datefield, parfois textinput...) mon datagrid étant un tableau de saisie de commandes.

voici ce que je souhaite faire :

2 choses :

- Lorsque l'on appuie sur la touche "entrée" (au lieu de "tabulation") le focus aille sur l'élément suivant (comportement natif avec "tabulation"...).

- lorsque le focus est positionné sur une des colonnes (donc un des itemrenderer) je voudrais que le titre (headerRenderer) soit mis en gras (effet de style...)

Ce que j'ai fait pour le moment :

Dans mon datagrid :

Code:

---

1 2 3

dg.addEventListener(KeyboardEvent.KEY_DOWN,listenKeyDg);

---

Ma fonction :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

private function listenKeyDg(evt:KeyboardEvent):void{     // Ne fonctionne pas   var colIndex:Number = evt.currentTarget as DataGrid).columnIndex;   var rowIndex....       alert.show("colIndex:"+colIndex);       if(evt.keyCode == 13){   evt.currentTarget.editedItemPosition = {rowIndex: rowIndex, columnIndex: colIndex};   }   }     }

---

Merci d'avance

oui et donc , c'est quoi le souci ? :mrgreen:

Le soucis principal c'est que ma fonction ne marche pas. Je ne sais pas comment obtenir l'index de la ligne et de la colonne. A moins qu'il existe une autre méthode.

Citation:

---

Envoyé par falz22

Le soucis principal c'est que ma fonction ne marche pas. Je ne sais pas comment obtenir l'index de la ligne et de la colonne. A moins qu'il existe une autre méthode.

---

tu n'écoute peut être pas le bon composant ? tu arrive dans ta fonction lorsque tu appuies sur une touche?
Que contient ton événement dans ce cas ?

En fait si j'écoute le bon composant... J'ai réussi à pas mal avancer je dois dire en fait !

Par contre il reste un soucis qui ne doit pourtant pas être bien sorcier à résoudre.

J'arrive désormais à naviguer entre les différentes cellules de mon datagrid (vers le haut, a gauche , à droite...) avec les touches directionnelles.

Le seul hic, c'est que dans mon datagrid, j'ai une fonction qui calcule le total de chaque ligne, des lors qu'une valeur à été rentrée dans une cellule.
Cette fonction en question est une somme des valeurs enregistrées dans mon dataProvider.
Le problème est qu'en utilisant les touches directionnelles je ne met pas à jour le dataProvider et donc ma fonction ne prend pas en compte cette valeur. (lorsque j'appuie sur "entrée" ou par un clic de la souris en dehors ça fonctionne).

La question est donc : comment mettre à jour mon dataProvider ? Je pense qu'il faudrait dispatcher un evenement non ??

je ne sais pas si c'est très clair !

Voici un bout de code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

// Dans mon datagrid : dg.addEventListener(KeyboardEvent.KEY_DOWN,listenKeyDg); dg.addEventListener(DataGridEvent.ITEM_FOCUS_OUT,majQte);   // ma fonction : private function listenKeyDg(evt:KeyboardEvent):void{   var row:Number; var col:Number; var dgEdit:DataGrid = DataGrid(evt.currentTarget);   switch(evt.keyCode) { case(Keyboard.DOWN): row = dgEdit.editedItemPosition.rowIndex + 1; col = dgEdit.editedItemPosition.columnIndex; evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   break;   case(Keyboard.UP): row = dgEdit.editedItemPosition.rowIndex - 1; col = dgEdit.editedItemPosition.columnIndex; evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   break;   case(Keyboard.LEFT): row = dgEdit.editedItemPosition.rowIndex ; col = dgEdit.editedItemPosition.columnIndex - 1; evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   break;   case(Keyboard.RIGHT): row = dgEdit.editedItemPosition.rowIndex; col = dgEdit.editedItemPosition.columnIndex + 1;   evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   break;   case(13): row = 1; col = 2; evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   break;   }   }

---

Bon, après de très nombreux cheveux arrachés j'avance à pas de fourmi. Je suis vraiment bloqué j'espère sincerement que quelqu'un pourra comprendre d'où vient le problème..

J'arrive désormais à naviguer dans mes cellules, en allant vers le haut, le bas, à droite à gauche.
J'arrive à mettre à mon mon dataprovider dès qu'une cellule est mis à jour et mon total de chaque ligne s'affiche bien.

Problème :
dans chaque ligne, j'ai différents itemrenderer : textinput (qui ne posent pas de probleme avec la navigation), mais surtout 1 datefield et un composant héritant de combobox (autocompletion).

Des que j'arrive dans mon datefield ou CB impossible d'en ressortir, c'est à dire que la detection de l'événement "keyboard event" n'est pas entendu par mon écouteur. Quand j'appuie sur tab je peux en sortir mais le but du jeu ici n'est justement pas à avoir de se servir de tab.

Sinon autre question, comment se fait il que si je mette la touche "fleche droite" (par exemple) je puisse me déplacer à la colonne de droite, par contre impossible avec la touche entrée? (cela me déplace à la ligne en dessous)

Je suppose que c'est un comportement natif de flex, n'y a t'il pas moyen de supprimer ces réglages ??

Si ce n'est pas clair dites le moi..

Un peu de code si cela vous aide :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

dg.addEventListener(KeyboardEvent.KEY_DOWN,listenKeyDg);     private function listenKeyDg(evt:KeyboardEvent):void{   var row:Number; var col:Number; var dgEdit:DataGrid = DataGrid(evt.currentTarget); var myEditor:String; var colName:String ; var tbCols:Array = dgEdit.columns; var nbCols:Number = dgEdit.columns.length;   // Gauche if(evt.keyCode == Keyboard.LEFT) {   row = dgEdit.editedItemPosition.rowIndex ; col = dgEdit.editedItemPosition.columnIndex - 1; colName = dgEdit.columns[dgEdit.editedItemPosition.columnIndex].dataField; myEditor = TextInput(evt.currentTarget.itemEditorInstance).text;   dgEdit.dataProvider.getItemAt(dgEdit.editedItemPosition.rowIndex)[colName] = myEditor; // Mise à jour du total de la ligne sumRows(dgEdit);   if(col>=0) evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };     //tbCols[col].headerRenderer = new ClassFactory(VDGHeaderHover); //dgEdit.columns = tbCols; return; }   // Droit if( evt.keyCode==Keyboard.RIGHT)//39) // 39 {     if(dgEdit.editedItemPosition.columnIndex==nbCols){ row = 1; col = 0; }else{ row = dgEdit.editedItemPosition.rowIndex; col = dgEdit.editedItemPosition.columnIndex + 1; } colName = dgEdit.columns[dgEdit.editedItemPosition.columnIndex].dataField; myEditor = TextInput(evt.currentTarget.itemEditorInstance).text;   dgEdit.dataProvider.getItemAt(dgEdit.editedItemPosition.rowIndex)[colName] = myEditor; sumRows(dgEdit);   evt.currentTarget.editedItemPosition = { rowIndex:row ,columnIndex:col };   return; } }

---