Discussion :

[moukit233]

Bonjout,
j'ai une dojox.Grid.DataGrid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
      <table dojoType="dojox.grid.DataGrid"
                           store="store"
                           jsid="grid"
                           id="grid"
                           style="width: 64em; height: 30em;"
                           rowSelector="20px"
                           clientSort="true"
                     >
                        <thead>
                            <tr>
                                 <th field     ="champs2"
                                     formatter ="formateur"
                                     width     ="150px"
                                     cellType  ="dojox.grid.cells.Select"                                  
                                     options  = "..."
                                     values   = "..."
                                     editable = "true"
                                  >
                                    champs2
                                 </th>
                                 <th field    ="champs3"
                                     width    ="150px"
                                     editable ="true"
                                     cellType ="dojox.grid.cells.Select"
                                     options  = "...."
                                     values   = "..."
                                 >
                                    champs3
                                 </th>
 
                            </tr>
                        </thead>
                    </table>

je veux lier les deux dojox.grid.cells.Select de ma grid
ou
remplacer dojox.grid.cells.Select par des Dijit.form.Select
Y'at-il quelqu'un qui peut m'aider

merci d'avance

[emmanuel.remy]

Salut moukit233,

C'est délicat de faire cela car ce n'est pas vraiment prévu.
Déjà pour faire simple je ne passerai pas par une combo dijit mais je conserverais dojox.grid.cells.Select qui est une simple combo html.

Ensuite techniquement, quand tu passes en édition, il faut faire plusieurs choses:

1. Obtenir les combos qui servent à éditer ta ligne. Tu peux les obtenir via un dojo.query en cherchant les class de type dojoxGridSelect.
2. connecter un événement onchange sur la première combo, de façon à pouvoir alimenter la seconde quand la valeur change

Cela ne doit pas poser de souci majeur, mais comme toute chose non prévue, il y a de l'incertitude !

ERE

[moukit233]

Salut EMMANUEL.REMY
merci de votre reponse.

[*] Obtenir les combos qui servent à éditer ta ligne. Tu peux les obtenir via un dojo.query en cherchant les class de type dojoxGridSelect.

ERE

je ne sais pas comment je vais faire pour recuperer les combos .
j'ai essayé avec ;

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
 function getItemGrid() {
    dojo.query("th.dojoxGridSelect", "idForm")
    .forEach(function (itemClique) {
        dojo.connect(itemClique, "onChange", function (clic) {
 
        });
    });
}

mais je suis pas sur .
Je serai reconnaissant si vous m'avez envoyé des exemples.

[emmanuel.remy]

Re,

J'ai écrit une petite bêtise: il faut effectivement détecter le changement de valeur dans la combo en cours d'édition, mais la seconde combo n'existe pas au même instant... il faudra donc changer ses propres valeurs dans la structure de la cellule. Voici le code (testé) qui permet de récupérer une valeur quand elle change dans la combo source.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div id="grid" dojoType="dojox.grid.DataGrid" 
  jsId="grid"
  rowSelector="20px"
  store="test_store" structure="layout">
 
<script type="dojo/connect" event="onStartEdit" args="inCell, inRowIndex">
		console.info("info:", inCell, inRowIndex);
		//si la cellule en édition correspond à celle attendue
		if (inCell.field=="col2") { 
		//pas très joli, mais vite fait: la combo n'est pas encore créée
		//donc on décale dans le temps la création de l'événement onchange
		window.setTimeout( function() {
			var sel = dojo.query("select.dojoxGridSelect");
			//on connecte l'événement onchange
			dojo.connect(sel[0],"onchange",
				dojo.hitch(sel[0],
					function() {
						alert("Traitement pour la valeur " + this.value);
					}));
		},2000);
	}								
</script>	
</div>

A NOTER:

1. c'est un test de faisabilité, pas un code final
2. intercepter l'événement onApplyCellEdit est certainement meilleur
3. finalement l'idéal n'est vraisemblablement de ne pas passer par ces événements un peu trop "magouille" mais de se connecter tout simplement sur l'update des données du store (événement onSet du store) et d'y inscrire le code qui change les données de la seconde combo qu'il faudra afficher

Mais clairement il y a du temps à consacrer

ERE

[moukit233]

Re-Salut
merci de votre reponse.
J'ai testé cela:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
  console.info("info:", inCell, inRowIndex);
    //si la cellule en édition correspond à celle attendue
     if (inCell.field == "attribut") { 
        //pas très joli, mais vite fait: la combo n'est pas encore créée
        //donc on décale dans le temps la création de l'événement onchange
        window.setTimeout( function() {
            var sel = dojo.query("select.dojoxGridSelect");
            //on connecte l'événement onchange
            dojo.connect(sel[0],"onChange",
            dojo.hitch(sel[0],
            function() {
                alert("Traitement pour la valeur " + this.value);
            }));
        },2000);
    }

mais malheureusement, aucune changement n'est intervenue .
il me semble que l'evenemnt onChange() n'existe pas pour dojox.grid.cells.Select
j'ai testé aussi avec l'evenement onApplyCellEdit() sur dojox.grid :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function getItemGrid(inCell, inRowIndex) 
{   
    console.info("info:", inCell, inRowIndex);
    //si la cellule en édition correspond à celle attendue
     if (inCell.field == "attribut") { 
        //pas très joli, mais vite fait: la combo n'est pas encore créée
        //donc on décale dans le temps la création de l'événement onchange
        window.setTimeout( function() {
            var sel = dojo.query("select.dojoxGridSelect");
            //on connecte l'événement onchange
            dojo.connect(gridGrpe,"onApplyCellEdit",
            dojo.hitch(sel[0],
            function() {
                alert("Traitement pour la valeur " + this.value);
            }));
        },2000);
    } 
}

la seconde solution il m'envoyer la valeur selectionner
Mais il est valable pour tout les colonnes de la grid (bien sur j'ai d'autre colonnes editable)..
par contre pour la troisième solution je ne sais pas comment je vais faire...??
merci de m'aider

[emmanuel.remy]

Je vines de retester (dojo 1.2, n'ai que cela sous la main) et la première solution fonctionne.

Mais attention, ce n'était qu'un essai...

ERE

[moukit233]

Salut
j'ai fait ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
function getElementSelectionner(inCell, inRowIndex)
{
    var elementSelectionner;
    console.info("info:", inCell, inRowIndex);
    //  si la cellule en édition correspond à celle attendue
    if (inCell.field == "col2") { 
        //pas très joli, mais vite fait: la combo n'est pas encore créée
        //donc on décale dans le temps la création de l'événement onchange
        window.setTimeout( function() {
            var sel = dojo.query("select.dojoxGridSelect");
            //on connecte l'événement onchange
            dojo.connect(sel[0],"onchange",
                    dojo.hitch(sel[0],
                            function() {
 
                         elementSelectionner = this.value;
                        alert("Traitement pour la valeur " + this.value);
                             dojo.xhrPost({
                                  url :"edit-form/id/"+idActif,
                                  handleAs :"text",
                                 form :"idnew",
                                 content : { element : elementSelectionner },
                                 timeout :5000,
                                 load : function(response) {
 
                                },
                               error : function(error) {
                                  alert('Probleme requete ajax \n ' + error);
                              }
                        });
                   }));
        },2000);
        //alert(elementSelectionner);
    }     
}

et ds le vue j'appelle ma fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
<div id="grid" dojoType="dojox.grid.DataGrid" 
  jsId="grid"
  rowSelector="20px"
  store="test_store" 
  structure="layout"
  onStartEdit = "getElementSelectionner">

et il me semble que ça marche mais avec un petite probleme :
l'evenement n'execute pas du la premiere fois. (si je selectionner un element du liste deroulante pour la 1 ere fois marche pas )
Mais pour les fois qui suivent, ça marche

merci de m'aider

[emmanuel.remy]

Certainement parce que la grid supprime les noeuds du DOM après leur utilisation. C'est le problème quand on est à la frontière de ce qui est réalisable.

Il faudrait investiguer et prendre du temps.

Bon courage pour la suite,

ERE