Develop Reference

Button inside modalpopup doesn't execute a line of code for outside component

Problems encountered:
Button inside UpdatePanel, which is inside ModalPopup, won't execute
.DataBind()
Button executes other codes but not .DataBind()
What I want to work:
When the button in the ModalPopup is clicked, .DataBind() is executed, Button is inside an UdatePanel and Gridview is outside the UpdatPanel
I have three updatepanels, all just to execute ModalPopupExtender separately based on some conditions. I also have a gridview, with a custom button to open the first popup, which is outside of the three updatepanels. Two updatepanels has a button for executing the .DataBind() for the gridview and at the same time hiding the other popups. After the buttonclick inside the popup (this is also inside an updatepanel), the previous popup closes which means that it executes the code .Hide() in codebehind, but the .DataBind() did not even though I put .DataBind() before .Hide()
I also tried to refresh the page using Response.Redirect and ServerTransfer instead of using .DataBind(), and the button stopped working.
I also tried to surround the gridview inside another updatepanel so I could just use .Update but when I execute the button for the popup, it refuses to close and the second popup appeared making it look like nested popups, the button for the second popup also stopped working.
The code works fine but the only thing that doesn't work is to refresh the gridview after the buttonclick inside the popup. If I click the button for the popup again (custom button inside the gridview), then that's when the gridview updates, and that is wrong.
I ran out of ideas how to work around this, any suggestions for this??
HTML
<asp:GridView ID="gridview" runat="server" CssClass="table table-hover" AutoGenerateColumns="False" DataKeyNames="OutgoingID" DataSourceID="SqlDataMaterials" HorizontalAlign="Center" OnRowCommand="gridview_RowCommand" Width="100%">
<Columns>
<asp:TemplateField HeaderText="#">
<ItemTemplate>
<asp:Button ID="myButton" runat="server" Text="View" CommandName="ClickMe" CommandArgument='<%# Eval("OutgoingID") %>' CausesValidation="False" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ClassificationName" HeaderText="ClassificationName" SortExpression="ClassificationName" />
<asp:BoundField DataField="MaterialName" HeaderText="MaterialName" SortExpression="MaterialName" />
<asp:BoundField DataField="Qty" HeaderText="Qty" SortExpression="Qty" />
<asp:BoundField DataField="Total" HeaderText="Total" SortExpression="Total" />
<asp:BoundField DataField="RequestDate" HeaderText="RequestDate" SortExpression="RequestDate" />
</Columns>
<EmptyDataTemplate>
<asp:Panel ID="Panel3" runat="server" CssClass="breadcrumb">
No Requests for this project.
</asp:Panel>
</EmptyDataTemplate>
</asp:GridView>
first popup
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
(Some very long html here with buttons that execute the other popups)
</ContentTemplate>
</asp:UpdatePanel>
</section>
</asp:Panel>
<asp:HiddenField ID="HiddenField1" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BehaviorID="popup" PopupControlID="Panel2" DropShadow="True" BackgroundCssClass="modalBackground" TargetControlID="HiddenField1" OkControlID="btn_Close">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
second popup
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField2" runat="server" />
<asp:Panel ID="panelSuccess" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request successfully approved.</h5>
<br />
<asp:Button ID="btnSuccessOk" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnSuccessOk_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertSuccess" runat="server" BehaviorID="popup2" PopupControlID="panelSuccess" DropShadow="True" TargetControlID="HiddenField2" BackgroundCssClass="modalBackground" OkControlID="btnSuccessOk">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSuccessOk" />
</Triggers>
</asp:UpdatePanel>
third popup
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:HiddenField ID="HiddenField3" runat="server" />
<asp:Panel ID="panelCancel" runat="server" Height="150" Width="300" class="modalPopup">
<section class="text-center">
<h5>Request Cancelled.</h5>
<br />
<asp:Button ID="btnCancelRq" runat="server" Text="OK" CssClass="btn btn-sm btn-success" OnClick="btnCancelRq_Click" />
</section>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalAlertCancel" runat="server" BehaviorID="popup3" PopupControlID="panelCancel" DropShadow="True" TargetControlID="HiddenField3" BackgroundCssClass="modalBackground" OkControlID="btnCancelRq">
<Animations>
<OnShown><Fadein Duration="0.50" /></OnShown>
<OnHiding><Fadeout Duration=".05" /></OnHiding>
</Animations>
</ajaxToolkit:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
AND THE THE CODE BEHIND
this is from the first popup
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
and just in case the second/third popup
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataBind();
}

You have to assign data source before databind to gridview to bind data
protected void btnSuccessOk_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}
protected void btnCancelRq_Click(object sender, EventArgs e)
{
gridview.DataSourceID = SqlDataMaterials;
gridview.DataBind();
}

I have a working code now, but it still didn't answer why the button won't fire in the last two popups, Instead of putting the trigger in the last two modalpopupextender, I put it in the main popup, which their button is still inside an update panel. I don't know what the deal is with the last two popups why it won't execute since all of them are inside an updatepanel.
But I think that the buttonclick worked is because my main popup has the updatepanel inside it's panel, while the other two is surrounded within an updatepanel.
<asp:Panel ID="Panel2" runat="server" Height="400" Width="700" class="modalPopup" Style="display: none;">
<section class=" text-center" style="height: 149px; padding: 2px; vertical-align: middle; text-align: center;">
<section class="label-info">
<asp:Button ID="btn_Close" runat="server" Text="Close" Width="50px" Height="20px" CssClass="btn-danger pull-right" Font-Size="Smaller" />
<asp:Label ID="Label1" runat="server" Text="REQUEST INFORMATION" CssClass="label">
</asp:Label>
</section>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
(some long html code with button 'btn_approve')
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btn_approve" />
</Triggers>
</asp:UpdatePanel>
Code behind
protected void btn_approve_Click(object sender, EventArgs e)
{
try
{
if (hf_outgoingId.Value != null)
{
var abc = (from a in db.Outgoings
where a.OutgoingID == Convert.ToInt32(hf_outgoingId.Value)
select a).FirstOrDefault();
abc.Status = "APPROVED";
db.SubmitChanges();
gridview.DataBind();
ModalPopupExtender1.Hide();
ModalAlertSuccess.Show();
}
}
catch (Exception x)
{
}
}
I can also show the second popup right after I click the button without making it look like nested popups.

refresh parent page from child page not working

Ok , this is running me nuts. I have tried any possible solution and it is not working.
Here is the problem:
I have a gridview in my parent page. Each row has an "Edit" button which opens a new page:
<asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="" Text="Edit" OnClientClick='<%# Eval("ID", "window.open(\"EditFrm.aspx?ID={0}\", null, \"width=700,height=600,top=100,left=300\", \"true\");") %> '/>
in Child page, I populate all the fields from db and with clicking on "update" save all the data into dab and close the current page:
<script>
function RefreshParent() {
window.opener.document.getElementById('Button1').click();
window.close();
}
</script>
Button1 includes a method to refresh Gridview data from db.
I have tried following code but it doesn't refresh the gridview:
window.opener.location.reload(true);
Here is the definition of gridview in my parent window:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False" AutoGenerateDeleteButton="True" OnRowDeleted="GridView1_RowDeleted" OnRowDeleting="GridView1_RowDeleting" BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Vertical">
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="" Text="Edit" OnClientClick='<%# Eval("ID", "window.open(\"EditFrm.aspx?ID={0}\", null, \"width=700,height=600,top=100,left=300\", \"true\");") %> '/>
</ItemTemplate>
</asp:TemplateField>
// Column definition
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
</Triggers>
</asp:UpdatePanel>
Any support is appreciated.

This was really interesting.
I solved the problem with following code. This prevents javascript function to run before C# update.
<asp:placeholder id="refresh_script" visible="false" runat="server">
<script>
window.opener.location.reload();
window.close();
</script>
</asp:placeholder>
Then you need to add this to your code behind in .cs
refresh_script.Visible = true;

Why my asp.net MODAL doesn't display data?

I am trying to display a gridview inside ajax MODAL but it doesn't show the gridview. It shows every other element that I put INSIDE it but not a gridivew.
I tried to display gridview outside the modal and it works but not inside modal.
Why ?
Code:
<asp:Panel ID="pnlLastHearingDates" CssClass="modalPopup" runat="server" HorizontalAlign="Center" Visible="true">
<asp:GridView runat="server" ID="grdViewLastHearingDates" AllowPaging="true" PageSize="5" OnPageIndexChanging="grdViewLastHearingDates_PageIndexChanging"
OnRowCommand="grdViewLastHearingDates_RowCommand" PagerStyle-BackColor="#99CC99" HeaderStyle-BackColor="#99CC99" DataKeyNames="pk_Cases_CaseID" PagerStyle-Font-Size="12.5px" PagerStyle-ForeColor="Black" PagerStyle-HorizontalAlign="Center" AutoGenerateColumns="false" OnRowEditing="grdViewLastHearingDates_RowEditing"
CssClass="table table-condensed table-bordered table-striped table-responsive">
<Columns>
<asp:BoundField DataField="pk_Cases_CaseID" HeaderText="Case ID" />
<asp:BoundField DataField="CaseNo" HeaderText="Case No" />
<asp:BoundField DataField="NextHearingDate" HeaderText="Next Hearing Date" />
<asp:BoundField DataField="DaysRemaining" HeaderText="Days Remaining" />
</Columns>
</asp:GridView>
</asp:Panel>
<asp:Button ID="btnShowLasthearingDates" runat="server" OnClick="btnShowLasthearingDates_Click" CssClass="btn btn-primary" />
<asp:ModalPopupExtender ID="mdlLastHearingDates" runat="server" TargetControlID="btnShowLasthearingDates" PopupControlID="pnlLastHearingDates">
.cs code:
protected void btnShowLasthearingDates_Click(object sender, EventArgs e)
{
ShowLastHearingDates();
pnlLastHearingDates.Visible = true;
}

The issue here is probably with the TargetControlId attribute of the ModalPopupExtender.
Try removing the Button ID from there and instead take a Hidden Field control in your aspx page and give it an ID. Now put that ID into the TargetControlId attribute and try clicking your button.
Your code would look like this :
<asp:HiddenField ID="HdnFld1" runat="server" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="MPE" runat="server"
CancelControlID="btnCancel"
TargetControlID="HdnFld1" PopupControlID="Panel1"
PopupDragHandleControlID="PopupHeader" Drag="true"
BackgroundCssClass="ModalPopupBG">
</asp:ModalPopupExtender>
Also, you can keep CausesValidation="false" for your button just in case it stops postback due to validation, but again, you might handle it since that would postback without any kind of data checks on the client side.
Hope this helps.

Nested update panel causing parent update panel to refresh

I think I've tried every combination possible with update panels and I just cant seem to get this to work. I've got an update panel like so:
<asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
Some content...
<div style="width:100%;text-align:center;">
<asp:Label ID="lblMainMessage" runat="server"></asp:Label>
<asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
<ProgressTemplate>
<div class="loader ui-widget-overlay">
Loading data, please wait...<br/><img style="border-style:none;" src="../../Images/ajax-loader.gif" alt="loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<div>
<asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>
<asp:GridView ID="gvChecklists" runat="server"
AutoGenerateColumns="False" >
<Columns>
<ItemTemplate>
<asp:TemplateField HeaderText="Ques. Ans. Yes">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredYes" runat="server" ForeColor="Green"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionYesAnswered") %>'
ToolTip="Questions answered Yes."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Ques. Ans. No">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredNo" runat="server" ForeColor="Red"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNoAnswered") %>'
ToolTip="Questions answered No."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Ques. Ans. N/A">
<ItemTemplate>
<asp:Label ID="lblQuestionsAnsweredNA" runat="server" ForeColor="Gray"
Text='<%# DataBinder.Eval(Container, "DataItem.QuestionNAAnswered") %>'
ToolTip="Questions answered N/A."></asp:Label>
</ItemTemplate>
<FooterStyle HorizontalAlign="Center" />
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Image ID="imgLoader" runat="server" ImageUrl="/Images/ajax-loader.gif" />
</td>
</tr>
</table>
</div>
<div style="width:100%;text-align:center;">
<asp:Label ID="lblspChecklists2" runat="server"></asp:Label>
</div>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnChecklistExcel"/>
<asp:AsyncPostBackTrigger ControlID="timerChecklists" />
</Triggers>
</asp:UpdatePanel>
What I am trying to accomplish is to sort of lazy load some gridview data due to its size. So what I simply did is wrap the gridview inside an update panel. I then place a timer within this update panel and set it to 10000 (10 seconds) for the tick event. I set the event OnTick as shown:
protected void TimerChecklistsTick(object sender, EventArgs e)
{
LoadChecklistsSubPanel();
timerChecklists.Enabled = false;
imgLoader.Visible = false;
}
The LoadChecklistsSubPanel simply gets a dataset and assigns it to the grid views datasource and does a databind. This all works fine...however my issue is the following:
Note as mentioned a parent update panel and a child update panel. Within this I have an Update progress associated to the update panel upParent. But my issue is when the 10 seconds hits and the timer event is fired this updateprogress is shown (in effect causing my entire page to basically load). I would think that this would not happen given the updatemode is condition and children as triggers is false.
I have also tried ChildrenAsTriggers=true, I've tried to make the update panel mode always, I've tried just about everything but my issue still persists. Right when 10 seconds hits the UpdateProgress (which shows a loading data, please wait overlay is displayed.
Other than that my grid view is getting binded correctly, its getting its data after 10 seconds, etc. My only issue is I cannot seem to understand why the UpdateProgress shows up and overlays my entire screen if all that is happening is my nested sub panel should be updating only.

The fact is that upPanel not updated, you can check this by putting a Label in the upPanel with value="0" and add lblTest.text +=1 under TimerChecklistsTick in codebehind.
you can see that the value don't have any change.
In fact the problem is UpdateProgress control, UpdateProgress control is not a powerful tool and your expectations should not be very high.
if you want a powerful and customizable UpdateProgress you shoud make your own using JavaScript:
<script type="text/javascript">
var postBackElement;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
if (prm.get_isInAsyncPostBack()) {
args.set_cancel(true);
} else {
//Put your progress UI here
//Check Trigger Id if needed.
//Show an image or Hide another div or ...
}
}
function EndRequest(sender, args) {
}
</script>
But Solution ...
But i was played a little with your code and found that if you remove your timer from inside UpdatePanels and put it outside them totally, your problem will be solved.
</ContentTemplate>
</asp:UpdatePanel>
//Outside the upParent
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="10000"></asp:Timer>
The problem is persist for any control that placed inside child updatepanels.
i don't know if there are a basis solution or not but as i say UpdateProgress is a simple and quick solution but not good in performance and flexibility totally.
Update
This is simulated code what work for me (ASP.NET 4.5, Chrome 36):
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default2.aspx.vb" Inherits="StackOverflowTests_WebVB.net.Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upParent" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="lbl1" runat="server" Text="0"></asp:Label>
<asp:UpdateProgress AssociatedUpdatePanelID="upParent" ID="UpdateProgress7" runat="server" DisplayAfter="100" DynamicLayout="True" Visible="True">
<ProgressTemplate>
<div class="loader ui-widget-overlay">
Loading data, please wait...<br />
<img style="border-style: none;" src="../Images/loading.gif" alt="loading" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" ID="upChild" UpdateMode="Conditional" ChildrenAsTriggers="False">
<ContentTemplate>
<asp:Label ID="lbl2" runat="server" Text="0"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timerChecklists" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Timer ID="timerChecklists" runat="server" OnTick="TimerChecklistsTick" Interval="1000"></asp:Timer>
</div>
</form>
</body>
</html>
CodeBehind:
Protected Sub TimerChecklistsTick(sender As Object, e As EventArgs)
lbl1.Text += 1
lbl2.Text += 1
End Sub
In output, lbl2 start counting without full postback and without showing the content of UpdateProgress on every Tick.
If you move Timer inside the upChild, you can see that content of UpdateProgress will be shown on evey Tick, but still lbl1 show 0 without any change.

ASP.NET C# datagridview paging inside second tab when click next goes to the first tab

When I tried clicking the page 2 or any page of the DataGridView inside the second tab, it will go to the first tab which includes some of my textboxes. What I would like to have is every time I clicked the next page of the DataGridView, it will show the second tab which includes the second page and not the first tab.
Can someone please help me with this?
Below are my codes:
page.aspx
<div id="tabs-2">
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="10" class="table table-striped table-bordered dataTable table-hover table-responsive"
OnPageIndexChanging = "OnPaging" DataKeyNames="Employee No.">
<RowStyle CssClass="rowStyle" />
<HeaderStyle CssClass="headerStyle" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" onclick="Check_Click(this)" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle CssClass="footerStyle" />
</asp:GridView>
Previous Tab
<br />
<br />
<asp:HiddenField ID="hfCount" runat="server" Value = "0" />
<asp:Button ID="btnDelete" runat="server" CssClass="btn btn-warning" Text="Delete"
OnClientClick="return ConfirmDelete();" OnClick="btnDelete_Click" />
</div>
page.aspx.cs
protected void OnPaging(object sender, GridViewPageEventArgs e)
{
GridView1.PageIndex = e.NewPageIndex;
GridView1.DataBind();
SetData();
}

Seems currently selected tab page resets during the page post back. This can be done pretty easily if you are using jQuery.
You might need to store the selected tab page on tab page changed event (maybe within a hidden field) and restore the selected tab on the pageload method.