locked
how to expand collapsible gridview all records in c# RRS feed

  • Question

  • User743235712 posted

    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 

    Thursday, November 16, 2017 6:43 AM

Answers

  • User991499041 posted

    Hi 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

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

All replies

  • User991499041 posted

    Hi 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

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

    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

    Tuesday, November 21, 2017 12:42 PM
  • User991499041 posted

    Hi Mamidi,

    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

    Wednesday, November 22, 2017 1:24 AM
  • User743235712 posted

    Hi,

    Here My code is

    <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>

    Thursday, November 23, 2017 8:12 AM
  • User991499041 posted

    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

    Thursday, November 23, 2017 9:29 AM
  • User743235712 posted

    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

    Thursday, November 23, 2017 10:13 AM
  • User743235712 posted

    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

    Thursday, November 23, 2017 11:30 AM