Refresh gridview inside update panel after modal popup closes - asp.net

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();

Related

Prevent Bootstrap Collapse toggle after postback

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";
}

How to get FileUpload file from ModalPopupExtender?

I got this modal popup extender but i can't get the files on the FileUpload control. here's my code:
<asp:Button ID="targC" runat="server" Style="display: none;" Text="here" />
<ajax:ModalPopupExtender ID="myExtender" runat="server" BackgroundCssClass="myModalPopupbackGrnd"
TargetControlID="targC" PopupControlID="pnlUserRegNoti" OkControlID="btnDone">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlUserRegNoti" Width="70%" Style="display: none;" CssClass="myModalPopupload"
runat="server">
<center>
<br />
<br />
<table width="80%">
<tr>
<td>
<center>
<h3><b>Requirements of New Application</b></h3>
<asp:HiddenField ID="validateUploads" runat="server" />
<table>
<tr>
<td>DTI Application Form</td>
<td><asp:FileUpload ID="dtiFileUpload" runat="server" onchange = "return CheckForTestFileDTI();" />
<asp:CustomValidator ID="CustomValidator1" ControlToValidate="dtiFileUpload" runat="server" OnServerValidate="CustomValidator1_ServerValidate" Text="File is too large. Max size is 20MB."></asp:CustomValidator>
</td>
</tr>
<tr>
<td>
<center>
<asp:Button ID="btnDone" runat="server" CssClass="button" Text="Done" OnClick="btnDone_Click" />
</center>
</td>
</tr>
</table>
</center>
</asp:Panel>
i will be using the file on the FileUpload control to upload to WindowsAzure. how can i get the values on the file upload inside the modalpopupextender?
You will need to to retrieve that FileUpload from within the Panel to interact with it in your code behind:
FileUpload dtiFileUpload = (FileUpload)pnlUserRegNoti.FindControl("dtiFileUpload");

Couldn't find updatepanel inside hidden div

I have an Updatepanel inside hidden Div, but I am getting "Could not find UpdatePanel with ID 'ctl00_ContentPlaceHolder_ctl04_UpdatePanel1'. I am trying to show and hide this panel from code behind. Thanks for any help. Here is my code.
<div id="div1" runat="server" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
you can only manipulate the the code inside the ContentTemplate from the updatepanel's postbacks, so the "div1"s display property can't be changed by the updatepanel's postbacks.
you could move the div inside the updatepanel and then it should work
I'd try this:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" id="div1" runat="server" style="display:none">
<table id="Table1">
<tr>
<td>
<telerik:RadComboBox ID="RadComboBox1" runat="server"
AutoPostBack="true" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">
</telerik:RadComboBox>
</td>
<td valign="top">
<asp:Button ID="button1" runat="server" OnClick="button1_Click" Text="Test1"
/><br />
<asp:Button ID="button2" runat="server" OnClick="button2_Click" Text="Test2"
/>
</td>
</tr>
</table>
<asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Keep in mind the client id of div1 will no longer be div1 (unless your using .net 4 in which case you can specify that it is'div1') you can fix this a variety of ways but basically you just need to add a little bit of javascript to the page that associates the actual WebControl.ClientID with 'div1'.

asp.net model popup extender

I am using ajax model popup extender in my asp.net page. From my page , on click of Save button , i popup panel using model popup extender.
If i cause postback from model popup , my backend (asp.net) form controls are coming front (ie) in the panel.
Here is my code snippet,
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up_Save" runat="server">
<ContentTemplate>
<div>
<table border="0" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td align="center" colspan="4">
<asp:Button ID="btn_Save" runat="server" Text="Save" Width="15%" OnClick="btn_Save_Click" />
</td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<cc1:ModalPopupExtender ID="BarrierRelayPopup" runat="server" PopupControlID="PopUp_Panel" TargetControlID="hiddenfield" CancelControlID="btn_Cancel_PopUp">
</cc1:ModalPopupExtender>
<asp:HiddenField ID="hiddenfield" runat="server" />
<asp:Panel runat="server" ID="PopUp_Panel" Width="50%" Height="30%" BackColor="Gainsboro" BorderStyle="Groove" >
<asp:UpdatePanel runat="server" ID="PopUp">
<ContentTemplate>
<table>
<tr>
<td align="left">
<asp:Label ID="lbl_Heading" runat="server" Text="Select Relay and Barrier :"></asp:Label>
</td>
</tr>
<tr>
<td>
<B_R:Barrier_Relay ID="Barrier_Relay" runat="server"/>
</td>
</tr>
<tr>
<td align="center">
<asp:Button ID="btn_OK" runat="server" Width="60px" Text="OK" OnClick="btn_OK_Click" /> <asp:Button ID="btn_Cancel_PopUp" runat="server" Width="60px" Text="Cancel" OnClick="btn_Cancel_PopUp_Click"/>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
Can anybody help me in this.
If I understand you right I think what you want to do is wrap the controls inside the modal in an updatepanel. This will prevent the modal from closing if you need to do a postback from within the popup.

defaultbutton is not working on my first panel, but works well with the rest of them?

I have a search panel in my master page, which seems to be getting called when typing in another panel and hitting enter, even though the panel has a different defaultButton. The weird thing is the second and third panels work well, which ever one I put at the top calls the search button.
My search panel in my master page
<asp:Panel runat="server" ID="pnlSearch" DefaultButton="btnSearch">
<asp:TextBox ID="txtSearch" CssClass="fld" runat="server" Width="160" Text="Search..."
onclick="this.value='';" CausesValidation="false"></asp:TextBox>
<asp:ImageButton ID="btnSearch" ImageUrl="~/Images/search_arrow.gif" runat="server"
OnClick="btnSearch_Click" CausesValidation="false" />
</asp:Panel>
and my other panels inside a control(only displaying two, the first one calls btnSearch, but the second one works fine.
<asp:Panel DefaultButton="btnViewPage" ID="pnlViewPage" runat="server" CssClass="floatLeft">
<table>
<tr class="adminRow">
<td class="adminLeftCol">
View Page:
</td>
<td>
<asp:TextBox ID="txtViewPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnViewPage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnViewPage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel DefaultButton="btnEditpage" ID="pn1Edit" runat="server" CssClass="floatLeft">
<table width="100%">
<tr class="adminRow">
<td class="adminLeftCol">
Edit Page:
</td>
<td>
<asp:TextBox ID="txtEditPage" Width="35px" runat="server"></asp:TextBox>
</td>
<td class="adminRightCol">
<asp:ImageButton ID="btnEditpage" runat="server" Text="Go" Width="75%" ImageUrl="~/Images/search_arrow.gif"
OnClick="btnEditpage_Click" ImageAlign="AbsBottom" CausesValidation="false" />
</td>
</tr>
</table>
</asp:Panel>
I've seen cases where the panel had to be inside an actual TD (the defaultbutton had to be a direct inner element of the panel). Have you tried this / can you try this?

Resources