Alterner les styles d'une grille

**Madusa** · 06/08/2013, 17h37

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

Invité · 06/08/2013, 17h47

Que ce soit PHP ou JavaScript, il existe l'opérateur modulo, ou % :

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 :

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

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.

**SpaceFrog** · 07/08/2013, 09h12

sinon ça se fait plutot en css ...

Code css :

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

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

Code css :

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

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

**Madusa** · 07/08/2013, 10h26

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

Invité · 07/08/2013, 10h28

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.

**Madusa** · 07/08/2013, 10h33

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

**SpaceFrog** · 07/08/2013, 10h34

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

**Madusa** · 07/08/2013, 10h51

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

**SpaceFrog** · 07/08/2013, 10h53

madusa dans firebug regarde l'onglet html ...

Invité · 07/08/2013, 11h02

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"

**Madusa** · 07/08/2013, 11h13

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

Invité · 07/08/2013, 11h16

Envoyé par Madusa

j'utilise google chrome

Tu te moques de nous...

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"

**SpaceFrog** · 07/08/2013, 11h18

Des fois fleuriste est une bonne alternative ...

Invité · 07/08/2013, 11h26

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

**Kaamo** · 07/08/2013, 11h28

Envoyé par jreaux62

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

Envoyé par Madusa

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

à inclure dans le bêtisier 2013 DVP

Invité · 07/08/2013, 11h32

Madusa obtient 3 votes

... et "fleuriste" obtient 3 votes

!

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

@Madusa : n'y voit aucune méchanceté : "C'est les nerfs !!!!!

"

**Madusa** · 07/08/2013, 14h35

Oui avec chrome , juste à tapper F12

Désolé de vous avoir fait perdre du temps et encore merci de votre aide

**SpaceFrog** · 07/08/2013, 15h52

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

**Madusa** · 07/08/2013, 17h00

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

Invité · 07/08/2013, 18h51

Envoyé par Madusa

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

MAIS NON, MAIS NON !

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.

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 !

Alterner les styles d'une grille

JavaScript

Discussions similaires

Partager

Partager