I am using bootstrap collapse in my project,in that collapse I have some buttons and dropdowns but when I click on any button or change dropdown index, postback occurs and collapse got uncollapsed,How can I stop this ? Here is my Code
<h4><a href="#" data-toggle="collapse" data-target="#div_search" style="font-weight: bold;">Search Training Profile</a><br />
</h4>
<div id="div_search" class="collapse" style="overflow-x: auto;">
<table class="table table-bordered table-striped">
<tr>
<td>Employee Name</td>
<td>
<asp:TextBox runat="server" ID="txt_name"></asp:TextBox>
<span class="err">optional</span>
</td>
<td>e.g First Name, Middle Name, Last Name</td>
</tr>
<tr>
<td>Designation</td>
<td><span class="err"></span>
<asp:DropDownList runat="server" ID="DDL_Desig" OnSelectedIndexChanged="DDL_Desig_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<span class="err">optional</span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_desig" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Location</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Loc" OnSelectedIndexChanged="DDL_Loc_SelectedIndexChanged" AutoPostBack="true">
<asp:ListItem>Select</asp:ListItem>
</asp:DropDownList>
<span class="err">optional</span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_loc" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Division</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Divis" OnSelectedIndexChanged="DDL_Divis_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<span class="err"> optional </span>
</td>
<td>
<asp:TextBox runat="server" ID="txt_divis" ReadOnly="true"></asp:TextBox>
<asp:Button Text="Clear" runat="server" />
</td>
</tr>
<tr>
<td>Department</td>
<td>
<asp:TextBox runat="server" ID="tx"></asp:TextBox>
<span class="err">optional</span></td>
<td>e.g ISD, MKT, HR etc</td>
</tr>
<tr>
<td>Filter By</td>
<td>
<asp:DropDownList runat="server" ID="DDL_Assc">
</asp:DropDownList>
</td>
<td>e.g OLP, SOLC, MAF, etc</td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center;">
<asp:Button Text="Search" runat="server" CssClass="btn" />
<asp:Button Text="Reset" runat="server" CssClass="btn" />
</td>
</tr>
</table>
</div>
Create public variable
string state = "collapse";
during the postback or dropdown changed set the value as
state = "expand";
and aspx page use this as below:-
<div id="div_search" class='<%= state %>' style="overflow-x: auto;">
Aditya's answer helped me initially and is a nice solution. As my code evolved wrapping the div inside an update panel and having the collapse div contain a couple calendar controls that cause postbacks to refresh data in a grid, I came up with another solution I thought worth sharing as it is handled server side only.
<asp:Panel ID="pnlDateRange" ClientIDMode="Static" runat="server" CssClass="collapse col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="divFrom" class="col-xs-12 col-sm-12 col-md-2 col-md-offset-4 col-lg-2 col-lg-offset-4">
<asp:Calendar ID="cStartDate" runat="server" CssClass="calendar" Font-Size="X-Small"
DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="From"
OnSelectionChanged="cStartDate_SelectionChanged">
<SelectedDayStyle Font-Bold="true" />
<OtherMonthDayStyle ForeColor="SlateGray" />
</asp:Calendar>
</div>
<div id="divTo" class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<asp:Calendar ID="cEndDate" runat="server" CssClass="calendar" Font-Size="X-Small"
DayNameFormat="FirstTwoLetters" DayHeaderStyle-Font-Bold="false"
TitleStyle-Font-Bold="true" TitleStyle-Font-Size="Small" Caption="To"
OnSelectionChanged="cEndDate_SelectionChanged">
<SelectedDayStyle Font-Bold="true" />
<OtherMonthDayStyle ForeColor="SlateGray" />
</asp:Calendar>
</div>
</asp:Panel>
The control was originally an ordinary with the same classes applied, it is the collapse target. In the c# on server side I have defined a private boolean variable set to true in all cases when the code loads to run. In the OnPreRender event I do this:
if (_collapseRange)
{
pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse in", "collapse");
}
else
{
if (!pnlDateRange.CssClass.Contains("collapse in"))
{
pnlDateRange.CssClass = pnlDateRange.CssClass.Replace("collapse", "collapse in");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With