how to expand collapsible gridview all records in c#

Reply

mamidi234

Member

6 Points

17 Posts

how to expand collapsible gridview all records in c#

Nov 16, 2017 06:43 AM|mamidi234|LINK

Hi team,

Here I am using collapsible GridView to display all student details and their details I want to expand all records at a time by using button or check box

if any solution or links suggest me ASAP.

Thanks in advance

Reply

Rohit Rao

Participant

1627 Points

457 Posts

Re: how to expand collapsible gridview all records in c#

Nov 16, 2017 07:58 AM|Rohit Rao|LINK

Hope it will help you :

http://www.aspforums.net/Threads/142438/Expand-Collapse-All-Child-Nested-GridViews-from-GridView-Header-in-ASPNet/

Don't forget to Mark As Answer if it helps you.

Reply

zxj

Participant

980 Points

475 Posts

Re: how to expand collapsible gridview all records in c#

Nov 16, 2017 08:04 AM|zxj|LINK

Hi Mamidi234,

mamidi234

Hi team,

Here I am using collapsible GridView to display all student details and their details I want to expand all records at a time by using button or check box

if any solution or links suggest me ASAP.

Thanks in advance

According to your needs, I write an example, you can refer to it.

Class

 public class Customers
    {
        public int CustomerId { get; set; }
        public string ContactName { get; set; }
        public string City { get; set; }
    }

    public class Orders
    {
        public int CustomerId { get; set; }
        public int OrderId { get; set; }
        public DateTime OrderDate { get; set; }
    }

Html markup

<html xmlns="http://www.w3.org/1999/xhtml">
<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 type="text/javascript">
        $("[src*=mK8Zz9S]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "https://i.imgur.com/v7OXaue.png");
        });
        $("[src*=v7OXaue]").live("click", function () {
            $(this).attr("src", "https://i.imgur.com/mK8Zz9S.png");
            $(this).closest("tr").next().remove();
        });
        $(".expand").live("click", function () {
            $("[src*=mK8Zz9S]").trigger("click");
        })
        $(".close").live("click", function () {
            $("[src*=v7OXaue]").trigger("click");
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" class="expand" value="Expand All" />
            <input type="button" class="close" value="Close All" />
            
            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <img alt="" style="cursor: pointer" class="plus" src="https://i.imgur.com/mK8Zz9S.png" />
                            <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
                                    <Columns>
                                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
                                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
                                    </Columns>
                                </asp:GridView>
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Code behind

private List<Customers> customers;

        public List<Customers> Customers
        {
            get
            {
                customers = new List<Customers>
            {
                new Customers {CustomerId=1,ContactName="Maria Anders",City="Berlin" },
                new Customers {CustomerId=2,ContactName="Ana Trujillo",City="México D.F." },
                new Customers {CustomerId=3,ContactName="Thomas Hardy",City="London" }
            };
                return customers;
            }
        }


        private List<Orders> orders;

        public List<Orders> Orders
        {
            get
            {
                orders = new List<Orders>
                {
                    new Orders{ CustomerId=1, OrderId=10643, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=1, OrderId=10692, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=1, OrderId=10702, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=2, OrderId=10308, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=2, OrderId=10625, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=2, OrderId=10759, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=3, OrderId=10355, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=3, OrderId=10383, OrderDate=new DateTime(2017,12,25)},
                    new Orders{ CustomerId=3, OrderId=10453, OrderDate=new DateTime(2017,12,25)},
                };
                return orders;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                gvCustomers.DataSource = Customers;
                gvCustomers.DataBind();
            }
        }

  
        protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                string customerId = gvCustomers.DataKeys[e.Row.RowIndex].Value.ToString();
                GridView gvOrders = e.Row.FindControl("gvOrders") as GridView;
                gvOrders.DataSource = Orders.Where(x => x.CustomerId == Convert.ToInt32(customerId)).ToList();
                gvOrders.DataBind();
            }
        }

Regards,

zxj

Reply

mamidi234

Member

6 Points

17 Posts

Re: how to expand collapsible gridview all records in c#

Nov 21, 2017 12:42 PM|mamidi234|LINK

Hi,

Thank you for replying to my answer .But I getting an Issuse that ,whenever i am clicking on ExpandAll button ,All the data in grid view is expanding only for a second and again its collapsing back.Im not understanding why its collpsing back without clicking on close All button .Please Reply as soon as possible .

Thanks in Advance.

Regards

Mamidi

Reply

zxj

Participant

980 Points

475 Posts

Re: how to expand collapsible gridview all records in c#

Nov 22, 2017 01:24 AM|zxj|LINK

Hi Mamidi,

mamidi234
But I getting an Issuse that ,whenever i am clicking on ExpandAll button ,All the data in grid view is expanding only for a second and again its collapsing back.Im not understanding why its collpsing back without clicking on close All button .Please Reply as soon as possible .

I suppose there might be a problem with the script.

Can you show related code?

Regards,

zxj

Reply

mamidi234

Member

6 Points

17 Posts

Re: how to expand collapsible gridview all records in c#

Nov 23, 2017 08:12 AM|mamidi234|LINK

Hi,

Here My code is

Reply

zxj

Participant

980 Points

475 Posts

Re: how to expand collapsible gridview all records in c#

Nov 23, 2017 09:29 AM|zxj|LINK

Hi Mamidi,

I have tried the code, performed normally, currently unable to reproduce your problem, you can also compare the code to see if there are inconsistencies.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<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 type="text/javascript">

        $("[src*=plus]").live("click", function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
            $(this).attr("src", "../images/minus.jpg");
        });
        $("[src*=minus]").live("click", function () {
            $(this).attr("src", "../images/plus.jpg");
            $(this).closest("tr").next().remove();
        });
        $(".expand").live("click", function () {
            $("[src*=plus]").trigger("click");
        })
        $(".close").live("click", function () {
            $("[src*=minus]").trigger("click");
        })

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <input type="button" class="expand" value="Expand All" />
            <input type="button" class="close" value="Close All" />

            <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" CssClass="Grid"
                DataKeyNames="CustomerID" OnRowDataBound="OnRowDataBound">
                <Columns>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <img alt="" style="cursor: pointer" class="plus" src="images/plus.jpg" />
                            <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                                <asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="false" CssClass="ChildGrid">
                                    <Columns>
                                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderId" HeaderText="Order Id" />
                                        <asp:BoundField ItemStyle-Width="150px" DataField="OrderDate" HeaderText="Date" />
                                    </Columns>
                                </asp:GridView>
                            </asp:Panel>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField ItemStyle-Width="150px" DataField="ContactName" HeaderText="Contact Name" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" />
                </Columns>
            </asp:GridView>
        </div>
    </form>
</body>
</html>

Regards,

zxj

Reply

mamidi234

Member

6 Points

17 Posts

Re: how to expand collapsible gridview all records in c#

Nov 23, 2017 10:13 AM|mamidi234|LINK

Hi ,

Thank you for your reply .I solved that Issue ,but Im again getting an Issue that Whenever Iam clicking on expand All -all the data in the grid view is expanding and when i click on close All it works fine .but again when i click on expand its not expanding .If you have any Idea please help me out .

Thank you in Advance

Mamidi

Reply

mamidi234

Member

6 Points

17 Posts

Re: how to expand collapsible gridview all records in c#

Nov 23, 2017 11:30 AM|mamidi234|LINK

Hi ,

I got another Issue that whenever i click on (-) or (+) symbol it works fine for the first time ,but if i click again then it is removing the particular row from the grid view .I am trying to write the script in a function and calling it through onclick method .But the function is not working .Can you suggest me .

Thank you

how to expand collapsible gridview all records in c# [Answered]RSS

8 replies

Shortcuts

Related Links

how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#

mamidi234

Re: how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#

mamidi234

Re: how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#

Re: how to expand collapsible gridview all records in c#