Develop Reference

How to avoid having to double click when inside of a UpdatePanel?

I'm making a CRUD with a GridView, but when i try to edit a row when using an UpdatePanel i have to double click it so it works instead of clicking it just once, but also when i double click it it causes my validators to show and also a postback(which i don't want). like this:
This is the design code of the button:
<asp:TemplateField>
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ImageButton ID="btnEdit" CausesValidation="false" CssClass="btnOPTIONS" runat="server" ImageUrl="~/imgBTN/edit.png" Width="30px" Height="30px" ToolTip="Edit" CommandName="Edit" />
<asp:ImageButton ID="btnDelete" CausesValidation="false" runat="server" ImageUrl="~/imgBTN/delete.png" Width="30px" Height="30px" ToolTip="Delete" CommandName="Delete" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnDelete" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
<EditItemTemplate>
<asp:ImageButton ID="btnUpdate" CausesValidation="false" CssClass="btnOPTIONS" runat="server" ImageUrl="~/imgBTN/save.png" Width="30px" Height="30px" ToolTip="Update" CommandName="Update" />
<asp:ImageButton ID="btnCancel" CausesValidation="false" runat="server" ImageUrl="~/imgBTN/cancel.png" Width="30px" Height="30px" ToolTip="Cancel" CommandName="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
EDIT:My question is looking for a slighlty different answer as i've already tried the answer from How to use update panel on button click asp. i want my button not having to double click so it doesn't do a postback & activates the validators.

I managed to fix this issue by using a "nesting trick" and moving the UpdatePanel to the EditItemTemplate, Now it looks like this and works perfectly:
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:GridView EmptyDataText="No hay registros en la base de datos!" ID="gvImages" runat="server" DataKeyNames="idcountry" AutoGenerateColumns="false" Height="300px" OnRowEditing="gvImages_RowEditing"
OnRowCancelingEdit="gvImages_RowCancelingEdit" OnRowUpdating="gvImages_RowUpdating" OnRowDeleting="gvImages_RowDeleting" AllowPaging="true" OnPreRender="gvImages_PreRender" PageSize="6"
OnPageIndexChanging="gvImages_PageIndexChanging">
<Columns>
<asp:BoundField DataField="idcountry" HeaderText="ID" ReadOnly="true" />
<asp:TemplateField HeaderText="Relacion">...</asp:TemplateField>
<asp:TemplateField HeaderText="Nombre">...</asp:TemplateField>
<asp:TemplateField>...</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>2ImageButtons...blah,blah</ItemTemplate>
<EditItemTemplate>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:ImageButton ID="btnUpdate" CausesValidation="false" CssClass="btnOPTIONS" runat="server" ImageUrl="~/imgBTN/save.png" Width="30px" Height="30px" ToolTip="Update" CommandName="Update" />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnUpdate" />
</Triggers>
</asp:UpdatePanel>
<asp:ImageButton ID="btnCancel" CausesValidation="false" runat="server" ImageUrl="~/imgBTN/cancel.png" Width="30px" Height="30px" ToolTip="Cancel" CommandName="Cancel" />
</EditItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Thank you for your patience and good will. :)

ajax calendar not displaying in child gridview

Ajax Calendar not displaying in child GridView
<asp:GridView ID="GVCollapse" runat="server">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="Show_Hide_ChildGrid" ImageUrl="~/images/plus.png" CommandArgument="Show" Height="20" Width="20" />
<asp:Panel ID="pnlOrders" runat="server" Style="display: none;">
<asp:GridView ID="gvOrders" runat="server">
<asp:TemplateField HeaderText="Dispatch Date">
<ItemTemplate>
<asp:TextBox Width="90px" ID="txtDispatchDate" runat="server" Text=""></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" Format="dd/MM/yyyy"
PopupButtonID="txtDispatchDate" TargetControlID="txtDispatchDate">
</ajaxToolkit:CalendarExtender>
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Ajax Calendar is not working in child gridview whereas I did the same thing with parent gridview then it's working well
is Ajax calendar not working with child gridview?? or I did any mistake. I posted my design code

Button click not working inside gridview inside updatepanel

I have a div that has a gridview inside an updatepanel, that I use bootbox.js to show modal.
Inside the gridview is an itemtemplate with an asp.net button "Button1" which I need to click to edit the row after modalpopup but this doesnt fire
Please what am I missing
<div id="userForm" class="form-horizontal" style="display:none;width:100%;border:solid 0px;" >
<input ID="btnshowRun" type="button" Value="Show Leave" class="btn btn-warning " style="float:lefts;" OnClick ="showhide();"/>
<asp:UpdatePanel ID="UpdatePanel5" runat="server" style="display:none;">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AllowSorting="False"
AutoGenerateColumns="False" DataKeyNames="EntryID"
EmptyDataText="There are no data records to display."
ShowFooter="False" HorizontalAlign="Center" OnRowCommand="gvl_RowCommand"
ShowHeaderWhenEmpty="True" CssClass="table table-striped table-bordered table-hover table-responsive table-condenseds " Width="100%" GridLines="None">
<Columns>
<asp:TemplateField HeaderText="Total" SortExpression="Total">
<EditItemTemplate>
<asp:TextBox ID="tot" runat="server" Text='<%# Bind("Total") %>' class="form-control"></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label4" runat="server" Text='<%# Bind("Total") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField ShowHeader="False">
<EditItemTemplate>
<asp:LinkButton ID="CommandButton" runat="server" CommandArgument='<%# Eval("EntryID") %>' UseSubmitBehaviour=true CausesValidation="False"
CommandName="Update" OnCommand="Updates_Command" Text="Update" class="btn btn-primary btn-sm contrl" Style="margin-right: 10px;"
/>
<asp:LinkButton ID="Button2" runat="server" CausesValidation="False" CommandName="Cancel" class="btn btn-warning btn-sm contrl" Style="margin-right: 10px;"
Text="Cancel" />
</EditItemTemplate>
<ItemTemplate>
<asp:LinkButton ID="Button1" runat="server" CommandArgument='<%# Eval("EntryID") %>' class="form-control btn btn-default btn-blocks contrl btn-sms"
CommandName="Edit" OnCommand="Button1_Command" Text="Edit" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle HorizontalAlign="Center" Font-Bold="True" ForeColor="Black"></HeaderStyle>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>

The problem with modals is that they usually place the contents outside of the <form> tag. And then the Buttons do not work anymore.
Replace the Buttons with LinkButtons. They perform a PostBack with JavaScript and will work from a Modal.

I wasnt handling rowediting event hence I was getting an error when I checked the developer view in firefox.Now it fires for me to edit but its after the second click of the link button before it enables the editing.Any ideas?

GridView paging in UpdatePanel

I have an UpdatePanel and a GridView within it. I have a problem with paging: when I press Next button, grdUsers_PageIndexChanging() is not called, so the page stays 1, and if previously I changed selection in ddlPageSize, now it goes back to the initial selection.
Also, if I am on the first page, the Previous button is not disabled, and pressing it causes Out Of Range error.
What am I doing wrong?
Thanks.
<asp:UpdatePanel ID="upnlUsers" runat="server" ChildrenAsTriggers="true" UpdateMode="Always" >
<ContentTemplate>
<div style="height:400px; width:1500px; overflow:auto;">
<asp:GridView ID="grdUsers" runat="server" AllowPaging="True" ShowHeader="false" ShowFooter="true"
AutoGenerateColumns="false" CssClass="largegridview largegridview_td"
Width="1480px" Height="100%" PageSize="100" DataKeyNames="ID" EnableSortingAndPagingCallbacks="false"
onpageindexchanging="grdUsers_PageIndexChanging"
onrowdatabound="grdUsers_RowDataBound">
<AlternatingRowStyle CssClass="alternatingrowstyle" />
<Columns>
<asp:TemplateField HeaderText="User Name" SortExpression="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name" SortExpression="LastName">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%# Eval("LastName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name" SortExpression="FirstName">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Eval("FirstName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Email" SortExpression="Email">
<ItemTemplate>
<asp:Label ID="lblEmail" runat="server" Text='<%# Eval("Email") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pagerstyle" />
<PagerTemplate>
<asp:Label ID="Label1" runat="server" Text="Show rows:" />
<asp:DropDownList ID="ddlPageSize" runat="server" AutoPostBack="true"
OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged">
<asp:ListItem Value="20" />
<asp:ListItem Value="50" />
<asp:ListItem Value="100" />
</asp:DropDownList>
Page
<asp:TextBox ID="txtGoToPage" runat="server" AutoPostBack="true"
OnTextChanged="GoToPage_TextChanged" CssClass="gotopage" />
of
<asp:Label ID="lblTotalNumberOfPages" runat="server" />
<asp:Button ID="btnPrev" runat="server" CommandName="Page"
ToolTip="Previous Page" CommandArgument="Prev" CssClass="previous" />
<asp:Button ID="btnNext" runat="server" CommandName="Page" ToolTip="Next Page"
CommandArgument="Next" CssClass="next" />
</PagerTemplate>
</asp:GridView>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Agreed, I tested the code, and grdUsers_PageIndexChanging() is called on mine.

Dear Friend
their is in build paging in the gridview if you want your own paging style then you have to implement your own paging through PageDataSource Class.
Click to view code
this link provide you how to implement the paging in the Datalist and Repeater through same way you will implement the paging in grid view .
Then no pageindex change event will fired in the gridview.

I don't think you are doing anything wrong; it may not actually fire the PageIndexChanged event, it probably fires the RowCommand event. Attach to the ItemCommand event and that will receive the event.
HTH.

Usercontrols which don't trigger events for visitors

This UpdatePanel is contained by an UserControl. When the LinkButton is pressed arow should be added in another GridView. When an user is logged in this control is working well.
The problems appears when an user is not logged in and try to push that button. No event triggers.
Someone suggested me to give a permission for accessing this control in web.config. That didn't work.
Anyone has another idea?
<asp:UpdatePanel runat="server" UpdateMode="Conditional" EnableViewState="true" ID="IngredientsUpdatePanel">
<ContentTemplate>
<asp:ObjectDataSource ID="sourceIngredients" runat="server" SelectMethod="GetAll">
</asp:ObjectDataSource>
<asp:GridView ID="Ingredients" AllowPaging="true" runat="server" DataKeyNames="IngredientId"
EnableViewState="true" DataSourceID="sourceIngredients" PageSize="5"
AutoGenerateColumns="false" HorizontalAlign="Center" OnSelectedIndexChanged="Ingredients_SelectedIndexChanged">
<RowStyle HorizontalAlign="Center" />
<HeaderStyle Font-Bold="true" ForeColor="Black" />
<Columns>
<asp:TemplateField HeaderText="Ingrediente" ItemStyle-Font-Size="10">
<ItemTemplate>
<asp:Label ID="lblId" Text='<%# Bind("IngredientId") %>' Visible="false" runat="server"/>
<asp:Label ID="lblPrice" Text='<%# Bind("Price") %>' Visible="false" runat="server"/>
<asp:Label ID="lblDescr" Text='<%# Bind("Description") %>' Visible="false" runat="server"/>
<asp:Label ID="lblName" Text='<%# Bind("Name") %>' Visible="false" runat="server"/>
<asp:Label ID="lblPict" Text='<%# Bind("Picture") %>' Visible="false" runat="server"/>
<div style="text-align:left;">
<img id="img" style="float:right;" src='<%# Eval("Picture") %>'
height="75" runat="server" alt="Picture" />
<b>
<%# Eval("Name") %>
</b>
<br />
<br />
Price: <b><%# Eval("Price") %></b>
<br />
<br />
<br />
</div>
<hr />
<div style="text-align:left;">
<b>Description</b>
</div>
<div style="width:300px;">
<%# Eval("Description") %>
</div>
<br />
<asp:LinkButton Enabled="true" runat="server" Text="Add" CommandName="Select" ID="cmdAdd" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>

I solved the problem in a tricky way.
I deleted the LinkButton and before TemplateField I put a ButtonField and all is working fine.
Now the code looks like:
<Columns>
<asp:ButtonField Text="Add" CommandName="Select" />
<asp:TemplateField>
......
</asp:TemplateField>
</Columns>
Still I'm not understanding why the control had that behavior.

Don't forget to give the webresource.axd enough rights in the web.config?