Remove From My Forums

Show/hide table columns on click

Question
0

Sign in to vote

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

Answered by:

Show/hide table columns on click

Question

Answers

All replies