FAQ ASP.NET/VB.NET
FAQ ASP.NET/VB.NETConsultez toutes les FAQ
Nombre d'auteurs : 38, nombre de questions : 369, dernière mise à jour : 16 juin 2021
- Comment ajouter des boutons-images dans un DataGrid ?
- Comment afficher une image dans un DataGrid ?
- Comment ajouter une scrollbar à un DataGrid ?
- Comment lier une Css à un DataGrid ?
- Comment n'afficher que l'heure d'un champ type DateTime dans un DataGrid ?
- Comment adapter la hauteur du DataGrid en fonction du nombre de lignes à afficher ?
- Comment ajouter une colonne de WebControls dans un DataGrid ?
- Comment éviter d'indiquer le nombre de pages d'un DataGrid/GridView lorsque celui-ci est 1 ?
- Comment définir la taille d'une colonne de DataGrid?
- Comment passer un argument à la fonction liée à l'événement OnClick d'un bouton?
- Pourquoi dois-je cliquer deux fois pour afficher une autre page de mon DataGrid?
- Comment changer la taille de la textbox d'édition de mon datagrid ?
- Comment changer la couleur d'une cellule d'un datagrid ?
- Comment rendre une colonne invisible si AutoGenerateColumns="true" ?
- Est-ce bon de sauvegarder le contenu d'un DataGrid dans le ViewState ?
- J'ai une erreur javascript lorsque j'utilise le paging d'un DataGrid. Pourquoi?
- Comment passer deux paramètres à une url d'hyperlink dans un DataGrid?
- J'ai l'erreur "DataGrid with id 'datagridId' could not automatically generate any columns from the selected data source", que faire?
- Comment retrouver un contrôle d'un DataGrid et lui assigner une fonction javascript ?
Tout d'abord, il est nécessaire de mettre la colonne dans laquelle on souhaite mettre l'image en TemplateColumn.
<ItemTemplate>
<asp:ImageButton id
=
imgNotValidated runat
=
"server"
Width
=
"12px"
ImageUrl
=
"Resource/toCheck.gif"
Height
=
"12px"
ImageAlign
=
"Middle"
CommandName
=
"Item"
>
</asp:ImageButton>
<asp:Image id
=
imgValidated runat
=
"server"
Width
=
"12px"
ImageUrl
=
"Resource/check.gif"
Height
=
"12px"
ImageAlign
=
"Middle"
>
</asp:Image>
</ItemTemplate>
Le code du traitement dans le code-behind:
...
Pour placer une image dans un DataGrid il suffit d'utiliser une TemplateColumn et d'y placer l'image (par des composants html classiques ou par des composants aspnet):
<asp:DataGrid id
=
"DataGrid1"
AutoGenerateColumns
=
false>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<img scr
=
'
<%
# Databinder.Eval
(
Container.DataItem
,"Path"
) %>
'
>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Il est bien entendu possible d'ouvrir une page lors d'un clic sur l'image par:
<asp:DataGrid id
=
"DataGrid1"
AutoGenerateColumns
=
false>
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<a href
=
'mon_url'
>
<img scr
=
'
<%
# Databinder.Eval
(
Container.DataItem
,"Path"
) %>
'
>
</a>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
Ceci est applicable à n'importe quel contrôle mais il s'agit du cas le plus fréquemment nécessaire.
En plaçant le DataGrid dans un div, il est possible de spécifier la hauteur affichable du DataGrid (plus exactement
du div). Si celui-ci dépasse la taille du div, une scrollbar apparaît.
<div style
=
"height:400; overflow:auto"
>
<asp:DataGrid runat
=
"server"
ID
=
"Dg"
>
...
</asp:DataGrid>
</div>
Lien : Comment adapter la hauteur du DataGrid en fonction du nombre de lignes à afficher ?
Le principe est le même pour lier un DataGrid à une Css que pour lier un Calendar à une Css : il faut lier chaque style définissant l'aspect du WebControl à une classe Css. Pour éviter la redondance d'informations sur cette FAQ je vous renvoie à la question : "Comment lier une Css à un Calendar ?"
Chaque colonne d'un DataGrid à une propriété DataFormatstring. Pour n'afficher que l'heure d'un champ DateTime la chaîne de caractères à mettre pour la propriété DataFormatstring est :
- {0:HH:mm} : pour afficher les heures (de 0 à 24) et les minutes
- {0:hh:mm} : pour afficher les heures (de 1 à 12) et le minutes
- {0:HH:mm:s} : pour afficher les heures (de 0 à 24), les minutes et les secondes
Pour plus d'informations sur les formats personnalisés d'affichage de DateTime voir le site MSDN
Lien : Custom DateTime Format strings
Lien : Comment formater une date pour l'affichage ?
Cette question va paraître simpliste pour certain, mais en parcourrant notre forum je me suis aperçu qu'on avait été pas mal à se prendre là tête la dessus.
Quand on utilise un DataGrid avec l'option AutoGenerateColumns="true" on a la hauteur du DataGrid qui s'ajuste automatiquement en fonction du nombre de ligne qu'affiche la page.
Par contre, si on décide de spécifier manuellement les colonnes, et donc qu'on met AutoGenerateColumns="false", ce n'est plus la hauteur du DataGrid qui s'adapte en fonction du nombre de lignes à afficher mais la hauteurs de lignes qui varie. On peut ainsi se retrouver avec 2 lignes qui prennent toute la largeur du DataGrid qui affiche normalement 10 lignes.
La solution à ce problème est ultra simple (encore fallait-il trouver) il suffit juste de ne pas préciser la hauteur (height) du DataGrid !!!
Dans cet exemple nous allons ajouter une colonne de boutons : Dans le code de la page aspx :
<Columns>
<asp:TemplateColumn>
<HeaderStyle Width
=
"600px"
></HeaderStyle>
<ItemTemplate>
<asp:Button id
=
"Button1"
runat
=
"server"
Text
=
"NotreBouton"
></asp:Button>
</ItemTemplate>
</asp:TemplateColumn>
<Columns>
Dans le <itemTemplate> on peut mettre n'importe quel WebControl.
Il y a aussi la balise <EditItemTemplate> dans laquelle on met le WebControl affiché quand la cellule où se trouve le <iItemTemplate> est en mode édition.
Si vous possédez Visual Studio, il y a encore plus simple :
Allez dans le property builder du DataGrid => Columns, et changez une boundsColumns en template columns à l'aide d'un lien en bas de la fenêtre Ensuite du sortez du property builder, faites un click droit sur le DataGrid => edit template. Et la vous pouvez éditer la template column avec l'IDE en faisant du Drag & Drop.
La solution est assez simple. Il suffit de vérifier combien de données nous souhaitons afficher. Si le nombre de lignes est inférieur au nombre d'éléments à afficher par page, il ne reste qu'à interdire le paging, ce qui aura pour effet de cacher la ligne contenu le nombre de pages.
If
DataSet1.Tables
(
0
).Rows.Count
<=
dg.PageSize
Then
dg.AllowPaging
=
False
Else
dg.AllowPaging
=
True
End
If
Dans le code behind dans la méthode liée à l'évènement DataBinding:
e.Item.Cells
(
Colonne).Width
=
New
Unit
(
tailleEnPx)
où Colonne et tailleEnPx sont des entiers.
Il est possible de passer un argument à une fonction liée à l'événement OnClick d'un bouton.
Pour cela, il suffit d'utiliser la propriété CommandArgument. Cette propriété est
très utile principalement lorsque l'on souhaite mettre un bouton dans un Repeater,
un DataList ou un DataGrid.
<asp:Button runat
=
server CommandArgument
=
'
<%
# DataBinder.Eval
(
Container.DataItem
, "champ"
) %>
'
/>
Dans la fonction liée à l'événement:
Public
Sub
Delete
(
ByVal
sender As
Object
, ByVal
e As
System.EventArgs
)
Dim
bu As
Button =
CType
(
sender, Button)
Dim
argument As
String
=
bu.CommandArgument
End
Sub
Cela est certainement dû au fait que vous chargez les informations du DataGrid AVANT d'effectuer le changement de page.
Comment cela peut-il arriver? Tout simplement en effectuant un DataBind dans le Page_Load de la page.
Il suffit donc de faire:
Private
Sub
Page_Load
(
ByVal
sender As
Object
, ByVal
e As
System.EventArgs
)
If
Not
Me
.IsPostBack
Then
' Définition de la source à faire
dataGrid1.DataBind
End
If
End
Sub
Private
Sub
dtgFiltreIndicateurs_PageIndexChanged
(
ByVal
source As
Object
, ByVal
e As
System.Web.UI.WebControls.DataGridPageChangedEventArgs
)
' Définition de la source à faire
dataGrid1.CurrentPageIndex
=
e.NewPageIndex
dataGrid1.DataBind
End
Sub
Voici un petit exemple de code :
Dans la page .aspx :
<asp:DataGrid id
=
"MonDatagrid"
runat
=
"server"
AutoGenerateColumns
=
"False"
>
<Columns>
<asp:TemplateColumn HeaderText
=
"Colonne1"
>
<ItemTemplate>
<%
#Container.DataItem
(
"nomdemacolonne"
)%>
</ItemTemplate>
<EditItemTemplate>
<asp:Textbox runat
=
"server"
width
=
"600"
maxlength
=
"600"
/>
</EditItemTemplate>
</asp:TemplateColumn>
dans le code-behind
Private
Sub
MonDatagrid_PreRender
(
s As
Object
, e As
EventArgs)
If
MonDatagrid.EditItemIndex
>
-1
Then
Dim
matextbox As
TextBox
matextbox=
CType
(
MonDatagrid.Items
(
MonDatagrid.EditItemIndex
).Cells
(
0
).Controls
(
0
), TextBox)
matextbox.Width
=
Unit.Parse
(
"4cm"
)
'on peut biensur changer d'autre propriétées de la textbox d'édition des données ;-)
End
If
End
Sub
Dans cette exemple on va mettre un fond rouge à toutes les cellules de la 4ème ligne de "Mondatagrid", sachant qu'il comporte 4 colonnes :
Private
Sub
Mondatagrid_ItemDataBound
(
ByVal
sender As
Object
, ByVal
e As
_
System.Web.UI.WebControls.DataGridItemEventArgs
) Handles
Mondatagrid.ItemDataBound
If
Not
e.Item.ItemIndex
=
-1
Then
If
e.Item.ItemIndex
=
4
Then
e.Item.Cells
(
0
).BackColor
=
System.Drawing.Color.Red
e.Item.Cells
(
1
).BackColor
=
System.Drawing.Color.Red
e.Item.Cells
(
2
).BackColor
=
System.Drawing.Color.Red
e.Item.Cells
(
3
).BackColor
=
System.Drawing.Color.Red
End
If
End
If
End
Sub
En effet, beaucoup d'entre nous l'on remarqué, lorsque le datagrid a sa propriété AutoGenerateColumns à "true" le code :
Mondatagrid.columns
(
1
).visible
=
False
NE MARCHE PAS
En effet ce code ne marche que si votre datagrid est fait à base de templates columns.
Il existe cependant une astuce :
dans la page aspx :
<asp:DataGrid id
=
"Mondatagrid"
runat
=
"server"
AutoGenerateColumns
=
"True"
OnItemDataBound
=
"Mondatagrid_OnItemDataBound"
/>
dans le code-behind
Private
Sub
Mondatagrid_ItemDataBound
(
s As
Object
, e As
DatagridItemEventArgs)
e.Item.Cells
(
1
).Visible
=
False
End
Sub
La réponse est non.
Effectivement le ViewState est transféré lors de chaque aller/retour vers le serveur. Si le DataGrid contient beaucoup d'informations, le ViewState sera également très grand. On perdra ainsi deux fois du temps... Une fois pour envoyer les données du DataGrid, l'autre pour le viewState.
Pour éviter de recharger constamment le DataSet, il est possible de le sauvegarder dans une variable de session ou d'application (selon si il existe un DataGrid par utilisateur ou un pour toute l'application)
Le DataGrid ne se trouve pas dans un formulaire contenant un runat="server".
Le fait de le placer dans ce <form runat="server" id="form1">...</form> permet de générer le javascript nécessaire pour changer de page.
L'hyperlink ne le permet pas. Par contre, il est possible d'utiliser un ItemTemplate au lieu d'une HyperLinkColumn.
<ItemTemplate>
<a href
=
"page.aspx?param1=<%# DataBinder.Eval(Container.DataItem, "
Colonne1") %>¶m2=<%# DataBinder.Eval(Container.DataItem, "
Colonne2") %>"
/>
</ItemTemplate>
Le premier paramètre comprendra ainsi le contenu de la colonne1, le second contenant celui de la colonne2 et ce pour chaque ligne de la source de données.
Bien que le DataGrid.DataSource accepte toute liste qui propose un énumérateur, il ne sait cependant pas toujours comment récupérer les informations de cette liste.
Dans le cadre d'une HashTable, il est ainsi nécessaire de passer par un ItemTemplate et de spécifier la valeur "false" à l'attribut AutoGenerateColumns:
<asp:
DataGrid AutoGenerateColumns
=
False id
=
"datagrid"
runat
=
"server"
>
<Columns>
<asp:
TemplateColumn>
<ItemTemplate>
Clé: <%# Container.DataItem.Key %>, Valeur: <%# Container.DataItem.Value %>
</ItemTemplate>
</asp
:
TemplateColumn>
</Columns>
</asp
:
DataGrid>
Public Sub AttacherJavaScript
(
ByVal e As System.
Web.
UI.
WebControls.
DataGridItemEventArgs)
If e.
Item.
ItemType =
ListItemType.
Header Then
' Conteneur temporaire
Dim Img0 As HtmlImage
' Recuperation du contrôle et ajout d'
un attribut contenant du javascript
monCtrl =
DirectCast
(
e.
Item.
FindControl
(
"controleHTML"
),
System.
Web.
UI.
HtmlControls.
HtmlImage)
Img0.
Attributes.
Add
(
"onclick"
,
"maFonction(alert('Le Javascript est passé'););"
)
End If
End Sub
(Merci à Johan Coffigniez pour sa participation)