Expand and Collapse in gridview by clicking on Hyperlink(Not plus and Minus Symbols)

Can anybody help me on writing code for Expanding and Collapse in Gridview by clicking on Hyperlink. we have a grid with multiple columns. and we have one coloumn in the middle of Grid and that entire column is a Hyperlink. means numbers with hyperlink. I want to write code for Expand and Collapse for that column. In middle we cannot keep any symbols like Minus and Plus.

<asp:GridView ID="grdrequisitions" runat="server"
    AutoGenerateColumns="false" AllowPaging="True" OnPageIndexChanging="grdrequisitions_PageIndexChanging"
    OnRowCommand="grdrequisitions_RowCommand"
    CssClass="table table-hover table-bordered table-striped table-page new-table" ShowHeaderWhenEmpty="True" PageSize="15" EmptyDataText="No records found" class="WordWrap">
    <Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:CheckBox ID="chkRow" runat="server" AutoPostBack="True" OnCheckedChanged="ChkSelectChanged" onclick="CheckBoxCheck(this);" />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="WorkforcePlanStatus" HeaderText="Status" />  <%--1--%>
    <asp:BoundField DataField="WorkforcePlanID" HeaderText="WFP ID" HtmlEncode="false" />  <%--2--%>
    <asp:BoundField DataField="CRMOpportunityCode" HeaderText="O2R ID" />   <%--3--%>
    <asp:BoundField DataField="DeliveryUnit" HeaderText="Delivery Unit" /> <%--4--%>
    <asp:BoundField DataField="CustomerAccount" HeaderText="Account" /> <%--5--%>
    <asp:TemplateField HeaderText="# Openings"> <%--6--%>

    <ItemTemplate>
       <asp:LinkButton ID="lnkTotalHeadCount" Style="color: #0000b3;"
           runat="server"
           CausesValidation="false"
           CommandName="TotalHeadCount"
           Text='<%# Eval("TotalHeadCount") %>'
           CommandArgument='<%# Eval("WorkforcePlanID") %>'
           EnableTheming="False">                                                   
     </asp:LinkButton>
     </ItemTemplate>
     </asp:TemplateField>

here is the code. I have to write code for Expand and Collapse for ID="lnkTotalHeadCount". Please help me

1 answer

  • answered 2018-05-16 08:27 giri-webdev

    Try the below codes. Hopefully, It will answer your question.

    <asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    
    
    <script type="text/javascript">
        function toggleColumn(link)
        {
            var div = $(link).siblings('.countDiv');
            //alert(div.length);
            $(div).toggle();
        }
    </script>
    
    <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
        <Columns>
            <asp:TemplateField HeaderText="# Openings"> 
    <ItemTemplate>
        <a style="cursor:pointer;" onclick="toggleColumn(this)"><%# Eval("Count") %></a>      
        <div class="countDiv">
            Total Count: 20
        </div>
     </ItemTemplate>
     </asp:TemplateField>
        </Columns>
    </asp:GridView>
    

    Default.aspx.cs file:

      namespace aspnetWeb
          {
        public partial class _Default : Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                List<Student> list = new List<Student>();
    
                for(int i=1;i<=10;i++)
                list.Add(new Student { ID = 1, Count = 20 });
    
                GridView1.DataSource = list.AsQueryable();
                GridView1.DataBind();
            }
        }
    
        public class Student
        {
            public int ID { get; set; }
    
            public int Count { get; set; }
        }
     }