asp.net update panel - asp.net

i have an update panel with gridview inside it. also i have a button inside the update panel that triggers it on click event. inside the gridview template field i have a linkbutton which should resets the user password on click. when i click on the reset button it simply does nothing.
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" Height="240px" Width="952px" Visible = "False" EnableModelValidation="True" EnableViewState="false">
<Columns>
<asp:BoundField DataField="personid" HeaderText="Person ID" />
<asp:BoundField DataField="firstname" HeaderText="Account No" />
<asp:BoundField DataField="surname" HeaderText="Skin Centre" />
<asp:BoundField DataField="email" HeaderText="Email" />
<asp:BoundField DataField="password" HeaderText="Password" ControlStyle-Width="200px">
<ControlStyle Width="200px"></ControlStyle>
</asp:BoundField><asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="lnkBtn" runat="server" OnCommand="lnkBtn_Command" CommandArgument='<%# Eval("CmdArgument") %>' Text='<%# Eval("CmdArgument", " reset ") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:UpdateProgress ID="UPCalendarUpdateProgress" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="width:100%; height: 100%; border: 0px solid; position: absolute; top: 0; left: 0; text-align: center;">
<div id="loadingMessage">
<asp:Label ID="LbLoadingMessage" runat="server" ForeColor = "Red" Font-Size="XX-Large" Text="Loading the account details..." CssClass="loading-message-text">
</asp:Label><br />
<img src="images/loadingAnimation.gif" alt="" style="margin-top: 20px;" /></div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<div style="margin-top:50px;">
<asp:button ID="rstButton" runat="server" text="Complete Reset" OnClick ="rstButton_Click" Visible ="false"/>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rstButton" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
any idea would be appreciated.

Update your EventName from Click to the exact button event name,
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rstButton" EventName="rstButton_Click" />
</Triggers>
Hope this helps..

please try again like this
<asp:ScriptManager ID="scm" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" Height="240px" Width="952px"
Visible="False" EnableModelValidation="True" EnableViewState="false">
<Columns>
<asp:BoundField DataField="personid" HeaderText="Person ID" />
<asp:BoundField DataField="firstname" HeaderText="Account No" />
<asp:BoundField DataField="surname" HeaderText="Skin Centre" />
<asp:BoundField DataField="email" HeaderText="Email" />
<asp:BoundField DataField="password" HeaderText="Password" ControlStyle-Width="200px">
<ControlStyle Width="200px"></ControlStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="">
<ItemTemplate>
<asp:LinkButton ID="lnkBtn" runat="server" OnCommand="lnkBtn_Command" CommandArgument='<%# Eval("CmdArgument") %>'
Text='<%# Eval("CmdArgument", " reset ") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div style="margin-top: 50px;">
<asp:Button ID="rstButton" runat="server" Text="Complete Reset" OnClick="rstButton_Click"
Visible="true" />
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="rstButton" />
<asp:AsyncPostBackTrigger ControlID="gv" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UPCalendarUpdateProgress" runat="server" DisplayAfter="0">
<ProgressTemplate>
<div style="width: 100%; height: 100%; border: 0px solid; position: absolute; top: 0;
left: 0; text-align: center;">
<div id="loadingMessage">
<asp:Label ID="LbLoadingMessage" runat="server" ForeColor="Red" Font-Size="XX-Large"
Text="Loading the account details..." CssClass="loading-message-text">
</asp:Label><br />
<img src="images/loadingAnimation.gif" alt="" style="margin-top: 20px;" /></div>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
i hope it will resolve your problem....

Related

AJAX UpdateProgress does not show

I have an update panel that includes a gridview with two buttons and a modal popup. When the user clicks btnView, the modal popup appears displaying the relevant information.
My issue is that I have been trying to get the updateprogress to appear during the partial postback and so far have not managed it. I should mention that the same UpdateProgress code does work in a test page that just comprises of a button with a sleep function in the code behind. Here is the html:
<!-- Placing the GridView in UpdatePanel-->
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gv" />
</Triggers>
<ContentTemplate>
<asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" DataKeyNames="GroupID" GridLines="Both"
BorderWidth="1px" CellPadding="2" ForeColor="Black" OnRowDataBound="gv_RowDataBound" BorderStyle="Double" HorizontalAlign="Center"
HeaderStyle-HorizontalAlign="Center" AllowSorting="True" CssClass="gvformat">
<AlternatingRowStyle BackColor="#95B9B9" />
<HeaderStyle BorderStyle="Double" BorderColor="Black"/>
<Columns>
<asp:BoundField DataField="FinancialYear" HeaderText="Financial Year" ItemStyle-HorizontalAlign="Center"/>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="btnView" runat="server" Text="view" OnClick="btnComments_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-info" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Comment</HeaderTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center" ItemStyle-VerticalAlign="Middle">
<ItemTemplate>
<asp:Button ID="btnDetail" runat="server" Text="view" OnClick="btnDetails_Click" CausesValidation="false" Font-Names="Trebuchet MS" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True" />
</ItemTemplate>
<HeaderTemplate>Details</HeaderTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="bttnHidden" runat="Server" Style="display: none" />
<br />
<asp:Panel ID="pnlComment" runat="server" Width="650px" Height="620px" Style="display: none;" CssClass="modalBox">
<table border="1" class="commentTable" style="border-collapse: separate; border-spacing: 10px; width:100%; height:100%">
<tr><th><asp:Label ID="lblComments" runat="server" Text="Comments" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtExistingComments" runat="server" TextMode="MultiLine" ReadOnly="True" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox>
</td></tr>
<tr><th><asp:Label ID="lblNewComment" runat="server" Text="Add Comment" Font-Size="Medium"></asp:Label></th></tr>
<tr><td>
<asp:TextBox ID="txtNewComments" runat="server" TextMode="MultiLine" ReadOnly="False" CssClass="content" Rows="12" Font-Names="Trebuchet MS"></asp:TextBox></td></tr>
<tr><td>
<asp:Button ID="btnSave" runat="server" width="100px" Text="Save" OnClick="btnSave_Click" CssClass="btn btn-comment" ValidationGroup="SaveComment" ForeColor="White" Font-Bold="True" />
<asp:Button ID="btnCancel" runat="server" width="100px" Text="Cancel" CssClass="btn btn-comment" ForeColor="White" Font-Bold="True"/></td></tr>
<tr>
<td>
<asp:RequiredFieldValidator ID="rfValidator" runat="server" ErrorMessage="RequiredFieldValidator" ControlToValidate="txtNewComments"
ForeColor="Black" ValidationGroup="SaveComment" Font-Bold="True">You must enter a comment!</asp:RequiredFieldValidator>
</td>
</tr>
</table>
</asp:Panel>
<cc1:ModalPopupExtender ID="modal" runat="server" TargetControlID="bttnHidden" PopupControlID="pnlComment" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"></cc1:ModalPopupExtender>
<br />
<asp:HiddenField ID="Hidden" runat="server" value="-1"/>
<asp:HiddenField ID="bStatus" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" ChildrenAsTriggers="false" UpdateMode="Conditional" DisplayAfter="10">
<ProgressTemplate>
<div class="center">
<asp:Image ID="imgUpdateProgress" runat="server" ImageUrl="~/Images/loader.gif" AlternateText="Please wait ..." ToolTip="Please wait ..." />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</asp:Content>
Any help would be most appreciated!
two points you need to check.
First if you have any javascript errors - this Update Progress is base on javascrip, so any javascript error can stop the function of it. Open the console panel and check for javascript errors...
The second point is to check the DisplayAfter property on UpdateProgress, that is 500 milliseconds default value. If anything happens within this time, the UpdateProgress is not show. So add a lower value on DisplayAfter to check it out.

Dropdown list lost css and update panel trigger can't find control id inside gridview

Style of dropdown in css changes when the page loads. i have tried a number of ways to solve the problem. also i am not able to find dropdownlist id in Update Trigger... any suggestions to help me out...i am stuck at this..thank you in advance...
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="gvDetails" AutoGenerateColumns="False" ShowHeaderWhenEmpty="True"
ForeColor="#333333" GridLines="None" ShowFooter="True" Width="855px">
<Columns>
<asp:BoundField DataField="SNo" HeaderText="S.N." ReadOnly="true" />
<asp:TemplateField Items Detail"
ControlStyle-Width="150px" ItemStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:DropDownList ID="ddlItem" runat="server" ForeColor="Black" Height="35px" CssClass="chzn-select"
Style="width: 210px;" Font-Bold="false" AutoPostBack="true" OnSelectedIndexChanged="ddlItem_SelectedIndexChanged">
</asp:DropDownList>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblTotalText" runat="server" Text="Total :"></asp:Label>
</FooterTemplate>
<ControlStyle Width="150px" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderText="" ControlStyle-Width="0px" Visible="true">
<ItemTemplate>
<asp:TextBox ID="txtMRP" runat="server" Enabled="false" Visible="true" BorderStyle="None"
BackColor="White" />
</ItemTemplate>
<ControlStyle Width="0px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="" ControlStyle-Width="0px" Visible="true">
<ItemTemplate>
<asp:TextBox ID="txtAmount" runat="server" Enabled="false" Visible="true" BorderStyle="None"
BackColor="White" />
</ItemTemplate>
<ControlStyle Width="0px" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlItem" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
<br />
<div style="margin-left: 50px; margin-top: 10px">
</div>
<br />
<asp:Button ID="btnAddSalesOrder" runat="server" Text="Send Inquiry" OnClick="btnAddSalesOrder_Click"
Style="margin-left: 30px; color: White; background-color: #088FCA;" OnClientClick="myClosure();"
class="btn btn-info" />
<asp:Button ID="btnPlaceOrder" runat="server" OnClick="btnPlaceOrder_Click" Text="Place Order"
Style="margin-left: 30px; color: White; background-color: #088FCA;" OnClientClick="myClosure();"
class="btn btn-info" />
<asp:UpdateProgress ID="UpdtProgress" DisplayAfter="1" runat="server" EnableViewState="False">
<ProgressTemplate>
<div style="top: 0px; height: 120%; background-color: White; opacity: 0.75; filter: alpha(opacity=75);
vertical-align: middle; left: 0px; z-index: 999999; width: 120%; position: absolute;
text-align: center;">
<img src="Images/loader.gif">
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
<script type="text/javascript">
$('.chzn-select').select2({
no_results_text: 'Oops, nothing found!',
allowClear: true,
maximumSelectionSize: 1,
width: '130px;'
});

How to make gridview scrollable horizantally and vertically?

I have a gridview inside a div as follows:
<div id="divPopUpFiles" runat="server" style="background-color: White; width: 800px;
height: 410px; position: absolute; border-color: Black; border-style: groove;
border-width: thin; display: none; z-index: 10001;">
<asp:UpdatePanel ID="PopUpPanel" runat="server" Visible="false" UpdateMode="Conditional" ChildrenAsTriggers="true">
<Triggers>
<asp:PostBackTrigger ControlID="btnOk"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="lblModifiedFilesMessage" runat="server" />
<asp:GridView ID="gvPopUpModifiedFiles" runat="server" AutoGenerateColumns="False"
CssClass="dataTable" ShowHeaderWhenEmpty="True" style="overflow: auto; width: 800px; max-height: 200px;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkFileSelect" runat="server" Checked="true" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="FileName" DataField="FileName" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
<asp:Button ID="btnOk" Text="OK" runat="server" Font-Bold="true" onclick="btnOk_Click" /><br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
I used the overflow:auto still I am unable to make my grid scrollable
use this code.
<div style="overflow: auto; width: 800px; max-height: 200px;">
<asp:GridView ID="gvPopUpModifiedFiles" runat="server" AutoGenerateColumns="False"
CssClass="dataTable" ShowHeaderWhenEmpty="True" style="overflow: auto; width: 800px; max-height: 200px;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkFileSelect" runat="server" Checked="true" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="FileName" DataField="FileName" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>

Ajax updateProgress does not show progress for the right UpdatePannel

I have an Ajax panel first panel inside another panel second panel and an updateProgress linked to the first panel
With this I have two problems:
The updateProgress show the progress image when the second panel updates but not when the first panel updates
To update the 2nd panel I have to press the button inside the second panel twice
<asp:UpdateProgress ID="UProc_TabContainer" runat="server" AssociatedUpdatePanelID="UP_FirstPanel"
DisplayAfter="1">
<ProgressTemplate>
<div id="dvProgress" runat="server" style="position: absolute; top: 300px; left: 450px;
text-align: center;">
<asp:Image ID="wait" runat="server" ImageUrl="~/Images/wait3.gif" Height="120px"
Width="128px" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UP_FirstPanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<script language="javascript" type="text/javascript">
function divexpandcollapse(divname) {
var div = document.getElementById(divname);
var img = document.getElementById('img' + divname);
if (div.style.display == "none") {
div.style.display = "block"; img.src = "Images/Icons/minus.jpg";
} else { div.style.display = "none"; img.src = "Images/Icons/plus.jpg"; }
}</script>
<asp:DropDownList ID="DateSelection" runat="server" AutoPostBack="True" Height="21px"
Width="134px">
</asp:DropDownList>
<asp:GridView ID="GV_SL" runat="server" OnRowDataBound="gvUserInfo_RowDataBound"
OnRowCommand="GV_SL_RowCommand" AutoGenerateColumns="false" DataSourceID="SQL_Weekly">
<Columns>
<asp:TemplateField ItemStyle-Width="50px">
<ItemTemplate>
<a href="JavaScript:divexpandcollapse('div<%# Eval("name") %>');">
<img id="imgdiv<%# Eval("name") %>" width="15px" border="0" src="Images/Icons/plus.jpg" /></a></ItemTemplate>
<ItemStyle Width="40px" />
</asp:TemplateField>
<asp:BoundField DataField="name" HeaderText="Group" SortExpression="name" />
<asp:BoundField DataField="ASL" HeaderText="SL% Act" ReadOnly="True" SortExpression="ASL" />
<asp:TemplateField>
<ItemTemplate>
<tr>
<td colspan="100%">
<div id="div<%# Eval("name") %>" style="display: none; position: relative; left: 15px;
overflow: auto">
<asp:GridView ID="gvChildGrid" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Metric" HeaderText=" " HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Actual" HeaderText="Actual" HeaderStyle-HorizontalAlign="Left" />
</Columns>
</asp:GridView>
<br />
<asp:UpdatePanel ID="UP_SecondPanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<%-- --%>
<asp:TextBox ID="TB_Comments" runat="server" Text="Example: Text will be entered here"
TextMode="MultiLine" Rows="4" Width="510px"></asp:TextBox>
<asp:Button ID="B_Save" runat="server" CommandName="AddText" CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="Save Changes" />
</ContentTemplate>
</asp:UpdatePanel>
<%-- --%>
</div>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DateSelection" EventName="SelectedIndexChanged" />
</Triggers>
Any ideas on what I'm doing wrong?
Thanks
I have resolved the 1st problem presented by removing AssociatedUpdatePanelID="UP_FirstPanel" from the UpdateProgress. I hope it helps someone
I've created a separate posting with further detail and simplified code for the second problem (Nested Ajax UpdatePanel in Gridview needs button control to be clicked twice)

Button Outside Gridview not firing once click on Edit button of gridview

I have a gridview and i have two buttons edit and delete.Once i click on edit button, i take the values and put those in textboxes outside grid and visible update and cancel button. but that does not fires..
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="pnladdproduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label11" runat="server" AssociatedControlID="btnAddProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnAddProduct" ValidationGroup="grpProduct" runat="server" CssClass="mws-button red" Text="Add" OnClick="btnAddProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlUpdateProduct" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label12" runat="server" AssociatedControlID="btnUpdateProduct"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnUpdateProduct" runat="server" CausesValidation="False" CssClass="mws-button blue" Text="Update" OnClick="btnUpdateProduct_Click" />
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlCancel" runat="server">
<div class="mws-form-col-1-8">
<asp:Label ID="Label13" runat="server" AssociatedControlID="btnCancelUpdate"> </asp:Label>
<div class="mws-form-item large">
<asp:Button ID="btnCancelUpdate" CausesValidation="False" runat="server" CssClass="mws-button gray" Text="Cancel" OnClick="btnCancelUpdate_Click" />
</div>
</div>
</asp:Panel>
<div class="mws-form-col-8-8">
<asp:GridView ID="grdProduct" ShowHeaderWhenEmpty="True" CssClass="mGrid" runat="server" AutoGenerateColumns="False" AllowPaging="True" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt" OnPageIndexChanging="grdProduct_PageIndexChanging" OnRowDeleting="grdProduct_RowDeleting" OnRowEditing="grdProduct_RowEditing">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Product" SortExpression="Product" />
<asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" />
<asp:BoundField DataField="Rate" HeaderText="Rate" SortExpression="Rate" />
<asp:BoundField DataField="Amount" HeaderText="Amount" SortExpression="Amount" />
<asp:ButtonField ButtonType="Image" CommandName="Edit" HeaderText="Edit" ImageUrl="~/css/icons/16/edit.png" ShowHeader="True" Text="Edit" />
<asp:ButtonField ButtonType="Image" CommandName="Delete" HeaderText="Delete" ImageUrl="~/css/icons/16/delete.png" ShowHeader="True" Text="Delete" />
<asp:TemplateField HeaderText="HiddenColumn">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<asp:HiddenField ID="hdfProductID" runat="server" Value='<%# Bind("ProID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
No Products Added !!
</EmptyDataTemplate>
</asp:GridView>
<div class="mws-form-row inline">
<asp:Label ID="Label15" runat="server" AssociatedControlID="txtQuantity">Total Amount</asp:Label>
<div class="mws-form-item medium">
<asp:TextBox ID="txtTotalAmount" BackColor="Beige" BorderColor="red" ReadOnly="True" CssClass="mws-textinput" runat="server"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdateProduct" EventName="Click"/>
<asp:PostBackTrigger ControlID="btnCancelUpdate" />
</Triggers>
</asp:UpdatePanel>
Server side Code..
protected void grdProduct_RowEditing(object sender, GridViewEditEventArgs e)
{
Session["proID"] = StepGetHiddenValuesFromGridControl(e.NewEditIndex);
txtQuantity.Text = grdProduct.Rows[e.NewEditIndex].Cells[1].Text;
txtRate.Text = grdProduct.Rows[e.NewEditIndex].Cells[2].Text;
txtAmount.Text = grdProduct.Rows[e.NewEditIndex].Cells[3].Text;
txtQuantity.BackColor = Color.Beige;
txtRate.BackColor = Color.Beige;
txtAmount.BackColor = Color.Beige;
//pnladdproduct.Visible = false;
//pnlUpdateProduct.Visible = true;
//pnlCancel.Visible = true;
}
protected void btnUpdateProduct_Click(object sender, EventArgs e)
{
// this code not firing
}
I don't think there's a need for triggers.

Resources