I am trying to create this webpage that shows a database with a "Master-Detail" type view. To do this I am following this tutorial http://mattberseth.com/blog/2008/04/masterdetail_with_the_gridview.html.
The only difference is that I am not using ObjectDataSource, instead I am just using my SQL - DataBase.
Here's the problem: When I click on the link to show the modalPopup, the BackgroundCssClass is not being applied, and the popup just shows up in the corner of the screen without changing the background and opacity. Anyone know whats going on?
Here's the code:
CSS
<style type="text/css">
TR.updated TD
{
background-color:yellow;
}
.modalBackground
{
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
Modalpopup part (right above this is the gridview that shows the "Master" section of the Database, this works fine so I didn't include it.
<asp:UpdatePanel ID="updPnlReservationDetail" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShowPopup" PopupControlID="pnlPopup"
CancelControlID="btnClose"
BackgroundCssClass="modalBackground" />
<asp:DetailsView ID="dvReservationDetail" runat="server" DataSourceID="mainTable" CssClass="detailgrid"
GridLines="None" DefaultMode="Edit" AutoGenerateRows="false" Visible="false" Width="100%">
<Fields>
<asp:BoundField HeaderText="LabName" DataField="labName" ReadOnly="true" />
<asp:TemplateField HeaderText="Email">
<EditItemTemplate>
<asp:TextBox ID="txtEmail" runat="server" Text="Hello" />
</EditItemTemplate>
</asp:TemplateField>
</Fields>
</asp:DetailsView>
<div class="footer">
<asp:LinkButton ID="btnSave" runat="server"
Text="Save" OnClick="BtnSave_Click" CausesValidation="true"
/>
<asp:LinkButton ID="btnClose" runat="server"
Text="Close" CausesValidation="false"
/>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
maybe you are using <asp:ScriptManager runat="server" /> instead of <ajaxToolKit:ToolkitScriptManager runat="server" />
here's a little example of "normal" usage, just in case
<asp:Button ID="btnShow_ClientSide" runat="server"
Text="show client side" OnClientClick="return false" />
<asp:Button ID="btnShow_ServerSide" runat="server"
Text="show server side" OnClick="btnShow_ServerSide_Click" />
<ajaxToolKit:ModalPopupExtender ID="mdlPopup" runat="server"
TargetControlID="btnShow_ClientSide"
PopupControlID="pnlPopup" CancelControlID="btnHide_ClientSide"
BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlPopup" runat="server"
BackColor="White" BorderColor="Black">
<asp:Button ID="btnHide_ClientSide" runat="server"
Text="hide client side" OnClientClick="return false" />
<asp:Button ID="btnHide_ServerSide" runat="server"
Text="hide server side" OnClick="btnHide_ServerSide_Click" />
</asp:Panel>
and in the code behind
protected void btnShow_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Show();
}
protected void btnHide_ServerSide_Click(object sender, EventArgs e)
{
mdlPopup.Hide();
}
I had a completely different cause of this problem, and here's the solution, which I found on this very helpful walk-through page.
BackgroundCssClass: The name of the CSS class which needs to be applied to the background of the popup. One thing to note here is that if you don’t provide a CSS class then the modal popup will not function like a modal dialog i.e. One will be able to interact with the controls in the back of the popup control, so its imperative to provide a valid CSS class name value to the BackgroundCssClass property. In the above e.g. we have defined a CSS class called “backgroundColor” in the header section of the aspx page. Please note in the CSS class definition we have applied “filter” property to make the background transparent.
I had made a typo in the .css file, which prevented reading the background style. As soon as the CSS was working, the popup became modal and had its proper background.
Related
I am trying to create a web app that can create a survey form just like google forms.
<asp:Panel ID="container" runat="server"></asp:Panel>
<asp:Panel ID="question" runat="server" Height="391px">
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Question: " Font-Size="Large"></asp:Label>
<asp:TextBox ID="txtQuestion" runat="server" Font-Size="Large"></asp:TextBox>
<asp:DropDownList ID="lstQuestionType" runat="server">
<asp:ListItem Enabled="False" Selected="True">Question Type</asp:ListItem>
<asp:ListItem>Short Answer</asp:ListItem>
<asp:ListItem>Paragraph</asp:ListItem>
<asp:ListItem>Multiple Choice</asp:ListItem>
<asp:ListItem>Check Box</asp:ListItem>
<asp:ListItem>Linear Scale</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnGenerate" runat="server" OnClick="btnGenerate_Click" Text="Generate Question" Width="137px" />
</asp:Panel>
<asp:Button ID="btnAddQuestion" runat="server" Text="Add Question" OnClick="btnAddQuestion_Click" />
and this is the C# code that generates the panel
protected void btnAddQuestion_Click(object sender, EventArgs e)
{
Panel newQuestions = new Panel();
newQuestions = question;
container.Controls.Add(newQuestions);
}
but when I click the add question button, it does not add the panel
Although i can't tell from the code probably the problem is with the question parameter. Also use MVC with controllers it will be much more clean and also VS automatically generates the View for you based on your models and controllers which i guess it will save you time in the long run.
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.
I'm running into a bit of an issue. I have some asp.net controls wrapped in an update panel, but when I click the submit button it jumps to the top of the page. I've read a bunch of posts on here, and they either require use of some javascript or say set the MaintainPagePostion to "true" in the page directive. I tried setting it to true, that did not work. I really don't want to use a javascript script to accomplish this either. I was under the impression that this is one of the benefits to using an update panel. However, the part that I find most confusing, is it used to not do this. I don't remember changing anything on the website that would have caused this. Any help with this problem is appreciated. Thanks.
Here is the code I'm using.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
You can do it in 4 ways :
From Code-behind - Page.MaintainScrollPositionOnPostBack = true;
From Page Directive - MaintainScrollPositionOnPostback="true"
From Web.config - <pages maintainScrollPositionOnPostBack="true" />
Using Javascript. You can use the code from following link. It worked for me -
http://weblogs.asp.net/andrewfrederick/archive/2008/03/04/maintain-scroll-position-after-asynchronous-postback.aspx
I think, it's not jump to the top of the page. It's refreshing the page. What's your update panel's UpdateMode? Is it Conditional? If it's conditional, check trigger. ControlID should be button ID and EventName='Click'. Then check the area of Update Panel .
Sample Code Here :
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlEmailStuff" runat="server">
Name: <asp:TextBox ID="txtName" runat="server" Width="202px"></asp:TextBox><br />
Email: <asp:TextBox ID="txtEmail" runat="server" Width="203px"></asp:TextBox><br />
<span style="font-size:12px; font-weight:normal; margin-left:55px;">**Please double check email**</span><br />
Message:<br />
<asp:TextBox ID="txtMessage" runat="server" Width="370px" TextMode="MultiLine" Font-Names="Tahoma" Font-Size="Small" Height="75px"></asp:TextBox><br />
<asp:Label ID="lblEmailError" runat="server" Text="" Font-Size="Small" ForeColor="Red"></asp:Label>
<asp:ImageButton Height="25px" Width="60px" CssClass="EmailSubmit" ImageUrl="Images/MailingListBtnSubmit2.png" ID="btnSubmit" runat="server" onclick="btnSubmit_Click"/>
</asp:Panel>
<asp:Panel ID="pnlThankYou" runat="server" Visible="false">
<p style="text-align:center; font-size:30px;">Thank you!<br /><span style="font-size:20px;">Your Email has been sucessfully submitted.</span></p>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
Have you specified the triggers in the update panel? If you specify the triggers in the triggers section then the update panel will update without jumping on top.Also you need to give updatemode = "conditional". It can be done like this:
<asp:UpdatePanel ID="ex" runat="server" UpdateMode="Conditional">
<ContentTemplate>
//your controls here
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="yourbuttonid" />
</Triggers>
</asp:UpdatePanel>
Well thank you to everyone that gave me suggestions. As it turns out the Page Routing is what caused this issue. So all I had to do to get it working was add and ignore line for that page in my RegisterRoutes code block:
void RegisterRoutes(RouteCollection routes)
{
routes.Ignore("Mobile");
routes.Ignore("Booking.aspx*");//<---- This Fixed it.
routes.MapPageRoute("Gallery", "Gallery/{Name}", "~/Gallery.aspx");
routes.Ignore("*");//<---- This is better for me. It acts as a catch all.
}
This helped me solve the issue: http://forums.asp.net/t/1743640.aspx
EDIT
I added the "routes.Ignore("");" code to it to act as a catch all, so I really don't need to ignore "Booking.aspx" specifically. Keep in mind though the order is important here. The Ignore("") needs to be the last one or else none of the other routing will work.
Thanks again Everyone.
Please try PageRequestManager handlers
<script>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
try {
sender._controlIDToFocus = null;
}
catch (e) {
}
}
</script>
I was stuck for a few hours with a similar problem. I was convinced the problem was the UpdatePanel but it ended up being the defaultfocus & defaultbutton attributes in the form tag that was causing the page to jump up to focus the first textbox at the top of the page.
<form id="form1" runat="server" defaultbutton="buttonId" defaultfocus="textboxId">
This is something else to look at when facing this kind of issue.
.aspx
<asp:TextBox ID="txtInvite" Width="170px" Height="20px" runat="server"
Font-Size="Small" ></asp:TextBox>
<AjaxToolkit:TextBoxWatermarkExtender ID="tbexInvite"
runat="server" SkinID="skinTextBoxWatermarkExtender"
TargetControlID="txtInvite" WatermarkText="Email"></AjaxToolkit:TextBoxWatermarkExtender>
<asp:RequiredFieldValidator ID="rfvInvite" runat="server"
Display="None" ValidationGroup="Inivitation" SetFocusOnError="true"
ControlToValidate="txtInvite" ErrorMessage="Enter Email."></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExpInvite" runat="server"
Display="None" ValidationGroup="Inivitation" SetFocusOnError="true"
ValidationExpression="\s*\w+([-+.]\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*\s*"
ControlToValidate="txtInvite" ErrorMessage="Invalid Email Format."></asp:RegularExpressionValidator>
<div class="ButtonLogin" style="margin-top:-27px;margin-right:143px;_margin-right:105px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite" ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true" onclick="btnInvite_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0">
<ProgressTemplate>
<asp:Image ID="Image1" ImageUrl="~/App_Themes/Lifetrons/images/progressbar.gif" AlternateText="Processing" runat="server" />
</ProgressTemplate>
</asp:UpdateProgress>
Page_load Code
.CS
this.btnInvite.Attributes.Add("onclick", "this.disabled=true;" + Page.ClientScript.GetPostBackEventReference(this.btnInvite, "").ToString());
I want to disable button after clicking on it with maintaining validation and Onlick method. I refer to this question my problem is same like this question but I haven't solve my problem. How can I solve?
There is no need to mess around with your code-behind Page_Load event. In your button control, just add the following snippet:
OnClientClick="if(Page_ClientValidate('Inivitation')){this.disabled=true;}"
So that your button looks like
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite"
ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true"
onclick="btnInvite_Click" OnClientClick="if(Page_ClientValidate('Inivitation')){this.disabled=true;}" />
You should be able to disable the button using the Button_Click method. Make your first line something like this:
Button.Enabled = False;
There is a problem with this method though. If the page loads too quickly or the code freezes it will not disable the button properly. Just remember to re-enable the button at the end of the method if the validation fails or times out.
Another method you may try is to hide it using CSS. I am a big fan of this because it always works and it is very simple. You need a technology like jQuery where you can add classes on the fly. You can use the AddClass and RemoveClass API in jQuery to add/remove CSS classes at runtime. Take a look here. http://jqueryui.com/addClass/
you can use Like this
<asp:Button ID="btnInvite" runat="server" CssClass="cssLoginButton blue" Text="Invite" ToolTip="Invite" ValidationGroup="Inivitation" CausesValidation="true" UseSubmitBehavior = False"onclick="btnInvite_Click" />
I have an Updatepanel and Gridview inside it.
<asp:UpdatePanel ID="uplPanel" UpdateMode="Conditional" runat="server" OnLoad="uplPanel_Load">
<ContentTemplate>
<asp:GridView ID="gvPrList" runat="server" AutoGenerateColumns="false" AllowPaging="false"
AllowSorting="false" CssClass="list-table" HeaderStyle-CssClass="header">
<Columns>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="button save" OnCommand="onPrItemCmd"
CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
<asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="button save" OnCommand="onPrItemCmd"
CommandName="deleteRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
When I click on my buttons inside the Griview, it does not fire the events.
Any idea?
You need to add OnCommand event of GridView and then handle that inside that event like this:
OnRowCommand="gvPrList_OnRowCommand"
or alternatively add a click event for the individual button and then handle in the code behind file:
<asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="Edit" CssClass="button save"
OnCommand="onPrItemCmd" CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
I had the same issue where column buttons with a OnClick were causing a postback but the OnClick method was not being hit. When I commented out the update panel and it all worked.
I resolved this issue by adding a postback trigger for the grid within the update panel:
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="uxWebDataGrid" />
</Triggers>
</asp:UpdatePanel>
Hope this helps someone else!
I did the following and it works
I replace asp button with html button and call javascript method to fire Update Panal Load event.
<input id="btnDelete1" type="button" onclick="javascript:DeletePrItem('<%# Eval("ID") %>');" value="Delete" class="button save" style="width: 80px" />
My Js :
function DeletePrItem(_Id) {
__doPostBack('<%= uplPanel.ClientID %>', _Id);
}
My Code behind :
protected void uplPanel_Load(object sender, EventArgs e)
{
var arg = Request.Params.Get("__EVENTARGUMENT");
if (arg != null)
{
if (arg != "")
{
string recordId = arg.ToString();
//Do deletetion and rebind data grid
}
}
}
This would be the Event Handler for your command in the codebehind:
protected void onPrItemCmd(object sender, CommandEventArgs e)
{
//do whatever you want
//probably you will need the "ID" or "CommandArgument":
string myArgumentID = e.CommandArgument.ToString();
uplPanel.Update(); //since the UpdatePanel is set *UpdateMode="Conditional"*
}
UPDATE:
Probably, you might be doing some validation when you click on buttons. If so, you need to add CausesValidation="false" in your buttons or links properties
I had a similar issue.
Depending on your situation, as in mine...All of the clickable controls inside of the update panel I will want to be triggers; So i was simply able to use the UpdatePanel property 'ChildrenAsTriggers="true"' so solve the issue.
<asp:UpdatePanel runat="server" ID="UPCommunicationlogForm" ChildrenAsTriggers="true" >
This solved my issue, now my edit and delete buttons that are generated from the ItemTemplate inside my gridview call their respective methods on the server.
Please add this code into the UpdatePanel.
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="gvPrList" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
I added an OnRowCommand Event and add this trigger to the UpdatePanel:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvPrList" EventName="RowCommand" />
</Triggers>
Note that it's an Async trigger.
This helped me.
In my case I was changing a value in a asp:DropDownList control and then going back to the server to update my asp:GridView which is in a different asp:UpdatePanel. I just forgot to add code to refresh the Update Panel with the list. Once I did that everything worked fine.
Server side
System.Data.DataSet ds = MySQL.DAL.GetRecord(sql);
GV_View.DataSource = ds;
GV_View.DataBind();
UP_MainList.Update(); //refresh the update panel
Aspx code
<asp:UpdatePanel runat="server" ID="UP_ListChange" UpdateMode="Conditional">
<ContentTemplate>
<asp:DropDownList runat="server" ID="ddFilter" DataTextField="Desc" AutoPostBack="true" DataValueField="Detail" OnSelectedIndexChanged="GV_CodeView_RefreshScreen" ></asp:DropDownList>
</ContentTemplate>
</asp:UpdatePanel>
<div class="medium">Select Filter to view database codes</div>
</div>
<div class="div-row-header" runat="server" id="divList">
<asp:UpdatePanel runat="server" ID="UP_MainList" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="GV_View" runat="server" AllowSorting="True" AutoGenerateColumns="false" DataKeyNames="id">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" Visible="false" />
<asp:BoundField DataField="Type_Cd" HeaderText="Code" />
<asp:BoundField DataField="Short_Desc" HeaderText=" Description" />
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:Button ID="Code_Edit" runat="server" Text="Edit" onClick="GV_Code_Edit_Click" class="button" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</ContentTemplate>
</asp:UpdatePanel>
</div>