How do i add footertemplate to gridview with option for expand and collapse datarows?C#/ASP.NET

Question

Hi i want to make a footertemplate which can expand and collapse results like this image example in other topic: How do I add FooterTemplate to GridView with BoundFields

I want for default show 1 result, and after clicking in a icon on footertemplate show me more results like 4 or 5, i can show the code, thanks in advance.

Answer 1

The same work i have done on my project! I am pasting that work here. Please go through it, it might help you solving your problem
ASPX:

<asp:GridView Width="100%" border="1" ID="gwProfit" RowStyle-Wrap="true" runat="server" AutoGenerateColumns="false" AlternatingRowStyle-CssClass="alternaterow" RowStyle-VerticalAlign="Bottom" ShowFooter="True" HeaderStyle-Wrap="true" OnRowCommand="gwProfit_RowCommand" OnRowDataBound="gwProfit_RowDataBound">
    <Columns>
    <asp:TemplateField HeaderText="Start Date">
    <ItemTemplate>
    <div class="input-append">
    <asp:TextBox class="input_disabled" ID="txtStartDate" runat="server" Width="110px"  Height="22px" Text='<%# Bind("StartDate","{0}") %>'>
    </asp:TextBox>
     <button class="btn123" ID="ImgStartDate" runat="server" type="button" style="height:25px;">
     <i class="icon-calendar"></i>
     </button>
     </div>
           <ajaxToolkit:CalendarExtender ID="StartDate" runat="server" TargetControlID="txtStartDate" PopupButtonID="ImgStartDate" Format="dd-MMM-yyyy">
            </ajaxToolkit:CalendarExtender>
             </ItemTemplate>
             <FooterTemplate>
            <asp:TextBox class="input_disabled" ID="txtNewStartDate" runat="server" Width="110px"  Height="22px">
            </asp:TextBox>
            <button class="btn123" ID="ImgStartDate" runat="server" type="button" style="height:25px;">
            <i class="icon-calendar"></i>
            </button>
            </div>

            <ajaxToolkit:CalendarExtender ID="StartDate" runat="server" TargetControlID="txtNewStartDate" 
            PopupButtonID="ImgStartDate" Format="dd-MMM-yyyy">
            </ajaxToolkit:CalendarExtender>
            </FooterTemplate>
           </asp:TemplateField>

         <asp:TemplateField HeaderText="End Date">
         <ItemTemplate> 
                       <asp:TextBox class="input_disabled" ID="txtEndDate" runat="server" Width="110px"  Height="22px" Text='<%# Bind("EndDate","{0}") %>'>

                    </asp:TextBox>
                    <button class="btn123" ID="ImgEndDate" runat="server" type="button" style="height:25px;">
                    <i class="icon-calendar"></i>
                    </button>
                    <ajaxToolkit:CalendarExtender ID="EndDate" runat="server" TargetControlID="txtEndDate" 
                    PopupButtonID="ImgEndDate" Format="dd-MMM-yyyy">
                    </ajaxToolkit:CalendarExtender>                                  
        </ItemTemplate>
        <FooterTemplate>                       
         <asp:TextBox class="input_disabled" ID="txtNewEndDate" runat="server" Width="110px"  Height="22px">
                    </asp:TextBox>
                    <button class="btn123" ID="ImgEndDate" runat="server" type="button" style="height:25px;">
                    <i class="icon-calendar"></i>
                    </button>

                    <ajaxToolkit:CalendarExtender ID="EndDate" runat="server" TargetControlID="txtNewEndDate" 
                    PopupButtonID="ImgEndDate" Format="dd-MMM-yyyy">
                    </ajaxToolkit:CalendarExtender> 
        </FooterTemplate>
        </asp:TemplateField>

  <asp:TemplateField HeaderText="Profit Per Unit">
  <ItemTemplate>
<asp:TextBox class="input_disabled" ID="txtProfitPerUnit" Width="100px"  Height="22px" runat="server" Text='<%# Bind("ProfitPerUnit","{0}") %>'> </asp:TextBox>
  </ItemTemplate>
 <FooterTemplate>
 <asp:TextBox class="input_disabled" ID="txtNewProfitPerUnit" Width="100px" Height="22px" runat="server" Text="0"/>                
 </FooterTemplate>
 </asp:TemplateField>

  <asp:TemplateField HeaderText="Action" ControlStyle-Width="14px" FooterStyle-Width="14px">
   <ItemTemplate>
     <input type="hidden" id="txtrec_status" name="txtrec_status" runat="server"/>

<asp:ImageButton ID="btnDelete" runat="server" CommandName="Delete" ImageUrl="~/images/delete.gif" AlternateText="Delete" CommandArgument="<%# ((GridViewRow) Container).RowIndex%>" UseSubmitBehavior="False" />
      </ItemTemplate>
      <FooterTemplate>
       <asp:ImageButton ID="btnAdd" runat="server" CommandName="Add" ImageUrl="~/images/add.png" AlternateText="Add" UseSubmitBehavior="False"/>
        </FooterTemplate>
        </asp:TemplateField>
             </Columns>
             </asp:GridView>

CodeBehind:

protected void gwProfit_RowCommand(object sender, GridViewCommandEventArgs e)
    {
if (ViewState["dtStartDate"] != null)
             dtStartDate = (DataTable) ViewState["dtStartDate"];

        if (e.CommandName.Equals("Add"))
        {
            TextBox txtStartDate = (TextBox)gwProfit.FooterRow.FindControl("txtNewStartDate");
            TextBox txtEndDate = (TextBox)gwProfit.FooterRow.FindControl("txtNewEndDate");
            TextBox txtProfitPerUnit = (TextBox)gwProfit.FooterRow.FindControl("txtNewProfitPerUnit");
            if (txtEndDate.Text == "" || txtStartDate.Text == "" || txtProfitPerUnit.Text == "")
            {
                ScriptManager.RegisterStartupScript(this, GetType(), "alert", "alert('Please Select Start Date, End Date And Profit Per Unit.')", true);
            }
            else
            {
                dtStartDate.Rows.Add(dtStartDate.NewRow());
                dtStartDate.Rows[dtStartDate.Rows.Count - 1]["CurrencyDeatailID"] = -2;
                dtStartDate.Rows[dtStartDate.Rows.Count - 1]["StartDate"] = objFunc.toDate(txtStartDate.Text);
                dtStartDate.Rows[dtStartDate.Rows.Count - 1]["EndDate"] = objFunc.toDate(txtEndDate.Text);
                dtStartDate.Rows[dtStartDate.Rows.Count - 1]["ProfitPerUnit"] = objFunc.toDecimal(txtProfitPerUnit.Text);
                if (dtStartDate.Rows.Count >= 0&&dtStartDate.Rows[0]["CurrencyDeatailID"].ToString()=="-1")
                {
                    dtStartDate.Rows[0].Delete();
                    if (dtStartDate.Rows.Count > 0 && dtStartDate.Rows[0].RowState == DataRowState.Deleted)
                        dtStartDate.Rows.RemoveAt(0);

                }
                ViewState["dtStartDate"] = dtStartDate;
                Profit_LoadGrid();
            }
        }
        else if (e.CommandName.Equals("Delete"))
        {
            int index = objFunc.toInt(e.CommandArgument.ToString());
            GridViewRow gvr = (GridViewRow)(((ImageButton)e.CommandSource).NamingContainer);
            int RemoveAt = gvr.RowIndex;
            DataTable dt = new DataTable();
            dt = (DataTable)ViewState["dtStartDate"];
            dt.Rows.RemoveAt(RemoveAt);
            dt.AcceptChanges();
            ViewState["dtStartDate"] = dt;
            Profit_LoadGrid();
        }
    }

Answer 2

It would be easy

1. Activate "AllowPaging" in your GridView.
2. Make Paging row invisible.
3. In every click of an icon increase "PageSize" for expanding or click of another icon decrease "PageSize" for collapsing.