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

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. :)

Related

Update Progress not working inside Gridview in Asp.Net

I want to show PreLoader on button click inside Gridview.
But it is not working as expected .
<asp:GridView ID="gv_deparment" runat="server" AutoGenerateColumns="false" OnRowCommand="gvPurchaseInvoiceEntry_RowCommand"
AllowSorting="True" AllowPaging="True" OnPageIndexChanging="gv_deparment_PageIndexChanging" OnSorting="gv_deparment_Sorting"
HeaderStyle-Font-Bold="false" CssClass="gvstyling gridview_width_100" ShowHeaderWhenEmpty="true" EmptyDataText="Record(s) Not Found!">
<Columns>
<asp:BoundField
DataField="department"
HeaderText="Department"
SortExpression="department" />
<asp:TemplateField HeaderText="Status" ItemStyle-Width="10">
<ItemTemplate>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:LinkButton ID="btnUpdate" runat="server" CommandName="cmdUpdate"><i class="fa fa-edit"></i> Update </asp:LinkButton>
<asp:HiddenField ID="hf_departmnt" Value='<%# Eval("department_id")%>' runat="server" />
<asp:CheckBox ID="ck_departmnt" OnCheckedChanged="ck_departmnt_CheckedChanged" AutoPostBack="true" runat="server" Checked='<%# Eval("isactive") %>' />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnUpdate" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Update Message" ItemStyle-Width="200">
<ItemTemplate>
<asp:UpdateProgress ID="UpdateProgressdf1" runat="server" ClientIDMode="AutoID" Visible="true">
<ProgressTemplate>
<img src="../img/spinner-mini.gif" />
Please Wait...
</ProgressTemplate>
</asp:UpdateProgress>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is the problem that I am facing.
On single button click, only preloader besides the button should be display.
Here is the Image
But unfortunately all the preloader are displaying on single button click.
Any help will be appreciated
I think cause is you are not setting AssociatedUpdatePanelID . This link might help http://msdn.microsoft.com/en-us/library/bb386421%28v=vs.100%29.aspx

Conflicts between multiple gridviews

I have multiple gridviews on one page. For each gridview, there are two ways to insert a new record. One is through FooterTemplate of a TemplateField when the gridview has data and the other through EmptyDataTemplate when the gridview is empty.
By itself, the inserts work well. However, if another gridview is empty, then by default, the insert portion in its EmptyDataTemplate is displayed. When this is displayed, I can't get the FooterTemplate of another gridview to display. That portion is inaccessible until I get rid of the EmptyDataTemplate by forcing an insert.
<asp:Button ID="btnAddNewDomSoilType" runat="server" Text="Add new record" CssClass="btnNewRecord" OnClick="addNewDomSoilType" />
<asp:GridView ID="gvDomSoilType" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataSourceID="dsDomSoilType" CssClass="data"
AllowSorting="True" onrowcommand="gvDomSoilType_RowCommand" DataKeyNames="HabitatObsSubstrateID, HabitatObservationID, SubstrateID" >
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"
OnClientClick="return confirm('Are you sure?');"
AlternateText="Delete" ForeColor="Blue"></asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnInsertSubmit" runat="server" Text="Submit" CommandName="SubmitInsert" CssClass="btnInsertSEID" />
<asp:Button ID="btnInsertCancel" runat="server" Text="Cancel" CommandName="CancelInsert" CssClass="btnInsertSEID" CausesValidation="false" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Substrate" SortExpression="Substrate">
<FooterTemplate>
<asp:DropDownList ID="ddlSoilType" runat="server"
DataSourceID="dsDomSoilType_Insert" DataTextField="Description"
DataValueField="Value" AppendDataBoundItems="true">
<asp:ListItem Text="" Value="" Selected="True"></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Substrate") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="Label4" runat="server" Text="Substrate: " CssClass="insertLabel"></asp:Label>
<asp:DropDownList ID="ddlSoilType2" runat="server"
DataSourceID="dsDomSoilType_Insert" DataTextField="Description"
DataValueField="Value" AppendDataBoundItems="true">
<asp:ListItem Text="" Value="" Selected="True"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btnInsertEmpty" runat="Server" Text="Insert" CommandName="EmptyInsert" UseSubmitBehavior="False" />
</EmptyDataTemplate>
</asp:GridView>
<asp:Button ID="btnAddNewVegCover" runat="server" Text="Add new record" CssClass="btnNewRecord" OnClick="addNewVegCover" />
<asp:GridView ID="gvVegCover" runat="server" AllowPaging="True"
AutoGenerateColumns="False" DataSourceID="dsVegCover" CssClass="data"
AllowSorting="True" onrowcommand="gvVegCover_RowCommand" DataKeyNames="HabitatObsVegID">
<Columns>
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False"
CommandName="Delete" Text="Delete"
OnClientClick="return confirm('Are you sure?');"
AlternateText="Delete" ForeColor="Blue"></asp:LinkButton>
</ItemTemplate>
<FooterTemplate>
<asp:Button ID="btnInsertSubmit" runat="server" Text="Submit" CommandName="SubmitInsert" CssClass="btnInsertSEID" />
<asp:Button ID="btnInsertCancel" runat="server" Text="Cancel" CommandName="CancelInsert" CssClass="btnInsertSEID" CausesValidation="false" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="HabitatVegetationType" SortExpression="HabitatVegetationType">
<FooterTemplate>
<asp:DropDownList ID="ddlVegType" runat="server"
DataSourceID="dsVegType_Insert" DataTextField="Description"
DataValueField="Value" AppendDataBoundItems="true">
<asp:ListItem Text="" Value="" Selected="True"></asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblVegType" runat="server" Text='<%# Bind("HabitatVegetationType") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="VegetationTypePercent" SortExpression="VegetationTypePercent">
<FooterTemplate>
<asp:TextBox ID="txtVegTypePercent" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblVegTypePercentage" runat="server" Text='<%# Bind("VegetationTypePercent") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="Label2" runat="server" Text="Vegetation Type:" CssClass="insertLabel"></asp:Label>
<asp:DropDownList ID="ddlVegType2" runat="server"
DataSourceID="dsVegType_Insert" DataTextField="Description"
DataValueField="Value" AppendDataBoundItems="true">
<asp:ListItem Text="" Value="" Selected="True"></asp:ListItem>
</asp:DropDownList>
<asp:Label ID="Label5" runat="server" Text="Percenttage:" CssClass="insertLabel"></asp:Label>
<asp:TextBox ID="txtVegTypePercent2" runat="server"></asp:TextBox>
<asp:Button ID="btnInsertEmpty" runat="Server" Text="Insert" CommandName="EmptyInsert" UseSubmitBehavior="False" />
</EmptyDataTemplate>
</asp:GridView>
Code behind:
protected void addNewDomSoilType(object sender, EventArgs e)
{
gvDomSoilType.ShowFooter = true;
}
protected void addNewVegCover(object sender, EventArgs e)
{
gvVegCover.ShowFooter = true;
}
I know my explanation is a bit confusing. Let me know what doesn't make sense and I'll try to clarify. Thanks for looking.
These two gridviews shouldn't impact each other. I think it might be the PostBack that is messing up the state of the webpage. On the PageLoad do Page.IsPostBack false and then populate the data. Make sure the events are hooked up to the right GridView.

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.

Adding a JavaScript confirmation prompt to a delete command button in an ASP.NET grid view?

So I have an ASP.NET grid view:
<asp:GridView ID="gvReferences" runat="server" AutoGenerateColumns="False" ShowHeader="False"
OnRowEditing="gvReferences_RowEditing"
OnRowDeleting="gvReferences_RowDeleting" onrowcreated="gvReferences_RowCreated">
<Columns>
<asp:TemplateField ItemStyle-Width="400px">
<ItemTemplate>
<asp:Label ID="lblId" Visible="false" runat="server" Text='<%# Eval("Id") %>' />
<asp:Label ID="lblAssociatedSpecies" runat="server" Text='<%# Eval("Text") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblKind" runat="server" Text='<%# Eval("Kind") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Button" DeleteText="delete" ShowDeleteButton="True"
ShowCancelButton="False" EditText="edit" ShowEditButton="True">
<ControlStyle Width="60px" />
</asp:CommandField>
</Columns>
</asp:GridView>
I'd like to attach some JavaScript to the Delete command button to ask for confirmation before a row is deleted.
Any ideas?
You could always use a TemplateField rather than the CommandField.
<asp:TemplateField>
<ItemTemplate>
<asp:Button name="btnDelete" commandName="Delete" OnClientClick="return confirm('Delete
this Item');" Text="Delete" runat="server" />
<asp:Button name="btnEdit" commandName="Edit" Text="Edit" runat="server" />
</ItemTemplate>
</asp:TemplateField>
When I've done this I've used a Template Field with the ConfirmButtonExtender from the Ajax Control Toolkit.
<asp:TemplateField>
<ItemTemplate>
<asp:Button name="DeleteButton" commandName="Delete" Text="Delete" runat="server" />
<ajaxToolkit:ConfirmButtonExtender TargetControlId="DeleteButton" ConfirmText="Delete this entry?" />
</ItemTemplate>
</asp:TemplateField>
This is a javascript for delete confirmation.
function not_check1()
{
var where_to1= confirm("Do you really want to delete this record??");
if (where_to1 == true)
{
return true;
}
else
{
return false;
}
}
This is a gridview field from where you call the javascript.
<asp:TemplateColumn ItemStyle-Width="20" >
<ItemTemplate>
<asp:ImageButton ID="ib_delete" runat="server" ImageUrl="~/image/images.jpg" commandName="Delete" OnClientClick="return not_check1();" ImageAlign="Middle"/></ItemTemplate>
</asp:TemplateColumn>
In RowDataBound add -
LinkButton objDelete = e.Row.Cells[0].Controls[0] as LinkButton;
objDelete.Attributes.Add("onclick", "javascript:return confirm('Do you want to delete this item?');");

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?

Categories

Resources