Collapse Expand Bootstrap panel inside ListView using jQuery in ASP.Net

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hello,

The problem is on click of collapse panel it pass the hidden value to query string but it does not open collapse panel.

please note my collapse panel is inside listview there fore href of collapse is dynamic pass.

i want to collapse panel open at the same time hidden field value pass to query string.

i have this bootstrap collapse

<a role="button" id="lnk" data-toggle="collapse" href="#collapseExample<%#Container.DataItemIndex%>" aria-expanded="false" aria-controls="collapseExample" >

<div class="collapse margin radius border grey-bg" id="collapseExample<%#Container.DataItemIndex%>">
    <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("ID") %>' />
</div>

then i have this script to pass the hiddenfield value to query string

  <script type="text/javascript">
      $(function () {
          $('[id*=lnk]').on('click', function () { 
              var id = $(this).closest('div[class="whitebg border radius  margin"]').find('[id*=HiddenField2]').val();
              var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
              var newUrl = oldURL + "?Id=" + id;
              if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                  window.history.pushState({ path: newUrl }, '', newUrl);
                  //$('#collapseExample').collapse('in');
                  $("#<%=HiddenField1.ClientID %>").val(id);
                }
                return false;
            });
        });
    </script>

please advice

Posted 8 months ago

Hi nauna,

Please refer below sample.

HTML

<script type="text/javascript">
    $(function () {
        $('[id*=lnk]').on('click', function () {
            var id = $(this).next('div').find('[id*=HiddenField2]').val();
            if ($(this).next('div').attr('class') == "collapse in") {
                $(this).next('div').removeClass('collapse in');
                $(this).next('div').addClass('collapse out');
            }
            else {
                $(this).next('div').removeClass('collapse out');
                $(this).next('div').addClass('collapse in');
            }
            var oldURL = window.location.protocol + "//" + window.location.host + window.location.pathname;
            var newUrl = oldURL + "?Id=" + id;
            if (window.history != 'undefined' && window.history.pushState != 'undefined') {
                window.history.pushState({ path: newUrl }, '', newUrl);
                $("#<%=HiddenField1.ClientID %>").val(id);
            }
            return false;
        });
    });
</script>
<div>
    <asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:ListView ID="lvCustomers" runat="server" GroupPlaceholderID="groupPlaceHolder1"
        ItemPlaceholderID="itemPlaceHolder1">
        <LayoutTemplate>
            <table cellpadding="0" cellspacing="0">
                <asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr>
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <a class="btn btn-primary" role="button" id="lnk" data-toggle="collapse" href="#collapseExample<%#Container.DataItemIndex%>"
                aria-expanded="false" aria-controls="collapseExample">CustomerId </a>
            <div class="collapse in" id="#collapseExample<%#Container.DataItemIndex%>">
                <asp:Label ID="lblId" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                <asp:HiddenField ID="HiddenField2" runat="server" Value='<%# Eval("CustomerId") %>' />
            </div>
        </ItemTemplate>
    </asp:ListView>
</div>

Namespaces

C#

using System.Configuration;
using System.Data;
using System.Data.SqlClient;

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["constr"].ConnectionString))
        {
            using (SqlCommand cmd = new SqlCommand("SELECT CustomerId,Name FROM Customers", con))
            {
                using (SqlDataAdapter da = new SqlDataAdapter(cmd))
                {
                    DataTable dt = new DataTable();
                    da.Fill(dt);
                    lvCustomers.DataSource = dt;
                    lvCustomers.DataBind();
                }
            }
        }
    }
}

Screenshot