Alterner les styles d'une grille

Version imprimable

06/08/2013, 17h37
Madusa

Alterner les styles d'une grille

Savez vous comment modifier la couleur d'un "row" sur 2 pour un grid de Kendo ui?

http://docs.kendoui.com/getting-star...arance-styling
(je ne sais pas si je suis dans la bonne section mais je trouvedes fonction JS à crée ...)
06/08/2013, 17h47
Invité
Que ce soit PHP ou JavaScript, il existe l'opérateur modulo, ou % :

Citation:

x % y
Retourne le reste de la division entière de l'opérande de gauche par celle de droite

L'intérêt ici :
Code:

1 2 x % 2 = 0 (si x est pair) x % 2 = 1 (si x est impair)
Un simple compteur + test du modulo (0 ou 1 ?) te permettra de changer le style des lignes paires/impaires.

sinon ça se fait plutot en css ...

Code:

1
2
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Code:

1
2
tr:nth-child(2n) {background: #CCC}
tr:nth-child(2n+1) {background: #FFF}

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
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
97
98
99
<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<body>
<?php include("menu.php"); ?>
 
<?php include("connexionbdd.php"); // query for the definition, type of this problem
?>
<?php 
 
$sql_pb="SELECT * from problem where id_Pb=1";
$res_pb=mysql_query($sql_pb);
$rows_pb=mysql_fetch_assoc($res_pb);
 
 
?></br></br></br></br>Definition:<?php echo $rows_pb['def_Pb'];
$var=$rows_pb['id_Pb_Type']
 
 ?> </br></br>
 <script src="people.js"></script>
 
        <div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height:580px"></div>
 
            </div>
 
            <style scoped>
			<?php //tableau: placement ?>
                #clientsDb {
 
 
                    margin-left:5px;
 
                    padding:0px 40px 0px 0px;
 
                }
            </style>
            <div id="grid"></div>
<div id="grid">
<?php 
$sql_inc="SELECT 
        incident.date_Inc AS date, 
        incident.name_Inc AS name, 
        incident.desc_Inc AS description,
        location.name_Loc  as location
        FROM incident 
        LEFT JOIN location
        ON incident.id_Loc=location.id_Loc
        WHERE id_Pb = 1 
        ORDER BY date_Inc DESC";
            
$res_inc=mysql_query($sql_inc);
$data_row = array();
while($rows_inc=mysql_fetch_assoc($res_inc)){
 
 $data_row[] = $rows_inc;
}$data_set = json_encode($data_row);
?>
 
 
 
<script>
 
 
var dataSource = new kendo.data.DataSource({
  data: <?php echo $data_set; ?>
});
$("#grid").kendoGrid({
  columns: [
    {width:150, field: "date" },
    { width:300,field: "name" },
	{ width:500,field: "description" },
	{ width:200,field: "location" }
  ],
  dataSource: dataSource,
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>
</div>
  </body>
</html>

Le problème est que ce n'est pas une table que j'ai crée avec td,th et tr mais c'est avec du kendoui donc ça ne change rien lorsque je rajoute au css
ceci...
k-content et grid sont les identifiants /classe

07/08/2013, 10h28
Invité

Ce qu'on veut voir, c'est le code source généré (celui affiché dans le navigateur).

Tu as aussi la doc Kendo UI.

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
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
 
<!DOCTYPE html>
<html>
 
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/kendo.default.min.css" rel="stylesheet" />
 
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
 
<body>
<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
    </header>
 <html>
 
 
 
 
 
 
 
</html></br></br></br></br>Definition:hbhbhbhbh </br></br>
 <script src="people.js"></script>
 
        <div id="example" class="k-content">
            <div id="clientsDb">
 
                <div id="grid" style="height:580px"></div>
 
            </div>
 
            <style scoped>
			                #clientsDb {
 
 
                    margin-left:5px;
 
                    padding:0px 40px 0px 0px;
 
                }
            </style>
            <div id="grid"></div>
<div id="grid">
 
 
 
<script>
 
 
var dataSource = new kendo.data.DataSource({
  data: [{"date":"2013-08-12","name":"Frauds","description":" the typical ...","location":"egypte"},{"date":"2013-08-04","name":"Probleme de timinf","description":"An essential tool to...","location":"egypte"},{"date":"2013-07-22","name":"Skimming ","description":"oooootjj","location":"egypte"},{"date":"2013-05-11","name":"Skimming incident","description":"kppppp","location":null},{"date":"2012-11-12","name":"Ski ","description":null,"location":null},{"date":"2011-08-11","name":"problem","description":"This applies to Sao Paulo specifically, but can be applied broadly to Brazil.\r\n\r\nI have been traveling to Brazil for over 14 years","location":null}]});
$("#grid").kendoGrid({
  columns: [
    {width:150, field: "date" },
    { width:300,field: "name" },
	{ width:500,field: "description" },
	{ width:200,field: "location" }
  ],
  dataSource: dataSource,
 groupable: true,
                        sortable: true,
                        pageable: {
                            refresh: true,
                            pageSizes: true
                        },
});
 
 
 
var grid = $("#grid").data("kendoGrid");
grid.setDataSource(dataSource);
</script>
 
 
        </div>
 
 
 
</body>
 
 
 
 
</html>

07/08/2013, 10h34
SpaceFrog

Analyse les code source généré pour visualiser les balises utilisées pour créer le tableau et modifie les sélecteur tr en conséquence ...
07/08/2013, 10h51
Madusa

Je ne vois pas ou le tableau est construit (avec JQuery et kendoui)...
Il est construit plutot avec le css et on a comme class="k-content" et id=grid....
07/08/2013, 10h53
SpaceFrog

madusa dans firebug regarde l'onglet html ...
07/08/2013, 11h02
Invité

Si tu as un lien vers ton site en ligne, ça aiderait.

Sinon, (je pense te l'avoir déjà dit dans un autre post) :
1/ => installe le plug-in firebug sur Firefox

2/ Une fois installé :
- clic droit sur l'élément à inspecter
- puis, dans le menu : "Inspect element with Firbug"
07/08/2013, 11h13
Madusa

Je n'arrive pas a le télécharger , quand je vais sur le site puis download : "page web innaccesible"...
j'utilise googlechrome
07/08/2013, 11h16
Invité

Citation:

Envoyé par Madusa

j'utilise google chrome

Tu te moques de nous... :mur:
On a bien écrit que Firebug est pour Firefox.

CELA DIT :
Google Chrome A CE MEME PRINCIPE pré-installé !
- clic droit sur l'élément à inspecter
- puis, dans le menu : "Inspecter l'élement"
07/08/2013, 11h18
SpaceFrog

Des fois fleuriste est une bonne alternative ...
07/08/2013, 11h26
Invité

@madusa

Il va vraiment falloir que tu fasses des efforts, sinon tu vas te retrouver bien seule.

On en est déjà au 14ème message, rien que sur ce post.
Et tous les autres post que tu as ouverts font plusieurs kilomètres de long aussi.

Ca devient pénible.

Nous sommes ici pour t'aider bénévolement.
Et tu nous fais perdre beaucoup de temps.

Je t'invite à lire/relire Les règles du Club.
Tu y trouveras les clés pour obtenir une réponse rapide à tes questions.
07/08/2013, 11h28
Kaamo

Citation:

Envoyé par jreaux62

1/ => installe le plug-in firebug sur Firefox

Citation:

Envoyé par Madusa

Je n'arrive pas a le télécharger [...] j'utilise googlechrome

à inclure dans le bêtisier 2013 DVP :ptdr:
07/08/2013, 11h32
Invité

Madusa obtient 3 votes :moinsser:
... et "fleuriste" obtient 3 votes :plusser: !

Il est peut-être temps pour une reconversion...

@Madusa : n'y voit aucune méchanceté : "C'est les nerfs !!!!! :scarymov:"
07/08/2013, 14h35
Madusa

Oui avec chrome , juste à tapper F12
:? Désolé de vous avoir fait perdre du temps et encore merci de votre aide
07/08/2013, 15h52
SpaceFrog

qui t'as dit que ce serait un table ????

on te dit d'utiliser la fonctionnalité "inspecter cet element" de sorte a visualiser le code html généré par jquery ...
07/08/2013, 17h00
Madusa

justement , je suis en train de faire l'inspection...pour les couleurs j'ai trouvé mais j'ai encore un problème...
mais tant pis , sinon on va encore me traiter de nulle :(
07/08/2013, 18h51
Invité

Citation:

Envoyé par Madusa

..., sinon on va encore me traiter de nulle :(

MAIS NON, MAIS NON ! :calin:

Le(s) problème(s) avec toi, c'est :
- qu'il faut souvent te demander des infos/explications/codes supplémentaires, alors qu'il serait plus rapide que tu les donnes tout de suite !
- que tu ne (re)montres pas toujours ton code (surtout après de multiples corrections), ou les messages d'erreur + lignes de code concernées ("Ca ne fonctionne pas" n'est pas un message d'erreur !)
- que tu ne suis pas toujours la conversation (comme ci-dessus concernant firebug !)

A part ça... ça va. :aie:

N.B. As-tu (re-)lu les règles du forum ?
Notamment :
- Message clair et précis
- Pourquoi personne ne répond ?
- Avant de poser vos questions
On y trouve de bons conseils ! ;)
08/08/2013, 08h23
SpaceFrog

Citation:

.pour les couleurs j'ai trouvé

=> Donc tu n'es pas nulle !

Mais +1 pour jreaux ;) :calin:
08/08/2013, 09h59
Invité

@Madusa,
je ne voudrais pas que nos remarques sarcastiques :aie: t'empêchent de poser de nouvelles questions sur le forum.

Je me dois de parler de TES POINTS POSITIFS :
- tu écris dans un français parfait, SANS FAUTES d'orthographe ! Ce qui est une qualité rare sur les forums, et agréable à lire !
- tu ne manques pas de ténacité, et tu t'accroches toujours malgré les difficultés
- tu est une fille dans un monde plein de testostérone : accroche-toi ! (les garçons ne sont pas connus pour la finesse de leur humour !)
:ccool:

Donc n'hésite JAMAIS à poser des questions !
La véritable bêtise serait d'y renoncer...