Discussion :

[stefsas]

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 :

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

[Nicolas Esprit]

Bonjour,

Essaye ceci :

Code :

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

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 :

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

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

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

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

[Nicolas Esprit]

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

Code :

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

OnRowDataBound="TaGridViewLaTiennePasLaMienne_RowDataBound"

[stefsas]

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

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

et

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

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

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

[Nicolas Esprit]

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

Code :

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

TaGridViewLaTiennePasLaMienne

??

[stefsas]

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

Je te met mon code :

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

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

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

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 + "')");
            }
        }

[Nicolas Esprit]

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

Code :

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

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"

Dis moi si c'est ok maintenant.

[stefsas]

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

[stefsas]

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 :

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

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 :

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

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.

[Nicolas Esprit]

Bonjour,

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

Code :

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

function SelectAllDestinataires(id,Tableau)

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

Code :

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

 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 :

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

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

En espérant t'avoir aidé.

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

[Nicolas Esprit]

Tu peux faire comme ceci :

Code :

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

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

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