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

[moukit233]

D'abord merci pour votre réponse ,
Désolé j'ai pas compris ce que tu veux dire
mais , est ce que ça peux m'aider pour actualiser une colonne ds grid c-a-d si je sélectionne ds ma liste déroulante le type "select", il doit aller dans le seconde colonne et actualiser la colonne affichant une liste déroulante dans la seconde colonne (et la meme chose pour les autres type par exemple "checkBox" ," text").

Merci d'avance.

[emmanuel.remy]

moukit233: ce n'est pas prévu en standard par la grid. Je t'ai passé ce que je pouvais sur la démarche que je ferais à ta place. J'ai fait un test, mais malheureusement je ne peux pas prendre plus de temps que cela pour t'aider ou te faire ton code. C'est à toi de jouer maintenant. Par contre je serai toujours là pour t'aider à débugguer le moment venu.

ERE

[moukit233]

Salut,

j'ai tenté avec ç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
 
function getAttribut(inCell, inRowIndex) 
{   
 
    if (inCell.field == "col2") { 
        //la combo n'est pas encore créée
        //donc on déclare 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() {
                        //recuperer nod 
                        var node = grid.getCell(4).getEditNode(inRowIndex);
                        //recupere nodePere 
                        var nodePere = node.parentNode;
                                //attributSelectionner = this.value;  
                                var listeDeroulante = new dojox.grid.cells.Select({
                                    editable: true, 
                                    options: ['maroc','france','japan'], 
                                    values: ['0','1', '2'] 
                                    });
                               //inserer la liste ds la parentNode
                                var nouveauNoeud = nodeParent.appendChild(listeDeroulante);
                                console.log(nouveauNoeud);
                               //var nouveauNoeud = node.appendChild(listeDeroulante);
                                //console.log(nouveauNoeud);
 
                    })
            );
        },2000);
 
    }
}

j'ai recuperé la node de la 2 eme combo pr la ligne modifier ds la grid...
puis j'ai recuperé le parentNode...
et j'ai inseré ma liste deroulante ds le parantNode...

mais malheuresement ça marche pas,j'ai une erreur :
Node cannot be inserted at the specified point in the hierarchy" code: "3

merci d'avance

[emmanuel.remy]

Salut,

Certainement essaies tu d'insérer un noeud entre un TR et un TD ou quelque chose du même style qui contredit le DOM.

ERE

[moukit233]

salut,
merci de votre reponse.
une proposition svp ?

[moukit233]

Salut,
en fait 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
37
38
39
40
41
42
 
 <script type="dojo/connect" event="onStartEdit" args="inCell, inRowIndex">  
    if (inCell.field == "col2") { 
        //la combo n'est pas encore créée
        //donc on déclare 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() {
                        //recuperer nod 
                        var node = grid.getCell(4).getEditNode(inRowIndex);
                        //recupere nodePere 
                        var nodePere = node.parentNode;
                         var dataItems = {
                                         label: 'name',
                                         items: [
                                                       {name: 'John Smith'},
                                                       {name: 'Bob Smith'},
                                                       {name: 'Nancy Smith'},
                                                       {name: 'John Doe'}
                                                    ] 
 
                                         };
 
                                 var store = new dojo.data.ItemFileWriteStore({
                                     data : dataItems
                                 });
                                 //nodePere.removeChild(nodeValeur);
                                 var filteringSelect = new dijit.form.FilteringSelect({
                                      store: store,
                                      searchAttr: "name",
                                      name: "name"
                                  },nodePere);
 
                    })
            );
        },2000);
 
    }
</script>

quand je selectionne un option du la 1er liste deroulante il creer dijit.form.FilteringSelect() dans la seconde colonne grid.
par contre quand je selectionne un options du la 2 eme liste deroulante et clique sur un autre ligne de la grid l'option que j'ai selectionné du la 2 eme liste Disparaît.
merci de m'aider