Tableau grid avec evenement infobulles

Version imprimable

Bonjour,

J'essaye de faire un tableau dojo, qui au passage de la souris m'ouvre une sorte d'infobulle ou je pourrais rentrer du texte en fonction des mes colonnes.

Ces colonnes doivent afficher une image qui change en fonction des données récupérer= 4 images d’états différents.

Mais je ne vois pas très bien comment m'y prendre.

Voici mon tableau : qui s'affiche.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <div dojoType="dijit.layout.ContentPane" class="grid" region="left"> <span dojoType="dojo.data.ItemFileReadStore" jsId="icStore" url="grid.json" ></span> <table id="grid1" dojoType="dojox.grid.DataGrid" store="icStore" clientSort="true" style="width: 35em; height: 15em;"> <thead> <tr> <th width="15%" field="Name">Name</th> <th width="15%" field="Etat">Etat</th> <th width="15%" field="Nombretotal">Nombre total</th> <th width="40%" field="description">description</th> </tr> </thead> </table> </div>
Si quelqu'un aurait quelques pistes à me donner.... pour pouvoir afficher l'infobulle.

Merci beaucoup!

10/08/2011, 14h09
Daniel_Gibot
Bonjour,

Je ne vois pas bien ce que vous souhaitez faire.
Vous voulez afficher une info bulle (dijit.tooltip ?) au passage de la souris sur le header ou sur les cellules ?
L'image doit apparaitre dans la cellule ou dans le tooltip ?

Il n'y a pas vraiment de "moyens" pour travailler sur les colonnes comme on pourrait avoir pour les lignes (par exemple onRowClick).

Il y a l'event au passage de la souris sur une cellule mais pas sur une colonne. Par contre vous pouvez récupérer le numéro de colonne via cet event.
Code:

1 2 3 4 5 dojo.connect(dijit.byId('grid1'),"onCellMouseOver",function(evt){ //affiche le nom de la colonne alert(evt.cell.field); });
Il y a "onCellMouseOver" mais aussi "MouseIn" et "MouseOut" et il y a "onCellClick".

En effet c'est bien dans la cellule que je voudrais créer une infobulle.

De nouveau voici mon tableau avec un petit changement :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div dojoType="dijit.layout.ContentPane" class="grid" region="left">
	<span dojoType="dojo.data.ItemFileReadStore" jsId="icStore" url="grid.json" ></span>
		<table id="grid1" dojoType="dojox.grid.DataGrid" store="icStore" clientSort="true" style="width: 35em; height: 15em;">
			<thead>
				<tr>
					<th width="15%" field="Name">Name</th>
					<th width="15%" field="state" formatter=renderActionCellContent>State</th>
					<th width="15%" field="Nombretotal">Nombre total</th>
					<th width="40%"
field="description">description</th>
				</tr>
			</thead>
		</table>
</div>

mon script :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
	function renderActionCellContent(value, index){
      var v_grid = dijit.byId('grid1');
      var itm = v_grid.getItem(index);
      var image;
      if(itm.state==1)
    	  image = "<img src='common/images/grid/circle/green.png'/>";
      if(itm.state==2)
    	  image = "<img src='common/images/grid/circle/yellow.png'/>";
      if(itm.state==3)
    	  image = "<img src='common/images/grid/circle/yellow.png'/>";
      if(itm.state==4)
    	  image = "<img src='common/images/grid/circle/red.png'/>";
      return image;
}

et mon fichier json :

Code:

1
2
3
4
5
6
7
 
{
	"items":[
		{"Name":"texte1","state":"0","Nombretotal":"1","description":"texte de description1"},
		{"Name":"texte2","state":"0","Nombretotal":"1","description":"texte de description2"}
	]
}

- je voudrais tout d'abord reussir à afficher mes images png dans ce tableau dans la colonne etat.
- et ensuite afficher une infobulle assez grande pour inserer quelques lignes de texte lorsque l'on passe sur l'image avec la souris.

Comment dois je m'y prendre?

10/08/2011, 16h13
Daniel_Gibot

Avec la valeur de votre variable "value" vous avez déjà la valeur de la cellule "state". Inutile de rechercher 'itm.state'. Et si vos images ne s'affichent pas c'est parce que la valeur de state est à "0" et que vous ne faites pas de contrôler pour cette valeur là ;)

En ce qui concerne les "Tooltip", je pense que c'est possible d'en afficher au passage de la souris sur la cellule (pas sur l'image qui est dedans) reste à trouver l'id unique de la cellule. Par contre, toute donnée saisie dans dans le "Tooltip" sera perdue étant donné qu'elle ne peut être liée au dataGrid. Mais il peut y avoir un moyen en créant une colonne "invisible" dans le dataGrid qui pourrait contenir les valeurs.
10/08/2011, 16h25
daucy36

Oui en effet la valeur était à 0.
Mais maintenant ca fonctionne très bien. merci beaucoup. Je suis en train de debuter avec le javascript et c'est pas encore très logique pour moi.

Pour ce qui concerne le tooltip, je dois créer un id pour chaque cellule?
Est ce que ca se fait dans le json?

Un grand merci ca m'a bien avancé en tout cas!
10/08/2011, 16h44
Daniel_Gibot

Il me semble que dojo, à la création du datagrid avec son contenu, défini un id unique à chaque composant (div, span etc...). Le nom doit être uniqueId je pense mais après faut fouiller dans la pile d'objet qu'il y a ;)

Sinon faut arriver à en définir un et ca par contre je ne sais pas comment c'est possible.

Je regarderai d'un peu plus près.
11/08/2011, 09h03
cfried

Citation:

Envoyé par Daniel_Gibot

Il me semble que dojo, à la création du datagrid avec son contenu, défini un id unique à chaque composant (div, span etc...). Le nom doit être uniqueId je pense mais après faut fouiller dans la pile d'objet qu'il y a ;)

Sinon faut arriver à en définir un et ca par contre je ne sais pas comment c'est possible.

Je regarderai d'un peu plus près.

Un petit coup de Regex et ça devrait jouer :mrgreen:

Bonjour,

Je pense avoir trouvé un moyen. En tout cas, après quelques tests cela fonctionne plutôt bien (je parle juste de l'affichage de l'infobulle).
Au niveau du formatter, à la création de la balise img, j'ai défini un id unique pour chaque image. Par exemple en prenant l'index de la ligne.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function renderActionCellContent(value, index){
      var image;
      if(value==1)
    	  image = "<img id='img_'"+index+"' src='common/images/grid/circle/green.png'/>";
      if(value==2)
    	  image = "<img id='img_'"+index+"' src='common/images/grid/circle/yellow.png'/>";
      if(value==3)
    	  image = "<img id='img_'"+index+"' src='common/images/grid/circle/yellow.png'/>";
      if(value==4)
    	  image = "<img id='img_'"+index+"' src='common/images/grid/circle/red.png'/>";
      return image;
}

Ensuite, au premier passage de la souris sur la cellule je crée le tooltip (avec un id unique aussi) que je lie à l'id unique de l'image à l'ouverture.

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
dojo.connect(dijit.byId('monTableau'), "onCellMouseOver", function(evt){
	var tableau = dijit.byId('monTableau');
	var id = evt.rowIndex;
        //on verifie qu'on est sur la colonne 'state' 
	if(evt.cell.field == 'state'){
                //on verifie que le tooltip n'existe pas
		if(typeof(dijit.byId('tooltip'+id)) == 'undefined' && dijit.byId('tooltip'+id) == null){
                        //création du tooltip avec un id unique
                        //C'est dans "content" que l'on met le contenu html
			new dijit.TooltipDialog({
				id : "tooltip"+id,
				content : '<label>Name:</label> <input data-dojo-type="dijit.form.TextBox"><br>' 
					+ '<label>Hobby:</label> <input data-dojo-type="dijit.form.TextBox"><br>' 
					+ '<button data-dojo-type="dijit.form.Button" type="button">Save</button>',
				showDelay: '100',
				position: 'above'
				});
                        //affiche de l'id a la création
			//alert('tooltip'+id);
 
                        //on crée un evenement pour cacher le tooltip lorsqu'on sort la souris
		        dojo.connect(dijit.byId('tooltip'+id), 'onMouseLeave', function() {
			         dijit.popup.close(dijit.byId('tooltip'+id));
		        });
               }
                //on affiche la popup
		dijit.popup.open({
			popup: dijit.byId('tooltip'+id),
			around: dojo.byId('img_'+id)
		});
	}
});

11/08/2011, 12h54
cfried

En tout cas c'est pas mal comme artifice et ça peut servir à d'autres ! Ca me donne des idées tout ça :ccool: :mrgreen:

C'est très bien detaillé merci mais je pense que je suis la seule à ne pas comprendre ou je dois mettre ce bout de code.

Code:

1
2
3
4
5
6
7
8
9
 
			new dijit.TooltipDialog({
				id : "tooltip"+id,
				content : '<label>Name:</label> <input data-dojo-type="dijit.form.TextBox"><br>' 
					+ '<label>Hobby:</label> <input data-dojo-type="dijit.form.TextBox"><br>' 
					+ '<button data-dojo-type="dijit.form.Button" type="button">Save</button>',
				showDelay: '100',
				position: 'above'
				});

Il doit apparaitre dans le :contentType="text/html; ???

Et par exemple je declare un id différent à chaque fois:

Code:

1
2
3
4
 
 image = "<img id='img_1'"+index+"' src='common/images/grid/circle/green.png'/>";
 image = "<img id='img_2'"+index+"' src='common/images/grid/circle/green.png'/>";
 image = "<img id='img_3'"+index+"' src='common/images/grid/circle/green.png'/>";

16/08/2011, 14h04
cfried

Salut, as tu regardé un peu la gestion des évènements que propose Dojo en javascript ?

Voici un tuto récent à ce sujet : http://dojotoolkit.org/documentation...ls/1.6/events/

Ensuite tu comprendras que le code de Daniel est exécuté sur l'évènement "onCellMouseOver" de ta grille dojox.grid.DataGrid (cf. api : http://dojotoolkit.org/api/, dojox.grid.DataGrid => Event Summary).

As-tu un fichier javascript chargé dans le header de ta page html et dans lequel tu codes tes traitements Dojo ?
16/08/2011, 14h38
daucy36
Oui j'ai bien un fichier javascript a part ou je peux coder tout mon javascript.

J'ai compris que je dois mettre le javascript dans ce fichier, mais ce que je ne comprend pas c'est comment définir l'id.
Et a quoi sert cette ligne, comment l’interpréter:
Code:

1 2 3 if(value==1) image = "<img id='img_'"+index+"' src='common/images/grid/circle/green.png'/>";
Et si je dois supprimer mes 2 lignes là :
Code:

1 2 3 var v_grid = dijit.byId('grid1'); var itm = v_grid.getItem(index);

Citation:
Envoyé par daucy36
Oui j'ai bien un fichier javascript a part ou je peux coder tout mon javascript.

J'ai compris que je dois mettre le javascript dans ce fichier, mais ce que je ne comprend pas c'est comment définir l'id.
Et a quoi sert cette ligne, comment l’interpréter:
Code:

1 2 3 if(value==1) image = "<img id='img_'"+index+"' src='common/images/grid/circle/green.png'/>";
Lis bien ce qu'a écrit Daniel :

Citation:

Envoyé par Daniel_Gibot

Bonjour,

Je pense avoir trouvé un moyen. En tout cas, après quelques tests cela fonctionne plutôt bien (je parle juste de l'affichage de l'infobulle).
Au niveau du formatter, à la création de la balise img, j'ai défini un id unique pour chaque image. Par exemple en prenant l'index de la ligne.

Il s'agit donc de définir tes identifiants grâce à l'index de la ligne de ton dojox.grid.DataGrid qui sera passée en paramètre de la fonction renderActionCellContent(value, index) implicitement par le formatter.

Ensuite, ces lignes de code écrites par Daniel ne sont qu'un exemple des différents traitements que l'on peut effectuer en fonction de la valeur de la cellule sur laquelle la souris passe :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function renderActionCellContent(value, index){ var image; if(value==1) image = "<img id='img_'"+index+"' src='common/images/grid/circle/green.png'/>"; if(value==2) image = "<img id='img_'"+index+"' src='common/images/grid/circle/yellow.png'/>"; if(value==3) image = "<img id='img_'"+index+"' src='common/images/grid/circle/yellow.png'/>"; if(value==4) image = "<img id='img_'"+index+"' src='common/images/grid/circle/red.png'/>"; return image; }
D'où sortent ces lignes de code ? :
Citation:
Envoyé par daucy36
Et si je dois supprimer mes 2 lignes là :
Code:

1 2 3 var v_grid = dijit.byId('grid1'); var itm = v_grid.getItem(index);
Pour pouvoir aider il faudrait avoir de plus amples informations sur ce que tu veux faire, l'architecture de ton code etc.

A +

Bonjour !
Citation:
Envoyé par daucy36
C'est très bien detaillé merci mais je pense que je suis la seule à ne pas comprendre ou je dois mettre ce bout de code.
Code:

1 2 3 4 5 6 7 8 9 new dijit.TooltipDialog({ id : "tooltip"+id, content : '<label>Name:</label> <input data-dojo-type="dijit.form.TextBox"><br>' + '<label>Hobby:</label> <input data-dojo-type="dijit.form.TextBox"><br>' + '<button data-dojo-type="dijit.form.Button" type="button">Save</button>', showDelay: '100', position: 'above' });
Il doit apparaitre dans le :contentType="text/html; ???

Et par exemple je declare un id différent à chaque fois:
Code:

1 2 3 4 image = "<img id='img_1'"+index+"' src='common/images/grid/circle/green.png'/>"; image = "<img id='img_2'"+index+"' src='common/images/grid/circle/green.png'/>"; image = "<img id='img_3'"+index+"' src='common/images/grid/circle/green.png'/>";
Pour répondre à la première question, comme l'a précisé cfried, la création du tooltip est faite lors de l'évènement onCellMouseOver. J'avais essayé une version à la création du grid (dans le formatter) mais cela ne fonctionnait pas comme je l'espérais (pas de parse des objets dojo). L'évènement onCellMouseOver est à placer après la création du datagrid (voir la faq dojo pour plus de précision sur les events).

Concernant la création d'un id différent à chaque fois, le formatter se charge de créer un id différent pour chaque image en utilisant l'index de la ligne. Si j'ai bien compris vous n'avez qu'une image par ligne...
Citation:
Et si je dois supprimer mes 2 lignes là :
Code:

1 2 var v_grid = dijit.byId('grid1'); var itm = v_grid.getItem(index);
Ce code vous permettait de récupérer la valeur de la cellule dans le formatter. Or vous l'avez déjà :

Code:

function renderActionCellContent(value, index){