Colorer les lignes d’une GridView avec JavaScript
Objectifs:
- Manipuler le contrôle serveur GridView
- Manipuler les lignes d'un contrôle serveur avec JavaScript
- Associer des événements JavaScript aux lignes du contrôle GridView
Énoncé:
Créer une page ASP.Net qui propose une fonctionnalité de coloration de l’arrière-plan des lignes d’une grille (GridView) contenant des CheckBox en utilisant 2 couleurs :
- Aqua: si la ligne est sélectionnée
- Orange: au survol de la souris
Si une ligne est sélectionnée ou survolée, elle est mise en évidence sinon il faut remettre sa couleur d’origine.
Implémenter cette fonctionnalité dans l’exercice Suppression de plusieurs lignes d’une GridView avec CheckBox en utilisant JavaScript dans le contrôle GridView afin de réduire les PostBacks.
- Utiliser les événements Click, MouseOver et MouseOut du Javascript
- Utiliser l'événement RowDataBound du contrôle GridView pour associer les événements Javascript à chaque ligne.
Pour commencer, il faut utiliser le contrôle GridView et l'associer à une source de données puis ajouter une colonne de type CheckBox:
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4" DataKeyNames="Id"
DataSourceID="SqlDataSource1" EmptyDataText="Il n'y a aucun enregistrement de données à afficher."
ForeColor="#333333" GridLines="None" BorderStyle="Solid"
OnRowDataBound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField HeaderText="Action">
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" onclick = "Case_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="Nom" HeaderText="Nom" SortExpression="Nom" />
<asp:BoundField DataField="Prenom" HeaderText="Prenom" SortExpression="Prenom" />
<asp:BoundField DataField="Adresse" HeaderText="Adresse" SortExpression="Adresse" />
<asp:BoundField DataField="Ville" HeaderText="Ville" SortExpression="Ville" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
Dans le code ASPX généré, il faut ajouter l'appel aux fonctions GridView1_RowDataBound (C#) et Case_Click (Javascript) qui correspondent respectivement aux événements RowDataBound du GridView et onClick de la case à cocher.
La fonction GridView1_RowDataBound permet d'attacher les événements MouseOver et MouseOut aux lignes du contrôle GridView:
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "Survol(this, event)");
e.Row.Attributes.Add("onmouseout", "Survol(this, event)");
}
}
Les deux fonctions Javascript Case_Click et Survol (à mettre dans la balise head) permettent de changer la couleur d'une ligne si elle est sélectionnée ou survolée:
<script type = "text/javascript">
function Case_Click(objRef) {
//Récupérer la ligne à partir de son checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
//Si la case est sélectionnée on change la couleur en Bleu
row.style.backgroundColor = "aqua";
}
else {
//S'elle n'est pas sélectionée on remet la couleur d'origine
//Pas besoin de faire ce test si le thème par défaut (blanc) est utilisé
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "white";
}
else {
row.style.backgroundColor = "#F7F6F3";
}
}
}
function Survol(objRef, evt) {
var checkbox = objRef.getElementsByTagName("input")[0];
if (evt.type == "mouseover") {
objRef.style.backgroundColor = "orange";
}
else {
if (checkbox.checked) {
objRef.style.backgroundColor = "aqua";
}
else if (evt.type == "mouseout") {
if (objRef.rowIndex % 2 == 0) {
objRef.style.backgroundColor = "white";
}
else {
objRef.style.backgroundColor = "#F7F6F3";
}
}
}
}
</script> 
