Cette page est consultable pour des raisons historiques.
Le contrôle DataGrid permet d'afficher des données sous la forme d'un tableau. C'est un des composants le plus puissant et le plus compliqué d'ASP.Net.
Ce composant permet d'afficher facilement des données dans un tableau HTML sans avoir à écrire un mélange de code HTML et de script comme il était habituel de le faire en ASP.
Il possède de nombreuses fonctionnalités de personnalisation.
Présentation
Ce composant est capable de formater et d'afficher les données d'une source de données (base de données, XML, collection, .). Il possède des fonctionnalités avancées qui facilitent son utilisation pour permettre d'éditer les données, de trier les informations ou de gérer la pagination.
La forme la plus basique du tag Datagrid est la suivante :
<asp:datagrid runat="server" id="ID_DataGrid" />Ceci permet d'insérer le composant. Il faut ensuite associer à ce composant une source de données qui va contenir les données à afficher. Cette source de données peut être n'importe quel objet qui implémente l'interface IEnumerable tel que les objets encapsulant des collections (ArrayList, Hashtable, .) ou des sous ensembles d'une base de données (DataSet, DataReader).
Il suffit de préciser la source de données dans la propriété DataSource et d'appeler la méthode DataBind() du DataGrid.
Exemple :
<%@ Page Language="C#" %>
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.OleDb" %>
<script runat="server">
public void Page_Load(Object Sendr, EventArgs e) {
OleDbConnection maConnection = new OleDbConnection(
@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\bdtest.mdb; User Id=; Password=; Persist Security Info=False;");
OleDbCommand maCommand = new OleDbCommand("select * from personnes", maConnection);
maConnection.Open();
maGrille.DataSource = maCommand.ExecuteReader(CommandBehavior.CloseConnection); maGrille.DataBind();
}
</script>
<html>
<head>
<title>Test Bonjour</title>
</head>
<body>
<form runat="server">
<p> <asp:datagrid runat="server" id="maGrille" /> </p>
</form>
</body>
</html>
Résultat :
Cet exemple trés simple permet d'entrevoir une petite partie des possibilités du composant DataGrid avec seulement quelques lignes de code dont la grande majorité permet l'obtention des données de la table de la base de données.
Options de personnalisation de l'affichage
Le composant DataGrid possède de nombreuses propriétés pour personnaliser le rendu HTML qu'il génére.
Ces propriétés peuvent être précisées dans le tag <asp:datagrid> ou dans le code exécuté coté serveur.
En plus des propriétés liées à la grille elle même, la personnalisation utilise des styles pour caractériser certains éléments de la grille :
- HeaderStyle : permet de définir les caractéristiques de l'en tête de la grille
- FooterStyle : permet de définir les caractéristiques du pied de page de la grille
- ItemStyle : permet de définir les caractéristiques d'une ligne de la grille
- AlternatingItemStyle : permet de définir les caractéristiques d'une ligne alternative (affichage d'une ligne sur deux avec ces caractéristiques).
Ces styles possèdent de nombreuses propriétés tel que BackColor, ForeColor, Font, HorizontalAlign définies dans la classe TableItemStyle.
Exemple : personnalisation par programmation
<%@ Page Language="C#" %>
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.OleDb" %>
<%@ import namespace="System.Drawing" %>
<script runat="server">
public void Page_Load(Object Sendr, EventArgs e) {
OleDbConnection maConnection = new OleDbConnection(
@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\bdtest.mdb;User Id=; Password=;Persist Security Info=False;");
OleDbCommand maCommand = new OleDbCommand("select * from personnes", maConnection);
maConnection.Open();
maGrille.DataSource = maCommand.ExecuteReader(CommandBehavior.CloseConnection);
maGrille.DataBind();
maGrille.BackColor = Color.Beige;
maGrille.CellPadding = 4;
maGrille.BorderColor = Color.Black;
maGrille.HeaderStyle.BackColor = Color.Brown;
maGrille.HeaderStyle.ForeColor = Color.White;
}
</script>
<html>
<head>
<title>Test Bonjour</title>
</head>
<body>
<form runat="server">
<p> <asp:datagrid runat="server" id="maGrille" /> </p>
</form>
</body>
</html>
Exemple : le même exemple en utilisant les attributs des tags
<%@ Page Language="C#" %>
<%@ import namespace="System.Data" %>
<%@ import namespace="System.Data.OleDb" %>
<%@ import namespace="System.Drawing" %>
<script runat="server">
public void Page_Load(Object Sendr, EventArgs e) {
OleDbConnection maConnection = new OleDbConnection(
@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\bdtest.mdb;User Id=; Password=;Persist Security Info=False;");
OleDbCommand maCommand = new OleDbCommand("select * from personnes", maConnection);
maConnection.Open();
maGrille.DataSource = maCommand.ExecuteReader(CommandBehavior.CloseConnection);
maGrille.DataBind();
}
</script>
<html>
<head>
<title>Test Bonjour</title>
</head>
<body>
<form runat="server">
<p>
<asp:datagrid runat="server" id="maGrille" BackColor="Beige" CellPadding="4" BorderColor="4">
<HeaderStyle BackColor="Brown" ForeColor="White">
</HeaderStyle>
</asp:datagrid>
</p>
</form>
</body>
</html>Pour une liste exhaustive des nombreuses propriétés de personnalisation ,consultez la documentation fournie avec le SDK.
Il est aussi possible d'utiliser la propriété CssClass pour préciser une classe de la feuille de style associée à la page.
<asp:DataGrid id="maGrille" HeaderStyle-CssClass="Header" runat="server" />
Préciser les données à afficher
Par défaut, le composant DataGrid affiche chacun des éléments qui composent la source de données. Le composant DataGrid permet de n'afficher que certaines données de la collection.
Il faut pour commencer mettre la propriété AutoGenerateColumns à false. Cette propriété permet de préciser si le composant doit automatiquement utiliser tous les éléments de la source de données ou si ils seront explicitement préciser dans le code.
Il faut ensuite utiliser un tag Columns, puis pour chaque données utiliser le tag <asp:BoundColumn>. L'attribut DataField de ce tag permet de préciser la donnée.
Exemple :
<form runat="server">
<p>
<asp:datagrid runat="server" id="maGrille" CellPadding="4" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="nompersonne" />
<asp:BoundColumn DataField="prenompersonne" />
</Columns>
</asp:datagrid>
</p>
</form> La tag BoundColumn possède plusieurs attributs pour personnaliser les données :
HeaderText: précise le titre de la colonneFooterText: précise la dernière ligne de la colonneHeaderStyle: personnalise respectivement l'entête, le pied et la cellule d'une colonneDataFormatString: précise un format d'affichage des données
| Exemple : |
|
Résultat :
Ajouter une action sur chaque ligne
Le composant DataGrid permet d'ajouter facilement un lien sur chaque ligne qui permettra de réaliser une action sur la ligne associée (pour par exemple l'édition, la suppression, la consultation des détails, .).
Le tag ButtonColumn permet de définir une colonne contenant un lien.
<form runat="server">
<form runat="server">
<p>
<asp:datagrid runat="server" id="maGrille" CellPadding="4" AutoGenerateColumns="False" width="80%">
<HeaderStyle HorizontalAlign="Center" BackColor="blue" ForeColor="White" />
<Columns>
<asp:BoundColumn DataField="nompersonne" HeaderText="Nom">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundColumn >
<asp:BoundColumn DataField="prenompersonne" HeaderText="Prénom" />
<asp:BoundColumn DataField="taille" HeaderText="Taille" DataFormatString="{0:F2}" >
<HeaderStyle HorizontalAlign="Center" BackColor="blue" ForeColor="White" />
<ItemStyle HorizontalAlign="Right" />
</asp:BoundColumn >
<asp:ButtonColumn Text="Editer" HeaderText="Actions" />
</Columns>
</asp:datagrid>
</p>
</form>
L'attribut ButtonType permet de préciser le type lien à générer. Par exemple, la valeur "PushBouton" permet de générer un bouton plutôt qu'un lien.
L'attribut HeaderText permet de préciser l'en tête de la colonne.
Un événement de type ItemCommand est exécuté lorsque l'utilisateur clic sur une action.
Il suffit pour associer les traitements à l'action de définir un handler sous la forme d'une méthode possédant la signature suivante :
void nom_du_handler(object sender, DataGridCommandEventArgs e) {
}
Pour associer le handler au gestionnaire d'événement, il suffit d'utiliser l'attribut OnItemCommand en lui fournissant comme valeur, le nom du handler.
<%@ Page Language="C#" %>
<%@ import Namespace="System.Data" %>
<%@ import Namespace="System.Data.OleDb" %>
<%@ import Namespace="System.Drawing" %>
<script runat="server">
public void Page_Load(Object Sendr, EventArgs e)
{
if (! Page.IsPostBack) {
OleDbConnection maConnection = new OleDbConnection(
@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source=C:\bdtest.mdb;User Id=;Password=;Persist Security Info=False;");
OleDbCommand maCommand = new OleDbCommand("select * from personnes", maConnection);
maConnection.Open();
maGrille.DataSource = maCommand.ExecuteReader(CommandBehavior.CloseConnection);
maGrille.DataBind();
}
}
void maGrille_ItemCommand(object sender, DataGridCommandEventArgs e) {
// code du traitement de l'action
}
</script>
<html>
<head>
<title>Test DataGrid</title>
</head>
<body>
<form runat="server">
<p>
<asp:datagrid id="maGrille" runat="server" width="80%"
AutoGenerateColumns="False" CellPadding="4" OnItemCommand="maGrille_ItemCommand">
Le clic sur l'action va appeler la page elle-même (post back). Dans la méthode page_load, le test sur la propriété IsPostBack permet de ne connecter les données de la grille que la première fois ou la page est affichée.
L'inconvénient de l'événement ItemCommand est que c'est le même handler qui est utilisé quel que soit l'action cliquée. Le handler doit donc être capable de déterminé quelle action a été utilisée et pour quelle ligne.
Le second paramètre du handler est un objet de type DataGridCommandEventArgs qui contient des informations permettant cette identification. Cette classe contient un objet Item de type TableRow qui permet d'identifier la ligne. Pour accéder à une données d'une colonne de la ligne, il faut utiliser la propriété Cells.
| Exemple : |
|
Il est fréquent dans ce type de traitement de devoir utiliser un identifiant qui ne doit pas être affiché aux utilisateurs mais qui permet d'identifier de façon unique la ligne sur laquelle une action est à réaliser.
Pour réaliser cette tache, il suffit de définir une colonne représentant cet identifiant avec un tag BoundColumn et mettre la valeur false à son attribut visible. La valeur de cette colonne sera sauvegardée dans le viewstate mais ne sera pas affichée dans la page.
| Exemple : |
|
Trier les données d'un DataGrid
Le composant DataGrid propose des fonctionnalités pour faciliter l'implémentation d'un système de tri des données par colonne dans la grille.
Pour pouvoir utiliser cette fonctionnalité, il faut mettre la propriété AllowSorting à True.
Si la liste des colonnes est explicitement précisée alors il faut utiliser l'attribut SortExpression du tag <asp:BoundColumn> pour chacune des colonnes qui peut servir d'ordre de tri.
La valeur de cette attribut est libre et permettra de déterminer sur quelle colonne doit se faire le tri. Il est pratique par exemple de mettre le nom de la colonne.
Dans l'en-tête de chacune de ces colonnes, un hyperlien permettra de déclencher un événement pour lequel il faut définir un handler de type SortEventHandler possédant la signature suivante :
Sub SortEventHandler(sender as Object, e as DataGridSortCommandEventArgs)
Le second paramètre de type DataGridSortCommandEventArgs contient des informations sur l'événement, notamment la propriété SortExpression qui permet de savoir quelle est la colonne sélectionnée.
Il suffit d'ajouter le code nécessaire à l'obtention des données dans l'ordre de tri correspondant et d'associer cette nouvelle source de données à la grille.
Enfin, il faut associer l'événement au handler en utilisant l'attribut OnSortCommand.
| Exemple : |
|
Ce code n'est pas optimisé : il serait préférable d'écrire une méthode qui en fonction d'un paramètre indiquant l'ordre de tri, ouvre une source de données et l'associe à la grille.
L'édition des données
Le composant DataGrid propose des fonctionnalités qui permettent de développer facilementé la capacité d'éditer les données contenues dans une ligne de la grille.
Pour mettre en oeuvre cette fonctionnalité, il faut utiliser un contrôle EditCommandColumn qui affiche un bouton permettant de demander l'édition de la ligne. Un clic sur un tel bouton déclenche un événement de type EditCommand avec un postback. Le contrôle affiche alors sur la ligne en cours d'édition deux boutons pour valider ou annuler les modifications.
Le contrôle EditCommandColumn possède de nombreux attributs pour le personnaliser (type d'affichage, libellé des différentes actions, .).
Remarque : lors du chargement de la page, il est important de ne charger les données que lors du premier appel de la page. En effet, lors des postbacks liés à une mise à jour, celle ci sera perdue si les données sont rechargées.
Le contrôle DataGrid possède un attribut EditItemIndex qui indique l'élément de la grille en cours d'édition en commençant par 0. Si aucune ligne n'est en cours d'édition alors la valeur vaut -1.
Un clic sur le bouton " Edit " génére un événement de type EditCommand : il faut écrire un handler et l'associer à cet événement grâce à l'attribut OnEditCommand. Ce handler met à jour la propriété EditItemIndex avec la valeur de la ligne cliquée fournie en paramètre et recharge les données de la grille. Le bouton " Edit " est automatiquement remplacé par deux boutons : " update " et " cancel ". Toutes les cellules de la ligne en cours d'édition reçoivent par défaut un composant de type TextBox.
Pour empêcher une colonne d'être éditée (par exemple, une colonne contenant un identifiant), il suffit de mettre la propriété ReadOnly de la colonne à True.
Un clic sur le bouton " update " génére un événement de type UpdateCommand : il faut écrire un handler et l'associer à cette événement grâce à l'attribut OnUpdateCommand. Ce handler doit traiter la mise à jour en effectuant de base les traitements suivant :
- extraire les données saisies
- générer et exécuter la requête SQL de mise à jour de données
- mettre -1 dans la propriété EditItemIndex
- recharger les données de la grille
Le second paramètre de handler, de type DataGridCommandEventArgs, possède une propriété Item de type DataGridItem qui contient les données de la ligne en cours d'édition. Cet objet Item contient une collection nommée Cells qui représente les cellules. Chaque élément de cette collection possède une collection de contrôles nommée Controls qui permet d'accéder aux composants de saisie et donc aux valeurs entrées par l'utilisateur. Un transtypage est nécessaire vers le type du contrôle de saisie.
Un clic sur le bouton " cancel " génére une événement de type CancelCommand : il faut écrire un handler et l'associer à cette événement grâce à l'attribut OnUpdateCommand. Ce handler doit au minimum mettre -1 dans la propriété EditItemIndex pour indiquer qu'il n'y a aucune ligne en cours d'édition et recharger les données de la grille.
| Exemple : |
|
Par défaut, la grille utilise un composant de type TextBox pour saisir les données lors de l'édition. Cependant, ce mode de saisie n'est pas toujours adapté pour certaines données tel que des booléens ou la sélection d'un élément dans une autre table dont la valeur de l'identifiant est stockée sous la forme d'une clé étrangère.
Pour personnaliser le mode saisie d'une donnée dans une cellule, il faut utiliser un tag TemplateColumn
Copyright ©2004 Jean Michel DOUDOUX - All Rights Reserved.
