locked
How to I hide and show my gridview using checkbox? RRS feed

  • Question

  • User-1891900014 posted

    Hi, im new to C# programming just want to know how do i hide or show my gridview using checkbox. New to programming . please kindly help me. thank you

    Wednesday, April 25, 2018 2:17 AM

All replies

  • User-1716253493 posted
            <asp:CheckBox ID="CheckBox1" runat="server" Checked="true" 
                AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged"/>
            <asp:GridView ID="MyGridView" runat="server"></asp:GridView>
        protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
        {
            MyGridView.Visible = CheckBox1.Checked;
        }

    Wednesday, April 25, 2018 2:36 AM
  • User-1891900014 posted

    hi. how do i do it so that only the gridview gets updated and no postback ? without using update panel

    Wednesday, April 25, 2018 2:42 AM
  • User-1716253493 posted

    jquery

            <asp:CheckBox ID="CheckBox1" runat="server" Checked="true" ClientIDMode="Predictable" />
            <script>
                $(function () {
                    $("#CheckBox1").click(function () {
                        if ($(this).is(":checked")) {
                            $("#divGrid").show();
                        } else {
                            $("#divGrid").hide();
                        }
                    });
                });
            </script>

    Wednesday, April 25, 2018 3:31 AM
  • User-1891900014 posted

    thanks for the help really appreciate it . do u mind providing me the whole code? 

    Wednesday, April 25, 2018 3:38 AM
  • User36583972 posted

    Hi JayRayJay,

    In order to avoid page refresh, The ASP.NET UpdatePanel contorl is a suitable way to do it. You can refer the following sample.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
    
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:CheckBox ID="CheckBox1" runat="server" Checked="true"
                            AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" Text="Show/hide" />
                        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                                <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
    
    
            </div>
        </form>
    </body>
    </html>

    Beside, if you don't want us the ASP.NET UpdatePanel contorl. You can use the following script code.

    HTML:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <script>
            $(function () {
                $("#CheckBox1").change(function () {
                    if ($(this).is(":checked")) {
                        $("#GridView1").show();
                    } else {
                        $("#GridView1").hide();
                    }
                });
            });
    
        </script>
    
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:CheckBox ID="CheckBox1" runat="server" Checked="true"
                   Text="Show/hide" />
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
                    </Columns>
                </asp:GridView>
    
            </div>
        </form>
    </body>
    </html>

    Code behind:

    public partial class GridviewShowHide : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
                    dt.Rows.Add(1, "John Hammond", "United States");
                    dt.Rows.Add(2, "Mudassar Khan", "India");
                    dt.Rows.Add(3, "Suzanne Mathews", "France");
                    dt.Rows.Add(4, "Robert Schidner", "Russia");
                    dt.Rows.Add(3, "Suzanne Mathews", "France");
                    dt.Rows.Add(4, "Robert Schidner", "Russia"); 
                    ViewState["dt"] = dt;
                    this.BindGrid();
                }
            }
    
            protected void BindGrid()
            {
                GridView1.DataSource = ViewState["dt"] as DataTable;
                GridView1.DataBind();
            }
    
            protected void CheckBox1_CheckedChanged(object sender, EventArgs e)
            {
                GridView1.Visible = CheckBox1.Checked;
            }
        }

    Best Regards,

    Yong Lu

    Thursday, April 26, 2018 10:13 AM