Dijit.form.select dans un dojox.Grid.DataGrid

Version imprimable

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

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
 
      <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

30/10/2009, 12h20
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

Salut EMMANUEL.REMY
merci de votre reponse.

Citation:

Envoyé par emmanuel.remy

[*] 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:

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.

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:

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:

c'est un test de faisabilité, pas un code final
intercepter l'événement onApplyCellEdit est certainement meilleur
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

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

Code:

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:

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 :ccool:

31/10/2009, 17h08
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

Salut
j'ai fait ça :

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
 
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:

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

11/11/2009, 17h34
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
11/11/2009, 18h22
moukit233

D'abord merci pour votre réponse ,
Désolé j'ai pas compris ce que tu veux dire:oops::oops:
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.
11/11/2009, 19h46
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

Salut,

j'ai tenté avec ça :

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
 
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

17/11/2009, 21h54
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
17/11/2009, 23h13
moukit233

salut,
merci de votre reponse.
une proposition svp ?

Salut,
en fait j'ai fait ça ;

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
 
 <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