Sélection multiple dans un griedview

Version imprimable

Bonjour,

J'ai un contrôle griedview composé de plusieurs colonnes de données.
J'ai aussi inséré une première colonnes composée de checkbox.
Par contre, je ne sais pas comment intégrer une checkbox dans l'entête qui permettrait de sélectionner où de désélectionner en une seule fois l'ensemble des checkbox de toutes mes lignes.

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
 <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
           AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Code" 
           DataSourceID="SqlDataSource1" BorderColor="#94979A" CellPadding="10" BackColor="#ECEBEF"  HeaderStyle-BackColor="#6A97D0" AlternatingRowStyle-BackColor="#D2DBE6" HeaderStyle-ForeColor="White">
           <Columns>
 
               <asp:TemplateField>
             <ItemTemplate>
                  <asp:CheckBox ID="CheckBox1" runat="server" />
             </ItemTemplate>
               </asp:TemplateField>
 
               <asp:BoundField DataField="Code" HeaderText="Code" ReadOnly="True" 
                   SortExpression="Code"  />
               <asp:BoundField DataField="Statut" HeaderText="Statut" 
                   SortExpression="Statut" />
               <asp:BoundField DataField="Responsable" HeaderText="Responsable" 
                   SortExpression="Responsable" />
               <asp:BoundField DataField="Libellé" HeaderText="Libellé" 
                   SortExpression="Libellé" />
               <asp:BoundField DataField="Date de réclamation" 
                   HeaderText="Date de réclamation" SortExpression="Date de réclamation" />
 
 
           </Columns>
       </asp:GridView>

Est-ce que quelqu'un pourrait me dire comment faire ?

Merci.

Bonjour,

Essaye ceci :

Code:

1
2
3
4
5
6
7
8
<asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:CheckBox ID="chkBox" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:CheckBox ID="cbSelectAll" runat="server" Text="Check All" />
                </HeaderTemplate>
    </asp:TemplateField>

et ceci :

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
<script type="text/javascript">
     function SelectAll(id) {
         //get reference of GridView control
         var grid = document.getElementById("<%= TaGridView.ClientID %>");
         //variable to contain the cell of the grid
         var cell;
 
         if (grid.rows.length > 0) {
             //loop starts from 1. rows[0] points to the header.
             for (i = 1; i < grid.rows.length; i++) {
                 //get the reference of first column
                 cell = grid.rows[i].cells[12];
 
                 //loop according to the number of childNodes in the cell
                 for (j = 0; j < cell.childNodes.length; j++) {
                     //if childNode type is CheckBox                 
                     if (cell.childNodes[j].type == "checkbox") {
                         //assign the status of the Select All checkbox to the cell checkbox within the grid
                         cell.childNodes[j].checked = document.getElementById(id).checked;
                     }
                 }
             }
         }
     }
 </script>

Et encore ceci :

Code:

1
2
3
4
5
6
7
8
9
protected void TaGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                //Find the checkbox control in header and add an attribute
                ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" +
                        ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
            }
}

Un solution parmi tant d'autres.

En espérant t'avoir aidé.

09/06/2010, 10h23
stefsas

Ok mais ta fonction TaGridView_RowDataBound, tu l'appelle quelque part car je l'ai placé en code behind et cela ne produit effet ?
09/06/2010, 10h45
Nicolas Esprit

Et bien tu utilises l'event OnRowDataBound de ta GridView.... :aie:

Code:

OnRowDataBound="TaGridViewLaTiennePasLaMienne_RowDataBound"

:roll:
09/06/2010, 11h11
stefsas

Par contre, je me demandais à quoi correspondait ton ClientID dans

Citation:

var grid = document.getElementById("<%= TaGridView.ClientID %>");

et

Citation:

((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");

car j'ai une erreur de la part d'une déboggeur d'IE qui me dit :

Citation:

'childNodes' a la valeur Null ou n'est pas un objet

J'ai essayé de le remplacer par "Code" mais problème.

Est-ce que tu sais d'où vient le problème ? Merci.
09/06/2010, 11h33
Nicolas Esprit

Dis voir, tu as quand même bien lu ceci dans mon précédent message :

Code:

TaGridViewLaTiennePasLaMienne

?? :roll:

Non en fait, j'ai bien fait attention à ça mais j'ai toujours ce message d'erreur.

Je te met mon code :

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
<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound" AllowPaging="False" 
           AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="Code" 
           DataSourceID="SqlDataSource1" BorderColor="#94979A" CellPadding="10" BackColor="#ECEBEF"  HeaderStyle-BackColor="#6A97D0" AlternatingRowStyle-BackColor="#D2DBE6" HeaderStyle-ForeColor="White">
           <Columns>
 
               <asp:TemplateField ShowHeader="False">
                <ItemTemplate>
                    <asp:CheckBox ID="chkBox" runat="server" />
                </ItemTemplate>
                <HeaderTemplate>
                    <asp:CheckBox ID="cbSelectAll" runat="server" Text="" />
                </HeaderTemplate>
    </asp:TemplateField>
 
               <asp:hyperlinkfield datatextfield="Code" 
            datatextformatstring="{0:c}" datanavigateurlfields="Code" datanavigateurlformatstring="~\DetectionDetection.aspx?Code={0}" headertext="Code" target="_self" SortExpression="Code"/>
               <asp:BoundField DataField="Statut" HeaderText="Statut" 
                   SortExpression="Statut" />
               <asp:BoundField DataField="Responsable" HeaderText="Responsable" 
                   SortExpression="Responsable" />
               <asp:BoundField DataField="Libellé" HeaderText="Libellé" 
                   SortExpression="Libellé" />
               <asp:BoundField DataField="Date de réclamation" 
                   HeaderText="Date de réclamation" SortExpression="Date de réclamation" />
 
           </Columns>
       </asp:GridView>

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
      <script type="text/javascript">
     function SelectAll(id) {
         //get reference of GridView control
         var grid = document.getElementById("<%= GridView1.ClientID %>");
         //variable to contain the cell of the grid
         var cell;
 
         if (grid.rows.length > 0) {
             //loop starts from 1. rows[0] points to the header.
             for (i = 1; i < grid.rows.length; i++) {
                 //get the reference of first column
                 cell = grid.rows[i].cells[12];
 
                 //loop according to the number of childNodes in the cell
                 for (j = 0; j < cell.childNodes.length; j++) {
                     //if childNode type is CheckBox                 
                     if (cell.childNodes[j].type == "checkbox") {
                         //assign the status of the Select All checkbox to the cell checkbox within the grid
                         cell.childNodes[j].checked = document.getElementById(id).checked;
                     }
                 }
             }
         }
     }
 </script>

Code behind :

Code:

1
2
3
4
5
6
7
8
9
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                //Find the checkbox control in header and add an attribute
                ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" +
                        ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");
            }
        }

09/06/2010, 13h25
Nicolas Esprit

En effet, il y a un problème à cet endroit :

Code:

cell = grid.rows[i].cells[12];

La Checkbox était dans la douzième colonne de ma GridView. Pour ton cas ce sera 0 à la place de 12. On pourrait optimiser un peu ce code, genre lors du PageLoad de ta Page, faire un RegisterScriptBlock en insérant dynamiquement l'id de la colonne. Ou tout bêtement, utiliser une variable JavaScript globale qui contient l'id en question...

Enfin bref, la morale du jour : "ne pas copier-coller bêtement un bout de code" :mrgreen:

Dis moi si c'est ok maintenant.
09/06/2010, 17h06
stefsas

Oui, c'est bien cela. Ca marche maintenant, merci pour ton aide.

Je reviens sur ce topic car j'ai voulu réaliser une modif sur le code :
Je voudrais mettre en paramètre de la fonction javascript le nom du tableau :
Code:

1 2 3 4 5 function SelectAllDestinataires(id,Tableau) { //get reference of GridView control var grid = document.getElementById("<%= Tableau.ClientID %>");... }
Et donc le réutiliser dans le code behind :
Code:

1 2 3 4 5 6 7 8 9 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.Header) { //Find the checkbox control in header and add an attribute ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "',MonGridView)"); } }
Cependant, j'ai un message me disant que la variable Tableau n'est pas connu.
Est-ce que quelqu'un verrait le problème ?

Merci.

25/06/2010, 10h56
Nicolas Esprit

Bonjour,

C'est un peu normal que ça ne fonctionne pas :

Code:

function SelectAllDestinataires(id,Tableau)

Ici Tableau est un siéple paramètre d'une fonction Javascript.

Code:

var grid = document.getElementById("<%= Tableau.ClientID %>");...

Ici, on est dans de l'ASP.NET avec les balises <% %>, donc Tableau est sensé être un control server déclaré.

Tu devrais plûtôt faire :

Code:

var grid = document.getElementById("<%= GridView1.ClientID %>");...

En espérant t'avoir aidé.
25/06/2010, 14h13
stefsas

Ok d'accord. Je repose ma question :

Comment je peux faire alors pour pouvoir mettre mon id de gridview en argument de sorte à que je puisse réutiliser la fonction sur plusieurs gridview différents ?

Merci.
25/06/2010, 15h11
Nicolas Esprit

Tu peux faire comme ceci :

Code:

...((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "," + GridView1.ClientID )");

Il faut peut être ajouter une simple quote avant et après GridView1.ClientID