none
Tout cocher/Tout décocher des Checkbox dans une gridView RRS feed

  • Question

  • Bonjour,

    Je suis en train de finaliser un affichage de données dans une GridView, et j'ai 2 colonnes indépendantes qui contiennent chacune des checkbox.
    J'aimerai ajouter 2 checkbox (respectivement pour les 2 colonnes) afin de faire un "Tout cocher" ou Tout décocher".

    Extrait de code

    <asp:TemplateField HeaderText="Valider" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:CheckBox ID="cbxValider" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="Rejeter" ItemStyle-HorizontalAlign="Center">
        <ItemTemplate>
            <asp:CheckBox ID="cbxRejeter" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>


    J'aimerai savoir s'il y a une astuce pour le faire!

    J'avais comme idée de faire un script javascript, mais dans le code source les noms sont sous la forme
    <input id="gvResultat_ctl05_cbxRejeter" type="checkbox" name="gvResultat$ctl05$cbxRejeter" />

    merki
    mardi 8 janvier 2008 10:58

Réponses

  • Merci, ce n'est pas exactement ce que je voulais, mais grace à cela, j'ai pu faire ce que j'avais en tete Big Smile

    j'avais trouvé une solution, mais en javascript c'est bien qu'aec des évènements clients/serveur!

    Je voulais cocher/décocher pas par ligne mais par colonne Big Smile


    ASPX

    Extrait de code

    <asp:TemplateField HeaderText="Valider" ItemStyle-HorizontalAlign="Center">
                                <HeaderTemplate>
                                    <asp:Label ID="lblValider" runat="server" Text="Label">Valider</asp:Label>
                                    <br />
                                    <asp:CheckBox ID="cbxInverser1" runat="server" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbxValider" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Rejeter" ItemStyle-HorizontalAlign="Center">
                                <HeaderTemplate>
                                    <asp:Label ID="lblRejeter" runat="server" Text="Label">Rejeter</asp:Label>
                                    <br />
                                    <asp:CheckBox ID="cbxInverser2" runat="server" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbxRejeter" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>

    <script type="text/javascript">
            function ToggleCheckBoxes(ids)
            {
                for (var i = 0 ; i < ids.length ; ++i)
                {
                    var cbx = document.getElementById(ids[i]);
                    if (cbx)
                    {
                        cbx.checked = !cbx.checked;
                    }
                }
            }
        </script>


    CS

    Extrait de code

    public List<string> idsValider, idsRejeter;

    protected void Page_Load(object sender, EventArgs e)
    {
            //initialisation des Listes
            this.idsValider = new List<string>();
            this.idsRejeter = new List<string>();
    }

    protected void gvResultat_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        Control ctrl = e.Row.FindControl("cbxValider");
            if (null != ctrl)
            {
                this.idsValider.Add("'" + ctrl.ClientID + "'");
            }

            ctrl = e.Row.FindControl("cbxRejeter");
            if (null != ctrl)
            {
                this.idsRejeter.Add("'" + ctrl.ClientID + "'");
            }
        }

    protected void gvResultat_PreRender(object sender, EventArgs e)
        {
            CheckBox cbx = this.gvResultat.HeaderRow.FindControl("cbxInverser1") as CheckBox;
            if (null != cbx)
            {
                cbx.Attributes["onclick"] = "ToggleCheckBoxes([" + string.Join(",", this.idsValider.ToArray()) + "]);";
            }

            cbx = this.gvResultat.HeaderRow.FindControl("cbxInverser2") as CheckBox;
            if (null != cbx)
            {
                cbx.Attributes["onclick"] = "ToggleCheckBoxes([" + string.Join(",", this.idsRejeter.ToArray()) + "]);";
            }
        }


    J'ai affecté le onclick dans la méthode PreRender(), je ne sais pas si c'est le plus adapter, mais ça marche Big Smile

    merki Guillaume

    mercredi 9 janvier 2008 08:27
  • Effectivement si vous voulez cocher/décocher par colonne, votre solution est celle que je vous aurais proposées. Et oui le méthode PreRender est effectivement l'endroit le plus adapté pour créer le javascript car normalement vous êtes sur d'avoir fait votre DataBind (et donc vos listes d'ids sont rempli)

     

    Par contre pensez à ajouter le code suivant dans la méthode gvResultat_RowDataBound :

     

    Extrait de code
    if (e.Row.RowType != DataControlRowType.DataRow)
    {
        return;
    }

     

     

    Cela permet de sortir de la méthode si vous n'êtes pas sur une ligne de données (ligne d'entête par exemple) et donc évitera 2 FindControl qui de toute manière renverons null.

     

    Même si dans votre cas cela ne pose pas de gros problème il m'est arrivé d'avoir des bugs car j'avais oublié de faire un test sur le type de ligne et j'essayais de mettre à jour de mauvaises lignes. Je vous recommande donc de toujours faire un test

     

    Guillaume

    mercredi 9 janvier 2008 08:40

Toutes les réponses

  • Bonjour,

    Voila un petit exemple utilisant du javascript pour faire ce que vous voulez :

     

    ASPX :

     

    Extrait de code


    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
        <Columns>
            <asp:TemplateField HeaderText="All">
                <ItemTemplate>
                    <asp:CheckBox ID="cbxAll" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="None">
                <ItemTemplate>
                    <asp:CheckBox ID="cbxNone" runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="cbx1" runat="server" Checked='<%# Bind("CHK1") %>' />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:CheckBox ID="cbx2" runat="server" Checked='<%# Bind("CHK2") %>' />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <script type="text/javascript">
        function ToggleCheckBoxes(ids, checked)
        {
            for (var i = 0 ; i < ids.length ; ++i)
            {
                var cbx = document.getElementById(ids[i]);
                if (cbx)
                {
                    cbx.checked = checked;
                }
            }
        }
    </script>

     

    CS :

     

    Extrait de code

    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("CHK1", typeof(bool));
        dt.Columns.Add("CHK2", typeof(bool));

        dt.Rows.Add(true, false);
        dt.Rows.Add(true, true);
        dt.Rows.Add(false, false);
        dt.Rows.Add(false, true);

        this.GridView1.RowDataBound += new GridViewRowEventHandler(GridView1_RowDataBound);
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
    }

    void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType != DataControlRowType.DataRow)
        {
            return;
        }

        List<string> ids = new List<string>();
        string js = "BLOCKED SCRIPTToggleCheckBoxes([";

        Control ctrl = e.Row.FindControl("cbx1");
        if (null != ctrl)
        {
            ids.Add("'" + ctrl.ClientID + "'");
        }

        ctrl = e.Row.FindControl("cbx2");
        if (null != ctrl)
        {
            ids.Add("'" + ctrl.ClientID + "'");
        }

        js += string.Join(",", ids.ToArray()) + "], ";

        CheckBox cbx = e.Row.FindControl("cbxAll") as CheckBox;
        if (null != cbx)
        {
            cbx.Attributes["onclick"] = js + " true);";
        }

        cbx = e.Row.FindControl("cbxNone") as CheckBox;
        if (null != cbx)
        {
            cbx.Attributes["onclick"] = js + " false);";
        }
    }

     

     

    Comme vous pouvez le voir dans l'exemple, vous pouvez utiliser la propriété ClientID pour récupérer sur un WebControl la valeur qui sera associé à l'attribut id en HTML ce qui vous permet d'utiliser des javascript. Vous avez aussi la propriété UniqueID qui elle correspond à l'attribut HTML name.

     

    Guillaume

    mardi 8 janvier 2008 19:08
  • Merci, ce n'est pas exactement ce que je voulais, mais grace à cela, j'ai pu faire ce que j'avais en tete Big Smile

    j'avais trouvé une solution, mais en javascript c'est bien qu'aec des évènements clients/serveur!

    Je voulais cocher/décocher pas par ligne mais par colonne Big Smile


    ASPX

    Extrait de code

    <asp:TemplateField HeaderText="Valider" ItemStyle-HorizontalAlign="Center">
                                <HeaderTemplate>
                                    <asp:Label ID="lblValider" runat="server" Text="Label">Valider</asp:Label>
                                    <br />
                                    <asp:CheckBox ID="cbxInverser1" runat="server" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbxValider" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Rejeter" ItemStyle-HorizontalAlign="Center">
                                <HeaderTemplate>
                                    <asp:Label ID="lblRejeter" runat="server" Text="Label">Rejeter</asp:Label>
                                    <br />
                                    <asp:CheckBox ID="cbxInverser2" runat="server" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="cbxRejeter" runat="server" />
                                </ItemTemplate>
                            </asp:TemplateField>

    <script type="text/javascript">
            function ToggleCheckBoxes(ids)
            {
                for (var i = 0 ; i < ids.length ; ++i)
                {
                    var cbx = document.getElementById(ids[i]);
                    if (cbx)
                    {
                        cbx.checked = !cbx.checked;
                    }
                }
            }
        </script>


    CS

    Extrait de code

    public List<string> idsValider, idsRejeter;

    protected void Page_Load(object sender, EventArgs e)
    {
            //initialisation des Listes
            this.idsValider = new List<string>();
            this.idsRejeter = new List<string>();
    }

    protected void gvResultat_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        Control ctrl = e.Row.FindControl("cbxValider");
            if (null != ctrl)
            {
                this.idsValider.Add("'" + ctrl.ClientID + "'");
            }

            ctrl = e.Row.FindControl("cbxRejeter");
            if (null != ctrl)
            {
                this.idsRejeter.Add("'" + ctrl.ClientID + "'");
            }
        }

    protected void gvResultat_PreRender(object sender, EventArgs e)
        {
            CheckBox cbx = this.gvResultat.HeaderRow.FindControl("cbxInverser1") as CheckBox;
            if (null != cbx)
            {
                cbx.Attributes["onclick"] = "ToggleCheckBoxes([" + string.Join(",", this.idsValider.ToArray()) + "]);";
            }

            cbx = this.gvResultat.HeaderRow.FindControl("cbxInverser2") as CheckBox;
            if (null != cbx)
            {
                cbx.Attributes["onclick"] = "ToggleCheckBoxes([" + string.Join(",", this.idsRejeter.ToArray()) + "]);";
            }
        }


    J'ai affecté le onclick dans la méthode PreRender(), je ne sais pas si c'est le plus adapter, mais ça marche Big Smile

    merki Guillaume

    mercredi 9 janvier 2008 08:27
  • Effectivement si vous voulez cocher/décocher par colonne, votre solution est celle que je vous aurais proposées. Et oui le méthode PreRender est effectivement l'endroit le plus adapté pour créer le javascript car normalement vous êtes sur d'avoir fait votre DataBind (et donc vos listes d'ids sont rempli)

     

    Par contre pensez à ajouter le code suivant dans la méthode gvResultat_RowDataBound :

     

    Extrait de code
    if (e.Row.RowType != DataControlRowType.DataRow)
    {
        return;
    }

     

     

    Cela permet de sortir de la méthode si vous n'êtes pas sur une ligne de données (ligne d'entête par exemple) et donc évitera 2 FindControl qui de toute manière renverons null.

     

    Même si dans votre cas cela ne pose pas de gros problème il m'est arrivé d'avoir des bugs car j'avais oublié de faire un test sur le type de ligne et j'essayais de mettre à jour de mauvaises lignes. Je vous recommande donc de toujours faire un test

     

    Guillaume

    mercredi 9 janvier 2008 08:40
  • Oui, j'ai juste oublié de le mettre dans ma réponse Wink

    j'ai une grande méthode gvResultat_RowDataBound Wink

    merki
    mercredi 9 janvier 2008 08:55