Discussion :

[bellenthan]

Bonjour,

Je m'arrache les cheveux sur ce problème depuis plusieurs jours donc je post ici afin d'avoir un coup de main, car je ne vois vraiment pas ce qu'il se passe.
J'ai une grille qui est créée dynamiquement suite au clique sur un onglet, qui appelle la fonction createGrid(onglet).
Dans cette fonction, je relie des fonctions perso à différents évènements, après la création de la grille :

Code :

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

1
2
3
4
 
dojo.connect(grid, "onStartEdit", this, dojo.partial(modifierGridCell, onglet));
dojo.connect(grid, "onApplyCellEdit", this,  dojo.partial(saveModifCell, onglet));
dojo.connect(grid, "onKeyPress", this,  dojo.partial(touches, onglet));

--- Fonction modifierGridCell ---

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
 
function modifierGridCell(onglet, inCell, inRowIndex)
{
   var val = "";
       var temp = dojo.byId("LibCourtStatutGenerale").innerHTML;
       var g = dijit.byId("grille"+onglet);
 
  if (("Annulé" == temp) || ("Terminé" == temp))
      {
             g.edit.cancel();
  }
  else
      {
             var champ = inCell.field;
             val = inCell.grid._by_idx[inRowIndex].item[champ][0];
     if ((val != null) && (val != "undefined") && (val != ""))
             {
                     if (inCell.declaredClass == "dojox.grid.cells.DateTextBox")
                            inCell.grid._by_idx[inRowIndex].item[champ][0] =  dojo.date.locale.format(new Date(val), inCell.constraint);
                     else
                            inCell.grid._by_idx[inRowIndex].item[champ][0] = unescape(val);
             }
    else
            {
        if (inCell.declaredClass == "dojox.grid.cells.DateTextBox")
           inCell.grid._by_idx[inRowIndex].item[champ][0] = dojo.date.locale.format(new Date(), inCell.constraint);
                    else
                           inCell.grid._by_idx[inRowIndex].item[champ][0] = "";
            }
  }
}

--- Fonction saveModifCell ----

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
function saveModifCell(onglet, valeur, ligne, champs)
{
   var grille = null;
       var tabCD = null;
       var mode = "";
       grille = dijit.byId("grille"+onglet);
       var nbLigne = grille.rowCount;
       tabCD = grille.getItem(ligne);
       var CodeCDM = tabCD["CodeCDM"];
       var numCD = grille._by_idx[ligne].idty;
 
       if ((ligne == 0) && ((champs == "CodeMetreur") || (champs == "DatePrevi")))
       {
              if (nbLigne > 1)
             {
                    var message = "Voulez-vous appliquer à tous les CorpsDevis ?";
                    if (confirm(message))
       {
                           if (champs == "CodeMetreur")
          {
             numCD = "";
             for (i=0;i<nbLigne;i++)
            {
               numCD += grille._by_idx[i].idty;
               if ((nbLigne > 1) && (i != (nbLigne-1)))
                  numCD += ",";
                                }
                          }
                          else
         {
            CodeCDM = "";
            for (i=0;i<nbLigne;i++)
                                {
               tabCD = grille.getItem(i);
               CodeCDM += tabCD["CodeCDM"];
               if ((nbLigne > 1) && (i != (nbLigne-1)))
                 CodeCDM += ",";
                                }
         }
        mode = "CDMetreurTous";
     }
     else
          mode = "CDMetreur";
   }
           else
      mode = "CDMetreur";
      }
      else
      {
      if ((champs == "CodeMetreur") || (champs == "DatePrevi"))
         mode = "CDMetreur";
      else
         mode = 'update';
  }
  if ((valeur != null) && (champs == "DatePrevi"))
      {
             var valeur2 = dojo.date.locale.format(valeur, {datePattern: "dd/MM/yyyy", selector: "date", locale: "fr"});
             valeur = valeur2;
       }
 
    var xhrArgs = {
           url: "traitement_onglets_devis.php",
           content: {mode: mode, onglet: onglet, identifiant: numCD, champsMAJ:  champs, valeurMAJ: escape(valeur), codeCDM: CodeCDM},
           handleAs: "text",
           preventCache: true,
           sync: true,
           load: function(reponse, ioArgs) {
                  //return reponse;
           },
           error: function(error, ioArgs) {
      var message = "";
                  switch(ioArgs.xhr.status) {
                         case 404:
                                message = error.message+" - La page demandée n'a pas été trouvée !";
                                break;
         case 404:
                                message = error.message+" - Retour d'erreur du serveur !";
            break;
         default:
            message = error.message+" - Erreur inconnue !!!";
            break;
                  }
                  console.log(message);
           },
           handle: function(reponse, ioArgs) {
                  grille.store.save();
                  grille.store.close();
      //            grille.store.fetch();
      //grille._fetch();
      grille._refresh(true);
                }
    }
    var deferred = dojo.xhrPost(xhrArgs);
    return deferred;
}

Lorsque je double clique sur une cellule pour l'éditer, la première fois ça fonctionne bien, la cellule s'édite et je peux la modifier.
La où ça se corse, c'est quand j'appuie sur TAB pour passer à la cellule suivante, ça plante et firebug me met un message d'erreur : inCell.grid._by_idx[inRowIndex] is undefined

Si je valide chaque cellule individuellement, ça fonctionne sinon ça plante.
C'est comme si je perdais mes items de la grille après la sauvegarde.
Mais dans firebug, quand j'affiche la grille via console.log(g), ils apparaissent bien.
Et à priori le save, close et refresh fonctionne.
A mon humble avis, je pense que ça doit venir de ce qui est fait dans le handle du xhrPost mais j'ai beau essayer plusieurs combinaisons, ça ne change rien.

Donc je ne comprend pas du tout ce qu'il se passe et c'est vraiment bloquant pour la suite de mon projet.

Merci d'avance pour votre aide.

[emmanuel.remy]

Salut,

Si je comprends bien: quand la cellule est validée tu fais une requête synchrone vers un script PHP qui va sauvegarder les données. Cela ne devrait pas poser de problème. De l'erreur renvoyée par Firebug, il semblerait que cela provienne plus du modifierGridCell. Que contient ton code de la fonction touches ? Utilises tu le deferred renvoyé par saveModifCell ? Pourquoi utiliser store.save() , tu gères aussi cette sauvegarde à part (ce serait étonnant, mais bon ...) ?

Juste de manière générale, pour ce que tu as besoin de faire il n'y a aucune raison apparente de taper directement dans les données de la grille (nCell.grid._by_idx[inRowIndex].item[champ][0]). La grille est déjà connectée au store pour mettre à jour son affichage si une modification du store intervient. Et réciproquement (à peu près). Tu passes outre ces mécanismes alors que les méthodes de la grille permettent de récupérer l'item en cours d'édition, etc... Le store doit rester la donnée, et la grille l'affichage.

ERE

[bellenthan]

Pour la requête synchrone, c'est le cas. J'ai besoin de recharger les données.

Voilà la fonction touche

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
 
function touches(onglet, evt)
{
//    console.trace();
    var grille = dijit.byId("grille"+onglet);
    var rowIndex = grille.focus.rowIndex;
    var cell = grille.focus.cell;
 
    var dk = dojo.keys;
    switch (evt.keyCode)
    {
        case dk.F2 :
        {
            // Récupération du numéro de ligne sélectionnée
            grille.edit.start(cell, rowIndex, true);
            break;
        }
        case dk.F7 :
        {
            addNewCorpsDevis(onglet);
            break;
        }
        case dk.F9 :
        {
            supCorpsDevis(onglet);        
            break;
        }
    }
}

Pour le deferred, je ne l'utilise pas. Tu penses qu'il faudrait ?
Pour le store.save(), je l'utilise afin de sauvegarder les données saisies dans la grille.

En effet, je suis bien d'accord avec toi pour les données dans la grille.
Mais ayant essayé la méthode de base qui ne marchait pas non plus, j'ai essayé celle-ci. Sans plus de résultat.
Ou alors j'avais une mauvaise syntaxe.
C'est bien le inCell.value qui doit être utilisé ?
Mais avec des dijit (j'ai un select et une DateTextBox) dans les cellules, ça semble poser problème.

En fait, j'ai codé ça en m'inspirant du forum sur dojotoolkit.
Mais il y a du avoir quelques subtilités que je n'ai pas vu. L'anglais et moi ça fait deux .

[bellenthan]

Je viens de tester à nouveau le inCell.value dans modifierGridCell à la place de inCell.grid._by_idx[inRowIndex].item[champ][0].
Le problème, c'est qu'elle est null.
Ca donne l'impression que la valeur du champ contenu dans le store n'est pas passé à la valeur de la cellule de la grille.
Donc quand la cellule passe en mode édition, la valeur présente est celle du store directement. C'est pour cela que je l'attaquais de cette manière.

Du coup, je sais pas comment faire, j'ai du oublier quelque chose.

[emmanuel.remy]

Salut,

Quelques observations et questions:

• Tu gères toi-même le démarrage de l'édition des cellules, c'est jouable
• Ta logique de traitement demande d'être réorganisée: normalement (sauf bug de la grid) le passage en édition monte les données de la ligne du store en mode "édition". Quand tu valides ta saisie, alors les données modifiées sont sauvées vers le store. Tu ne devrais pas intervenir dans une de ces phases, sauf à souhaiter convertir les données avant/après édition.

• Pour la requête synchrone, c'est le cas. J'ai besoin de recharger les données.

  Je ne vois pas comment tu les recharges; tu appelles ta requête synchrone (qui je suppose mais à jour ta base ?) et ensuite tu fais:

  Code :

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

  1
  2
  3
  4
  5
  handle: function(reponse, ioArgs) {
        grille.store.save();
        grille.store.close();
        grille._refresh(true);
  }

  Je ne comprends pas bien ce que vient faire ici le grille.store.save();. Quel type de store utilises tu pour faire cette sauvegarde ? As tu implémenté toi-même la sauvegarde ?
• A mon avis tu as pris trop de raccourcis et tu génères une sorte d'inconsistence dans la grid (et elle n'en a pas besoin, c'est déjà assez limite par moment ) entre les données, l'affichage etc...
  Si j'étais à ta place je repartirais de zéro en laissant la séquence d'édition à la charge de la grid, et en gérant les événements de notification de modification des données non pas à partir de la grille mais directement à partir du store (via onSet, onDelete.... (Tu peux aussi continuer à le faire à partir du onApplyCellEdit en récupérant l'Item concerné via getItem). C'est ce onSet qui est l'endroit idéal pour faire ta mise à jour asynchrone.

ERE

[bellenthan]

Alors, en fait, j'ai fait cette fonction modifierGridCell car les données passées via le json on des caractères spéciaux, accents, ... donc, côté PHP, elles sont encodées (via rawurlencode()).
Je dois donc, au moment de la mise en édition, les décodées (via un unescape()) afin qu'elles s'affichent correctement dans l'éditeur de la cellule (sinon j'ai des %20, ...).

Au niveau du dataStore, c'est un itemFileWriteStore.
Donc, je fais un save avant de le fermer car sinon il râle qu'il y a des modifications en cours et du coup, ne rafraîchit pas la grille.

Pour la mise à jour via le store, j'en suis arrivé à la même conclusion.
Je pense que je n'ai, effectivement, pas saisie toutes les subtilités du processus et que je dois faire une boulette quelque part.
Donc, je pense effectivement essayer sur le onSet. Je dois l'implémenter lors de la déclaration de mon dataStore ?
Et c'est dedans que je fais mon xhrPost ?
Du coup mes fonctions modifierGridCell et saveModifCell, sont-elles encore utiles ?

Car via le ApplyCellEdit, le pb est justement que le getItem me renvoie null ? Malgré, le save du store et le refresh de la grille.

J'avoue que, vu que je suis sur dojo depuis peu, tout n'est pas très clair pour moi.

[bellenthan]

Du coup, si je fais ma saveModifCell sur le onSet du store, ai-je encore besoin du save, fetch et refresh ?
Je ne pense pas mais j'aimerais ta confirmation.
Et, la grille se rafraîchira automatiquement ?

[emmanuel.remy]

Alors, en fait, j'ai fait cette fonction modifierGridCell car les données passées via le json on des caractères spéciaux, accents, ... donc, côté PHP, elles sont encodées (via rawurlencode()).
Je dois donc, au moment de la mise en édition, les décodées (via un unescape()) afin qu'elles s'affichent correctement dans l'éditeur de la cellule (sinon j'ai des %20, ...).

As tu essayé sans les encoder via rawurlencode() ? Par défaut JSON impose une seule chose: UTF-8.

Au niveau du dataStore, c'est un itemFileWriteStore.
Donc, je fais un save avant de le fermer car sinon il râle qu'il y a des modifications en cours et du coup, ne rafraîchit pas la grille.

Je crois que cela n'a rien à voir . Le save ne sert pas à grand chose dans le store. Et tu n'est pas obligé de fermer le store; en plus le souci provinet durement du fait que tes données n'ont pas encore été enregistrées dans le store

[...]Donc, je pense effectivement essayer sur le onSet. Je dois l'implémenter lors de la déclaration de mon dataStore ?

Oui

Et c'est dedans que je fais mon xhrPost ?

Cela me semble une bonne idée.

Du coup mes fonctions modifierGridCell et saveModifCell, sont-elles encore utiles ?
Car via le ApplyCellEdit, le pb est justement que le getItem me renvoie null ? Malgré, le save du store et le refresh de la grille.

Idéalement, non. Ce qui compte pour toi ce n'est pas de déclencher du code à la fin de l'édition, mais quand ton store est modifié. Notamment en fin d'édition...

J'avoue que, vu que je suis sur dojo depuis peu, tout n'est pas très clair pour moi.

On est deux...

ERE

[bellenthan]

Sans le rawurlencode(), le formattage json plante car les données sur le serveur possèdent des accents ou caractères spéciaux et, apparemment, l'UTF8 ne connait pas ce genre de caractère.
Donc, c'était la solution que j'avais trouvé pour que ça fonctionne.

Pour le store, je dois être boulet mais je ne comprends pas tout.
Donc, je crée mon store via programmation (un itemFileWriteStore), ensuite je lui connecte ma fonction perso (dojo.connect(store, saveModifCell)).
Donc du coup, lors de la validation de modification d'une cellule, il lance saveMofiCell (laquelle n'a pas changé sauf pour les arguments qui diffèrent vu que je suis sur le onSet et non plus sur le ApplyEditCell).
Dans cette fonction, sur le handle du xhrPost, je fais ça :

Code :

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

1
2
3
4
5
6
 
var store = item["_S"];
store.save();
store.close();
var grille = dijit.byId("grille"+onglet);
grille.setStore(store);

Mais d'après toi, ce n'est pas nécessaire.
La question que je me pose du coup, c'est que j'ai une colonne qui doit recevoir l'id de la nouvelle ligne crée lors du xhrPost. C'est pourquoi je faisais cette manip afin que ça se mette à jour.
Sinon, je récupère l'id de la nouvelle ligne et la retourne via la réponse du xhr et renseigne directement le champs concerné dans le store. Tu en pense quoi ?

En fait, pour que tu comprennes mieux ma grille, je vais te l'expliquer un peu plus.
Elle met à jour deux tables. Une première avec des infos génériques et une autre avec des infos spécifiques. Hors ces deux tables sont liées par l'identifiant de la première.
Concrètement, la table principale concerne un article avec toutes ces infos.
Dans les colonnes de la grille, j'en ai 2 qui, elles sont liées à l'autre table (la personne qui va aller poser l'article chez le client et à quelle date).
Donc quand tu modifies la personne, une nouvelle ligne est créée dans la deuxième table (afin de garder l'historique des interventions) et c'est cette id que je dois afficher dans la grille.
D'où ma question sur sa récupération via la réponse du xhr si je ne fais de reload du store.

J'espère avoir été plus clair du coup sur mon soucis.

[emmanuel.remy]

Re,

Sans le rawurlencode(), le formattage json plante car les données sur le serveur possèdent des accents ou caractères spéciaux et, apparemment, l'UTF8 ne connait pas ce genre de caractère.

UTF-8 reconnait tous les caractères, c'est donc plutôt un problème d'encodage ou de header de ton côté

Pour le store, je dois être boulet mais je ne comprends pas tout.
Donc, je crée mon store via programmation (un itemFileWriteStore), ensuite je lui connecte ma fonction perso (dojo.connect(store, saveModifCell)).
Donc du coup, lors de la validation de modification d'une cellule, il lance saveMofiCell (laquelle n'a pas changé sauf pour les arguments qui diffèrent vu que je suis sur le onSet et non plus sur le ApplyEditCell).
Dans cette fonction, sur le handle du xhrPost, je fais ça :

Code :

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

1
2
3
4
5
6
 
var store = item["_S"];
store.save();
store.close();
var grille = dijit.byId("grille"+onglet);
grille.setStore(store);

Mais d'après toi, ce n'est pas nécessaire.
La question que je me pose du coup, c'est que j'ai une colonne qui doit recevoir l'id de la nouvelle ligne crée lors du xhrPost. C'est pourquoi je faisais cette manip afin que ça se mette à jour.
Sinon, je récupère l'id de la nouvelle ligne et la retourne via la réponse du xhr et renseigne directement le champs concerné dans le store. Tu en pense quoi ?

Code :

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

1
2
3
4
5
6
7
dojo.connect(store, "onSet", taFonction);
/* avec
	onSet: function(/* item */ item, 
					/* attribute-name-string */ attribute, 
					/* object | array */ oldValue,
					/* object | array */ newValue)
*/

Les paramètres sont clairs. Donc il te reste à lancer ta requête (synchrone, asynchrone ?) puis à modifier ta colonne id de l'item. Attention à ne pas générer une boucle infinie dans ta fonction... Et normalement il n'y a pas de reload du store à faire.

En fait, pour que tu comprennes mieux ma grille, je vais te l'expliquer un peu plus.
Elle met à jour deux tables. Une première avec des infos génériques et une autre avec des infos spécifiques. Hors ces deux tables sont liées par l'identifiant de la première.
Concrètement, la table principale concerne un article avec toutes ces infos.
Dans les colonnes de la grille, j'en ai 2 qui, elles sont liées à l'autre table (la personne qui va aller poser l'article chez le client et à quelle date).
Donc quand tu modifies la personne, une nouvelle ligne est créée dans la deuxième table (afin de garder l'historique des interventions) et c'est cette id que je dois afficher dans la grille.
D'où ma question sur sa récupération via la réponse du xhr si je ne fais de reload du store.

J'espère avoir été plus clair du coup sur mon soucis.

Oui. Mais je pense que cela ne change pas la démarche précédente.

ERE

[bellenthan]

Merci pour ces infos.
Par contre pour le UTF8, je dois pas bien le définir car il plante sur les accents et du coup mon json est pas valide pour le store.
Donc, si tu avais un exemple pour un encodage correct, ce serait vraiment sympa.

[emmanuel.remy]

Salut,

Merci pour ces infos.
Par contre pour le UTF8, je dois pas bien le définir car il plante sur les accents et du coup mon json est pas valide pour le store.
Donc, si tu avais un exemple pour un encodage correct, ce serait vraiment sympa.

Si tu renvoies ton flux JSON pour de l'UTF-8, encode le bien en UTF_8 (via utf8_encode par exemple.

ERE

[bellenthan]

ok merci.
Sinon, j'ai résolu mon problème en passant par le getter des champs.
Je vais faire maintenant des tests avec l'utf-8.

Merci encore pour le coup de main.

[emmanuel.remy]

ok merci.
Sinon, j'ai résolu mon problème en passant par le getter des champs.
Je vais faire maintenant des tests avec l'utf-8.

Merci encore pour le coup de main.

Qu'entends tu par "le getter des champs" ?

ERE