Prevent Bootstrap Collapse toggle after postback - asp.net

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>Search Training Profile<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");
}
}

I know it's an old question, but i did it this way.
Maybe not the best way, but it works for me.
Just call the method when ever you need it.
It gets a bit messy when you got a lot to collapse.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GetTextForInfoboxFrontPage();
multiCollapseExample1.Attributes["class"] = "collapse";
annualCollapse.Attributes["class"] = "collapse";
infoBox.Attributes["class"] = "collapse";
}
}
private void CollapseAllButAnnual()
{
annualCollapse.Attributes["class"] = "collapse in";
infoBox.Attributes["class"] = "collapse";
logoUpload.Attributes["class"] = "collapse";
}

Related

How to validate Telerik RadDatePicker for the invalid input?

I have 2 Telerik RaddatePicker controls and the button.
<table class="moss2Search">
<tr>
<td>
<div runat="server">
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" width="100%" runat="server" DateInput-Label="Boarding Start Date">
</telerik:RadDatePicker>
</div>
</td>
<td>
<div runat="server">
<telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" width="100%" runat="server" DateInput-Label="Boarding End Date">
</telerik:RadDatePicker>
</div>
</td>
<td>
<div>
<asp:CheckBox ID="chkMerActive" runat="server" Checked="true"/>Active
</div>
</td>
<td>
<%--<asp:Button ID="btnSeacrh" runat="server" Text="Search" OnClick="btnSearch_Click" OnClientClick="return dateValidation();"/> <br />--%>
<telerik:RadButton RenderMode="Lightweight" runat="server" Text="Search" ID="Button1" OnClick="btnSearch_Click" OnClientClicked="validateDates" AutoPostBack="false"></telerik:RadButton>
</td>
</tr>
</table>
How can I validate these 2 controls for a valid date selected, since the user can type a string value as well?
Use the standard validation that comes with the framework. If the user input can be a date the components will have a value, otherwise null or the default so you can also check against that in a a custom validation rule

Get fields within a panel within a repeater on button click

I have an item repeater that displays items that have been bid on by a user. The items are contained within a panel as they contain form elements to update the bid for each item individually. What I would like is for the user to be able to submit the individual item to be updated and for me to know which item they are trying to update so I can ignore all other fields when processing the update.
Right now, my repeater looks like:
<asp:Repeater ID="itemRepeater" runat="server" onitemdatabound="itemRepeater_DataBound">
<ItemTemplate>
<!-- Auction Item MASTER-->
<asp:Panel id="pnlDefaultButton" runat="server" DefaultButton="absenteeBtnBid">
<div style="position: absolute; left: 0px; top: 0px; transform: translate(0px, 236px);" class="item auction_item firearm user_item isotope-item">
<div class="item_image">
<asp:HyperLink ID="item_img_link" runat="server" Visible="False" EnableViewState="False">
<asp:Image ID="item_img" runat="server" Visible="False" EnableViewState="False" Width="224" />
</asp:HyperLink>
</div>
<div class="item_overlay">
<div class="item_buttons">
Following
<asp:Label ID="absenteeBidLabel" runat="server" Text="" CssClass="absenteePlaceBidLabel" AssociatedControlID="absenteeBid" style="font-size:11px;" Visible="false">
<asp:TextBox ID="absenteeBid" runat="server" Wrap="False" CssClass="absenteePlaceBid" placeholder="Enter Bid" />
</asp:Label>
<asp:TextBox ID="absenteeBidId" runat="server" Wrap="False" CssClass="timedPlaceBid" style="display:none;" Visible="false" />
<asp:TextBox ID="absenteeBidClose" runat="server" Wrap="False" CssClass="timedPlaceBid" style="display:none;" Visible="false" />
<asp:TextBox ID="absenteeBidSaleId" runat="server" Wrap="False" CssClass="timedPlaceBid" style="display:none;" Visible="false" />
<asp:Button runat="server" ID="absenteeBtnBid" cssClass="startbidding_button edit_button" OnClick="onclick_absenteeBid" Text="Edit Bid" />
<div class="bid_options">
Live Bid
Bid by Phone
<asp:HyperLink ID="bid_withdraw" runat="server" CssClass="withdrawbid"></asp:HyperLink>
</div>
</div>
<table class="item_bidstatus" border="0" cellpadding="0" cellspacing="0" width="190">
<tbody>
<tr>
<td class="status_label" width="50%">Bids:</td>
<td class="status_value" width="50%"><asp:Label ID="bid_count" runat="server" Text="0" /></td>
</tr>
<tr>
<td class="status_label">My Top Bid:</td>
<td class="status_value"><asp:Literal ID="bid_amount" runat="server"></asp:Literal></td>
</tr>
<tr>
<td class="status_label">Your Status:</td>
<td class="status_value status_low">LOW BID</td>
</tr>
</tbody>
</table>
<div class="item_description">
<h5>
<asp:HyperLink ID="labelLot" runat="server">Lot #<%# Eval("item_lot")%></asp:HyperLink> - <asp:HyperLink ID="item_title" runat="server"><%# Eval("item_title")%></asp:HyperLink>
</h5>
<asp:Label ID="labelEst" runat="server" Visible="false"></asp:Label>
<p class="item_details"><asp:Label ID="labelDesc" runat="server"><%# Eval("item_desc")%></asp:Label></p>
> Item Details
</div>
</div>
<table class="item_footer" width="100%">
<tbody>
<tr>
<td><div class="item_category"><asp:HyperLink ID="item_sale" runat="server"></asp:HyperLink></div></td>
<td><div class="item_daysleft">Bid left: <asp:Literal ID="bid_time" runat="server"></asp:Literal></div></td>
</tr>
</tbody>
</table>
</div>
</asp:Panel>
<!-- /Auction Item MASTER-->
</ItemTemplate>
</asp:Repeater>
So my question would be how do I make the method onclick_absenteeBid only look at the form fields within the panel where the submission was made? Or am I even going about this the right way at all using a panel within a repeater?
Thre's nothing wrong with this approach. You have to find the container panel in the button's click event and find controls inside it. Here's how you can do it:
protected void onclick_absenteeBid(object sender, EventArgs e)
{
Panel pnl = ((Button) sender).Parent as Panel;
if (pnl != null)
{
//Access controls inside panel here like this:
TextBox absenteeBidId = pnl.FindControl("absenteeBidId") as TextBox;
if(absenteeBidId != null)
{
string myAbsenteeBidId = absenteeBidId.Text;
}
//Access Repeater Item
RepeaterItem itm = pnl.NamingContainer as RepeaterItem;
if (itm != null)
{
// Do stuff
}
}
}

How to Update a Panel Out side Repeater on ItemCommand of Repeater using Update Panel in asp.net?

I have a List of Client Displayed in Repeater. I have a Details Button in Repeater which displays the Details of Client when Clicked. For Sample now just added 'ClientName' only. *When i Click on 'Details' LinkButton in Repeater it Displays the Details of Selected Row. But, this causes FullPage Post Back! Which i want to Prevent. Just i want to Update the Panel which displays the Details when row is selected from Repeater*.
In .aspx page:
<script>
function ShowPopUp() {
var listItemsRegion = document.getElementById('popup');
popup.style.display = "block";
}
function ClosePopup() {
var listItemsRegion = document.getElementById('popup');
popup.style.display = "none";
}
</script>
<asp:Repeater ID="RepDetails" runat="server" OnItemCommand="RepDetails_ItemCommand">
<HeaderTemplate>
<table class="tabl">
<tr style="background-color: #808080; color: White">
<td class="lblCenter">
<asp:Label ID="Label4" runat="server" Text="City" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label3" runat="server" Text="Age" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label1" runat="server" Text="Gender" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:Label ID="Label5" runat="server" Text="Details" Font-Bold="true" CssClass="lbl"></asp:Label>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="<%# Container.ItemIndex % 2 == 0 ? "rowEven" : "rowOdd" %>">
<td class="lblCenter">
<asp:Label ID="lblCity" runat="server" Text='<%#Eval("City") %>' /></td>
<td class="lblCenter">
<asp:Label ID="lblAge" runat="server" Text='<%#Eval("Age") %>' /></td>
<td class="lblCenter">
<asp:Label ID="lblGen" runat="server" Text='<%#Eval("Gender") %>' CssClass="lbl"></asp:Label>
</td>
<td class="lblCenter">
<asp:LinkButton ID="lblDetails" runat="server" CommandName="Display"
CommandArgument='<%#Eval("ID") %>'>Details</asp:LinkButton></td>
<asp:Label ID="rlblClientname" runat="server" Text='<%#Eval("Client") %>' Visible="false"></asp:Label>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<div id="popup" style="display: none">
<asp:UpdatePanel ID="UpdatePanel6" runat="server">
<ContentTemplate>
<table width="80%" align="center">
<tr>
<td> </td>
<td width="30%"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<asp:Label ID="Label15" runat="server" CssClass="lbl" Text="Client Code"></asp:Label>
</td>
<td>
<asp:Label ID="lblClientName" runat="server" CssClass="lbl"></asp:Label>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<input id="Button2" type="button" value="Close" onclick="ClosePopup();" class="but" /> </td>
</tr>
</table>
</ContentTemplate>
<%-- <Triggers>
<asp:AsyncPostBackTrigger ControlID="RepDetails" EventName="RepDetails_ItemCommand" />
</Triggers>--%>
</asp:UpdatePanel>
</div>
In Repeater Item Command:
protected void RepDetails_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Display")
{
LinkButton lblDetails = (LinkButton)e.Item.FindControl("lblDetails");
Label rlblClientname = (Label)e.Item.FindControl("rlblClientname");
if (lblDetails != null && e.CommandArgument != null)
{
string val = e.CommandArgument.ToString();
if (rlblClientname != null && rlblClientname.Text != string.Empty)
{
lblClientName.Text = rlblClientname.Text;
}
string scrpt = "ShowPopUp();";
Page.ClientScript.RegisterStartupScript(this.GetType(), "s", scrpt, true);
}
}
}
This causes Full Page Post Back Which i want to Prevent.Onclick of Repeater row the details must be displayed with AsynPostBack. When adding Trigger Event to 'popup' div then it say control could not be found
Help Appreciated!
Thanks!
You have one of two Options:
1) Uncomment this code and change EventName="RepDetails_ItemCommand" to EventName="ItemCommand"
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RepDetails" EventName="ItemCommand" />
</Triggers>
2) Put the Repeater in the <ContentTemplate> of the UpdatePanel

Search Text Box on Master Page fires off validation error

I came across an interesting problem recently. In an ASP.NET Master Page, I have a Login Control and a Google Search Box as shown below:
<div id="searchBox">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td> <asp:TextBox ID="q" MaxLength="100" AutoPostBack="false" runat="server" onclick="ctl00$q.value=''" CausesValidation="False" Text="Google Custom Search" /></td>
<td align="right">
<asp:ImageButton ID="_btnSearch" runat="server" AlternateText="Search" validationgroup="SearchGroup"
CommandName="Search" ImageUrl="~/images/search.gif" OnClick="_btnSearch_Click"/>
</td>
<td width="5px" align="right">
<asp:RequiredFieldValidator ID="_rfvQ" ControlToValidate="q" runat="server" validationgroup="SearchGroup" />
<asp:HiddenField ID="cx" Value="00054535354544538:kmy_69vgpnm" runat="server" />
<asp:HiddenField ID="cof" Value="FORID:11" runat="server" /></td>
</tr>
</table>
</div>
Login Control
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:Login ID="Login" runat="server" Width="100%" FailureAction="RedirectToLoginPage" meta:resourcekey="LoginResource1">
<LayoutTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="60px"><asp:Label runat="server" ID="lblUserName" AssociatedControlID="UserName" Text="Username:" meta:resourcekey="lblUserNameResource1" /></td>
<td><asp:TextBox id="UserName" runat="server" Width="95%" meta:resourcekey="UserNameResource2" /></td>
<td width="5px" align="right">
<asp:RequiredFieldValidator ID="valRequireUserName" runat="server" SetFocusOnError="True"
ControlToValidate="UserName" Text="*" ValidationGroup="Login" meta:resourcekey="valRequireUserNameResource1" />
</td>
</tr>
<tr>
<td style="height: 24px"><asp:Label runat="server" ID="lblPassword" AssociatedControlID="Password" Text="Password:" meta:resourcekey="lblPasswordResource1" /></td>
<td style="height: 24px"><asp:TextBox ID="Password" runat="server" TextMode="Password" Width="95%" meta:resourcekey="PasswordResource2" /></td>
<td width="5px" align="right" style="height: 24px">
<asp:RequiredFieldValidator ID="valRequirePassword" runat="server" SetFocusOnError="True"
ControlToValidate="Password" Text="*" ValidationGroup="Login" meta:resourcekey="valRequirePasswordResource1" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><asp:CheckBox ID="RememberMe" runat="server" Text="Remember me" meta:resourcekey="RememberMeResource1"></asp:CheckBox></td>
<td align="right">
<asp:ImageButton ID="Submit" runat="server" AlternateText="Login"
CommandName="Login" ImageUrl="~/images/go.gif" ValidationGroup="Login" meta:resourcekey="SubmitResource1" />
</td>
<td width="5px" align="right"> </td>
</tr>
</table>
<div style="border-top: solid 1px black; margin-top: 2px; padding-top: 2px">
<br />
<asp:HyperLink ID="lnkRegister" runat="server" NavigateUrl="~/Register.aspx" meta:resourcekey="lnkRegisterResource1" ForeColor="#104A9D" Text="Create new account"></asp:HyperLink><br />
<asp:HyperLink ID="lnkPasswordRecovery" runat="server" NavigateUrl="~/PasswordRecovery.aspx" meta:resourcekey="lnkPasswordRecoveryResource1" ForeColor="#104A9D" Text="I forgot my password"></asp:HyperLink>
</div>
</LayoutTemplate>
</asp:Login>
</AnonymousTemplate>
<LoggedInTemplate>
<div id="welcomebox">
<asp:LoginName ID="LoginName1" runat="server" FormatString="Hello {0}" meta:resourcekey="LoginName1Resource1" /><br />
<small>
<asp:HyperLink ID="lnkProfile" runat="server" Text="Edit Profile" NavigateUrl="~/EditProfile.aspx" meta:resourcekey="lnkProfileResource1" /><br />
<asp:LoginStatus ID="LoginStatus1" Runat="server" meta:resourcekey="LoginStatus1Resource1" />
</small>
</div>
</LoggedInTemplate>
</asp:LoginView>
The search works fine if the user enters the text in the search text box and clicks the Search Button. However if the user enters the text in the search text box and hits the Enter button, then the validation for the Login control fires off. I want to avoid this since the user just wants to search.
How do I prevent the validation from firing when the user hits enter in the search text box.
Thanks.
You need to read about ValidationGroups. You might also want to change the default button- link text
when till i understand your problem...i think...if you only want to search on enter set search button as a default button and at the same time you want it works and fire no validation for Login text box then set property of search button CauseValidation=false.
If this is your error then will work fine else you describe your problem little in detail

Refresh gridview inside update panel after modal popup closes

I'm having a heck of a time trying to get a gridview to refresh its data after a modalpopup adds a new record to the database. Ive tried the following with no luck.
<cc2:ModalPopupExtender ID="mdlPopup" runat="server" OnOkScript="__doPostBack('<%= gvRecommendations.ClientID %>', '');" BackgroundCssClass="modalBackground"
TargetControlID="lbtnRecommendationsAddNew" PopupControlID="pnlAddNewRecommendation">
</cc2:ModalPopupExtender>
<asp:Panel ID="pnlAddNewRecommendation" runat="server" CssClass="confirm-dialog" style="display:none;" Width="500px">
<div class="inner">
<h2>New Suppressed Recomendation</h2>
<div class="base">
<table width="100%" cellpadding="5" cellspacing="0">
<tr>
<td align=left>
<asp:DropDownList ID="ddlRecomendations" runat="server" />
</td>
</tr>
<tr>
<td align="left">
<asp:Button ID="btnAddRecommendation" OnClick="btnAddRecommendation_Click" runat="server" Text="Submit" />
|
<asp:LinkButton ID="btnCancel" runat="server" Text="Cancel" ForeColor="Blue" />
<asp:LinkButton id="lbtnTopLeft" runat="server" CssClass="close" />
</div>
</td>
</tr>
</table>
</div>
</div>
</asp:Panel>
Ive also tried adding this with no luck after adding the record to the DB:
this.gvSupressedRecommendations.DataBind();
this.UpdatePanel1.Update();
I know im close but can't seem to get this to refresh.
Try reassigning your datasource before you rebind. This should work. I.e.
gvSupressedRecommendations.DataSource = <...>;
gvSupressedRecommendations.DataBind();

Resources