Develop Reference

Asp panel visible setting not changing

I'm trying to change the visible setting of a panel with a button click. I need the second panel become visible when the button at the bottom of first panel is clicked.
<asp:Content ID="Content3" ContentPlaceHolderID="cphContent" runat="Server">
<asp:Panel ID="pnl1" runat="server">
<asp:GridView ID="gv1" runat="server" AutoGenerateColumns="False" CellPadding="0"
AllowSorting="True" CssClass="grid" Visible="true">
<Columns>
//gv1 columns here
</Columns>
</asp:GridView>
<asp:Button ID="btnModAdd" class="btn btn-primary" runat="server" Text="Ekle" OnClick="btnModAdd_Click">
</asp:Button>
<br />
<div class="dataTables_paginate" id="example_info">
<uc1:PagingControl ID="pcBottom" runat="server" PagingPosition="Top" />
</div>
</asp:Panel>
<br />
<asp:Panel ID="pnl2" runat="server" Visible="false">
<asp:GridView ID="gv2" runat="server" AutoGenerateColumns="False" CellPadding="0"
AllowSorting="True" CssClass="grid" Visible="true">
<Columns>
//gv2 columns here..
</Columns>
</asp:GridView>
</asp:Panel>
And this is C# code of the button, quite simple.
public void btnModAdd_Click(object sender, EventArgs e)
{
pnl2.Visible = true;
}
I can't understand what I'm missing to see here...
EDIT: Ok I noticed I missed to add the bind method to pageload. Noob mistake on my part but well, still learning :)

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.

Button click in gridview not firing when inside update panel

<asp:Timer ID="timer1" runat="server" Interval="1000" OnTick="Timer1_Tick" />
<asp:UpdatePanel runat="server" id="pnlUpdate">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="timer1" eventname="Tick"/>
</Triggers>
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="table table-hover table-condensed"
GridLines="None" AllowPaging="true" PageSize="20"
OnPageIndexChanging="GridView1_PageIndexChanging">
<Columns>
<asp:BoundField ItemStyle-Width="50%" DataField="Story" HeaderText="Story"/>
<asp:BoundField ItemStyle-Width="15%" ItemStyle-Wrap="false" DataField="AssignedTo" HeaderText="Assigned To"/>
<asp:BoundField ItemStyle-Width="15%" ItemStyle-Wrap="false" DataField="Status" HeaderText="Status"/>
<asp:BoundField ItemStyle-Width="15%" ItemStyle-Wrap="false" DataField="Started" HeaderText="Started"/>
<asp:BoundField ItemStyle-Width="5%" ItemStyle-Wrap="false" DataField="Updated" HeaderText="Updated"/>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="Buttonid" runat="server" CommandName="ViewItem" Text="View" BorderStyle="None" BackColor="White"
OnClick="Button_click_event"></asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="cursor-pointer" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Button_click_event won't fire when I have update panel, but it works when it is not in the update panel.

your update panel look like
<asp:UpdatePanel ID="upWall" runat="server" ChildrenAsTriggers="true" UpdateMode="conditional">
<ContentTemplate>
....
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Buttonid" EventName="Click"/>
</Triggers>

Try setting UpdateMode="Conditional" and ChildrenAsTriggers="False" to the UpdatePanel..
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" />
</Triggers>
Also remove the EventName attribute for your trigger and try again..

Remove the attribute of button click CommandName="ViewItem"
and then try , if not work also add Property of button UseSubmitBehaviour=true

You could solve this in various ways. One way is on rowdatabound in the code behind adding a control that can handle an onclick event, for example a div, and then add a postback handler to your clickable control:
HtmlGenericControl div = (HtmlGenericControl)e.Row.FindControl("Buttonid");
div.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(GridView1, "Select$" + e.Row.RowIndex.ToString()));
Alternatively, I implemented another workaround that works for me:
place a button outside your gridview, but inside the Updatepanel. Also, add a hiddencontrol, where you are going to store the rowindex clicked. Then Add to your template field a 'clickable div' (in which you can put a label for your text), that calls a javascript. Something like this (you can add a display none style to hide the button).:
<asp:Button id="Buttonid" runat="server" OnClick="Button_click_event" />
<asp:HiddenField ID="hdnRowClicked" runat="server" Value="" />
<itemtemplate>
<div onclick="javascript:rowClicked('<%= Buttonid.ClientID %>','<%= hdnRowClicked.ClientID %>', this);">
<asp:Label ID="lblImgDetail" runat="server" Text="+"></asp:Label>
</div>
</itemtemplate>
Then within the javascript function, set the rowindex and call the button to do the postback:
function rowClicked(btnId, hdnRowSelected, lnk) {
var rowIndex = lnk.parentNode.parentNode.rowIndex - 1;
$('#' + hdnRowSelected).val(rowIndex);
$('#' + btnId).click();
}

Click event for ItemTemplate inside asp:GridView

I have a Gridview with the following markup:
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
I need to have a handler for the Image click event. Is there any easier way to do so?

You can use an Image Button instead of Image. Try this code.
<asp:GridView ID="gdvResxKeyValue" runat="server" Width="100%" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" OnClick="YourEventName" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You just need to specify your server side event name here.

Use an asp button and set its style to be display:none
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="ClickImage(this)" />
.......
<asp:Button ID="hiddenButton" runat="server" OnClick="hiddenButton_Click" style="display:none"></asp:Button>
<script type="text/javascript">
function ClickImage(imageControl)
{
document.getElementById('<%=hiddenButton.ClientID%>').click();
}
</script>
This will raise the server side event of the button and you can do your work there.

Try this:
jquery Solution
<asp:Image ID="imgEditResxValue" CssClass="sfEdit" runat="server" ImageUrl="~/Administrator/Templates/Default/images/imgedit.png" onclick="this.next().click()"/>
<asp:LinkButton Text="text" runat="server" OnClick="call_method"/>

Using GridView inside UpdatePanel

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>