locked
Show/hide table columns on click RRS feed

  • Question

  • User2048883352 posted

    I must do the following table in ASP.net using a Gridview if it's possible https://ibb.co/iFG1fw 

    At first only some columns must be visible (in my example "Person details" and "Projects") and when i click on the table header to expand more columns. In my example, when i click on "Person details" the columns with "Age","Name","Location" must become visible and the same when clicking on "Project details".Another problem is that i must match the projects with some specific person and put a "X" if that person works at that project.

    All data from the table is taken from a SQL database.

    Who can help me with this ? A code example would be great, thanks in advance !

    Wednesday, November 15, 2017 6:06 AM

Answers

  • User-1838255255 posted

    Hi ThinkClear,

    According to your needs, i make a sample that use datatable to simulate database data, please check the following sample code:

    Sample Code:

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function () {
                var rows = $("#GridView1 tr").length;
                for (var i = 0; i < rows; i++) {
                    $("[id*=GridView1] th").eq(2).css("display", "none")
                    $("[id*=GridView1] th").eq(3).css("display", "none")
                    $("[id*=GridView1] th").eq(4).css("display", "none")
                    $("[id*=GridView1] th").eq(5).css("display", "none")
                    $("[id*=GridView1] th").eq(6).css("display", "none")
                    $("[id*=GridView1] th").eq(7).css("display", "none")
                    $("[id*=GridView1] th").eq(8).css("display", "none")
                    $("[id*=GridView1] th").eq(9).css("display", "none")
    
                    $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "none")
                }
                $("#GridView1 tr").first().find("th").eq(0).click(function () {
                    for (var i = 0; i < rows; i++) {
                        $("[id*=GridView1] th").eq(2).css("display", "")
                        $("[id*=GridView1] th").eq(3).css("display", "")
                        $("[id*=GridView1] th").eq(4).css("display", "")
                        $("[id*=GridView1] th").eq(5).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "")
                    }
                });
                $("#GridView1 tr").first().find("th").eq(1).click(function () {
                    for (var i = 0; i < rows; i++) {
                        $("[id*=GridView1] th").eq(6).css("display", "")
                        $("[id*=GridView1] th").eq(7).css("display", "")
                        $("[id*=GridView1] th").eq(8).css("display", "")
                        $("[id*=GridView1] th").eq(9).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "")
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" HeaderStyle-BackColor="Gray" HeaderStyle-ForeColor="White"
                    runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="Person Details" HeaderText="Person Details" ItemStyle-Width="150" />
                        <asp:BoundField DataField="projects" HeaderText="projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PersonDetails" HeaderText="PersonDetails" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Age" HeaderText="Age" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Projects" HeaderText="Projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="X45Y" HeaderText="X45Y" ItemStyle-Width="150" />
                        <asp:BoundField DataField="D512" HeaderText="D512" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PFN34" HeaderText="PFN34" ItemStyle-Width="150" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[10] { new DataColumn("Person Details", typeof(string)),
                                new DataColumn("projects", typeof(string)),
                                new DataColumn("PersonDetails",typeof(string)),
                                new DataColumn("Name", typeof(string)),
                                new DataColumn("Age", typeof(string)),
                                new DataColumn("Location", typeof(string)),
                                new DataColumn("Projects", typeof(string)),
                                new DataColumn("X45Y", typeof(string)),
                                new DataColumn("D512", typeof(string)),
                                new DataColumn("PFN34", typeof(string)),});
                    dt.Rows.Add("", "", "", "Goerge", "12", "SUA", "", "", "X", "");
                    dt.Rows.Add("", "", "", "Alex", "45", "Mexic", "", "X", "", "");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 16, 2017 12:04 PM

All replies

  • User-1838255255 posted

    Hi ThinkClear,

    According to your needs, i make a sample that use datatable to simulate database data, please check the following sample code:

    Sample Code:

    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function () {
                var rows = $("#GridView1 tr").length;
                for (var i = 0; i < rows; i++) {
                    $("[id*=GridView1] th").eq(2).css("display", "none")
                    $("[id*=GridView1] th").eq(3).css("display", "none")
                    $("[id*=GridView1] th").eq(4).css("display", "none")
                    $("[id*=GridView1] th").eq(5).css("display", "none")
                    $("[id*=GridView1] th").eq(6).css("display", "none")
                    $("[id*=GridView1] th").eq(7).css("display", "none")
                    $("[id*=GridView1] th").eq(8).css("display", "none")
                    $("[id*=GridView1] th").eq(9).css("display", "none")
    
                    $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "none")
                }
                $("#GridView1 tr").first().find("th").eq(0).click(function () {
                    for (var i = 0; i < rows; i++) {
                        $("[id*=GridView1] th").eq(2).css("display", "")
                        $("[id*=GridView1] th").eq(3).css("display", "")
                        $("[id*=GridView1] th").eq(4).css("display", "")
                        $("[id*=GridView1] th").eq(5).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "")
                    }
                });
                $("#GridView1 tr").first().find("th").eq(1).click(function () {
                    for (var i = 0; i < rows; i++) {
                        $("[id*=GridView1] th").eq(6).css("display", "")
                        $("[id*=GridView1] th").eq(7).css("display", "")
                        $("[id*=GridView1] th").eq(8).css("display", "")
                        $("[id*=GridView1] th").eq(9).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "")
                        $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "")
                    }
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" HeaderStyle-BackColor="Gray" HeaderStyle-ForeColor="White"
                    runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="Person Details" HeaderText="Person Details" ItemStyle-Width="150" />
                        <asp:BoundField DataField="projects" HeaderText="projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PersonDetails" HeaderText="PersonDetails" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Age" HeaderText="Age" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Projects" HeaderText="Projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="X45Y" HeaderText="X45Y" ItemStyle-Width="150" />
                        <asp:BoundField DataField="D512" HeaderText="D512" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PFN34" HeaderText="PFN34" ItemStyle-Width="150" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    
     protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[10] { new DataColumn("Person Details", typeof(string)),
                                new DataColumn("projects", typeof(string)),
                                new DataColumn("PersonDetails",typeof(string)),
                                new DataColumn("Name", typeof(string)),
                                new DataColumn("Age", typeof(string)),
                                new DataColumn("Location", typeof(string)),
                                new DataColumn("Projects", typeof(string)),
                                new DataColumn("X45Y", typeof(string)),
                                new DataColumn("D512", typeof(string)),
                                new DataColumn("PFN34", typeof(string)),});
                    dt.Rows.Add("", "", "", "Goerge", "12", "SUA", "", "", "X", "");
                    dt.Rows.Add("", "", "", "Alex", "45", "Mexic", "", "X", "", "");
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }

    Best Regards,

    Eric Du 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, November 16, 2017 12:04 PM
  • User2048883352 posted

    I managed to do the toggle for expand/collapse too.Thanks for help man !

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="proiect.aspx.cs" Inherits="WebApplication1.proiect" %>
    
    <!DOCTYPE html>
    
     
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script>
            $(function () {
                var rows = $("#GridView1 tr").length;
                for (var i = 0; i < rows; i++) {
                    $("[id*=GridView1] th").eq(2).css("display", "none")
                    $("[id*=GridView1] th").eq(3).css("display", "none")
                    $("[id*=GridView1] th").eq(4).css("display", "none")
                    $("[id*=GridView1] th").eq(5).css("display", "none")
                    $("[id*=GridView1] th").eq(6).css("display", "none")
                    $("[id*=GridView1] th").eq(7).css("display", "none")
                    $("[id*=GridView1] th").eq(8).css("display", "none")
                    $("[id*=GridView1] th").eq(9).css("display", "none")
    
                    $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "none")
                    $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "none")
                }
                
                $("#GridView1 tr").first().find("th").eq(0).click(function () {
                    var clicked = $(this).data('clicked');
                    if (clicked) {
                        for (var i = 0; i < rows; i++) {
                            $("[id*=GridView1] th").eq(2).css("display", "")
                            $("[id*=GridView1] th").eq(3).css("display", "")
                            $("[id*=GridView1] th").eq(4).css("display", "")
                            $("[id*=GridView1] th").eq(5).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "")
                        }
                    }
                    else {
                        for (var i = 0; i < rows; i++) {
                            $("[id*=GridView1] th").eq(2).css("display", "none")
                            $("[id*=GridView1] th").eq(3).css("display", "none")
                            $("[id*=GridView1] th").eq(4).css("display", "none")
                            $("[id*=GridView1] th").eq(5).css("display", "none")                       
    
                            $("[id*=GridView1] tr").eq(i).find("td").eq(2).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(3).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(4).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(5).css("display", "none")
                        }
                    }
                    $(this).data('clicked', !clicked);
                });
                $("#GridView1 tr").first().find("th").eq(1).click(function () {
                    var clicked = $(this).data('clicked');
                    if (clicked) {
                        for (var i = 0; i < rows; i++) {
                            $("[id*=GridView1] th").eq(6).css("display", "")
                            $("[id*=GridView1] th").eq(7).css("display", "")
                            $("[id*=GridView1] th").eq(8).css("display", "")
                            $("[id*=GridView1] th").eq(9).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "")
                        }
                    }
                    else {
                        for (var i = 0; i < rows; i++) {
                            $("[id*=GridView1] th").eq(6).css("display", "none")
                            $("[id*=GridView1] th").eq(7).css("display", "none")
                            $("[id*=GridView1] th").eq(8).css("display", "none")
                            $("[id*=GridView1] th").eq(9).css("display", "none")
    
                            $("[id*=GridView1] tr").eq(i).find("td").eq(6).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(7).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(8).css("display", "none")
                            $("[id*=GridView1] tr").eq(i).find("td").eq(9).css("display", "none")
                        }
                    }
                    $(this).data('clicked', !clicked);
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" HeaderStyle-BackColor="Gray" HeaderStyle-ForeColor="White"
                    runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="Person Details" HeaderText="Person Details" ItemStyle-Width="150" />
                        <asp:BoundField DataField="projects" HeaderText="projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PersonDetails" HeaderText="PersonDetails" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Age" HeaderText="Age" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
                        <asp:BoundField DataField="Projects" HeaderText="Projects" ItemStyle-Width="150" />
                        <asp:BoundField DataField="X45Y" HeaderText="X45Y" ItemStyle-Width="150" />
                        <asp:BoundField DataField="D512" HeaderText="D512" ItemStyle-Width="150" />
                        <asp:BoundField DataField="PFN34" HeaderText="PFN34" ItemStyle-Width="150" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    

    Tuesday, November 21, 2017 5:51 PM