I have a page that loads a data grid. The first column has link buttons with an edit command which calls a modal popup with the focus set on the first field which is either a text box or drop down list.
Now my issue is, when I scroll down on the data grid and select edit, the page scrolls upwards, pushing down the row in the data grid that I selected to edit, just before the modal pops up. The only way to maintain the scroll position is by removing the focus from my modal popup.
Is there any way to set the focus AND maintain the scroll position?
I am using ASP.NET Version 4.5.51650, AJAXControlToolkit Version 15.1.2, VB.NET
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:DataGrid ID="DataGrid" runat="server">
<Columns>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<asp:LinkButton ID="lb_Name" CommandName="Edit" runat=server />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" style="display:none" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" TargetControlID="Button1" PopupControlID="ModalPopupExtender_Panel" runat="server" />
<asp:Panel ID="ModalPopupExtender_Panel" style="display:none" DefaultButton="ModalPopupExtender_Ok" runat="server">
<asp:Table runat="server">
<asp:TableRow>
<asp:TableCell>
<asp:Textbox ID="Textbox1" runat="server" />
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div>
<asp:Button ID="ModalPopupExtender_Ok" Text="Save" runat="server" />
<asp:Button ID="ModalPopupExtender_Cancel" Text="Cancel" runat="server" />
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
Code Behind:
Private Sub BindDataGrid()
'code goes here
UpdatePanel1.Update()
End Sub
Private Sub DataGrid_EditCommand(ByVal source As Object, ByVal e As DataGridCommandEventArgs) Handles DataGrid.EditCommand
'code goes here
UpdatePanel2.Update()
Textbox1.Focus()
ModalPopupExtender.Show()
SetFocus uses javascript function "scrollIntoView" to scroll to the focused field, you can override it using the following code, this will scroll the page only if the field is not in the visible area,
$( document ).ready(function() {
HTMLInputElement.prototype.scrollIntoView = function(a) {
this.scrollIntoViewIfNeeded();
}
HTMLSelectElement.prototype.scrollIntoView = function(a) {
this.scrollIntoViewIfNeeded();
}
HTMLAreaElement.prototype.scrollIntoView = function(a) {
this.scrollIntoViewIfNeeded();
} });
Related
In short: I want to enable a button i.e. outside UpdatePanel when I click on a button from inside UpdatePanel.
Problem: The button enables but tags i and asp:Localize are not showing in the rendered code after button click from UpdatePanel updPnlOfferings
Detail:
I have a DataList inside UpdatePanel which contains delete button for every item in the list. delete button is firing an event on server which deletes the record and disables a button (i.e. outside of the UpdatePanel.
As someone suggested I kept my button(which need to be disabled) in UpdatePanel below
<asp:UpdatePanel ID="updPnlCourse" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:LinkButton>
<asp:ConfirmButtonExtender ID="lnkDeleteCourseDetails_ConfirmButtonExtender" runat="server"
ConfirmText='Are you sure you want to delete this course?' Enabled="True" TargetControlID="lnkDeleteCourseDetails">
</asp:ConfirmButtonExtender>
</ContentTemplate>
</asp:UpdatePanel>
The Main UpdatePanel which is firing the event is below
<asp:UpdatePanel ID="updPnlOfferings" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlDSOfferings" runat="server">
<asp:DataList ID="dtlstOfferings" runat="server" OnItemCommand="dtlstOfferings_ItemCommand" EnableViewState="true">
</asp:DataList></asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
on dtlstOfferings_ItemCommand event I coded this
lnkDeleteCourseDetails.Enabled = true;
lnkDeleteCourseDetails.ToolTip = "";
lnkDeleteCourseDetails_ConfirmButtonExtender.Enabled = true;
updPnlCourse.Update();
This is a known problem as specified in this link.
The solution is to put all your content that are there inside the LinkButton, within a place holder like below, or make all the child controls as server controls.
<asp:LinkButton ID="lnkDeleteCourseDetails" runat="server" OnClick="lnkDeleteCourseDetails_Click">
<asp:PlaceHolder runat="server">
<i class="icon-remove-sign"></i>
<asp:Localize ID="Localize6" runat="server" Text="<%$ Resources:CBLabels, LBL_DeleteDetails %>" />
</asp:PlaceHolder>
</asp:LinkButton>
Working with asp.net, I have a gridview inside an update panel, populated with dynamic user controls (loaded in placeholder1 on rowdatabound). A user enters text in a textbox of the user control, clicks the "confirm" button of the user control, a modal popup displays a "confirmation" message with the user's value of the text box. The button click event of the user control handles setting the modal popup extender control values and shows the popup.
This works as expected when the gridview is not in an update panel/no update panel is used. Once I place the gridview in an update panel, when the modal popup appears, it doesn't show the values that were set in the button click event (I've confirmed the click event is firing, controls are being found, and values are getting set in the event). I must be missing something...and/or don't quite understand the architecture of the update panel and how it behaves with dynamic controls.
[code below has been simplified]
GRIDVIEW
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="gvSaleData" runat="server" DataKeyNames="ItemNumber"
AutoGenerateColumns="False" ShowFooter="True" />
<Columns>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
MODAL POPUP
<asp:modalpopupextender id="mp1" runat="server"
cancelcontrolid="btnCancel"
targetcontrolid="btnShow" popupcontrolid="pnlShow"
popupdraghandlecontrolid="PopupHeader" drag="true"
backgroundcssclass="ModalPopupBG">
</asp:modalpopupextender>
<asp:panel id="pnlShow" style="display:none" runat="server">
<div class="popupcontainer">
<div>Your Value: <asp:Label ID="lblUserValue" runat="server" Text=""></asp:Label></div>
<asp:Button ID="btnConfirm" runat="server" Text="Confirm"
onclick="btnConfirm_Click" CssClass="submit"/>
<asp:Button ID="btnCancel" runat="server" Text="Return"
onclick="btnCancel_Click" CssClass="submit"/>
</div>
</asp:panel>
USER CONTROL CODE BEHIND
protected void btnShowConfirmation_Click(object sender, EventArgs e)
{
AjaxControlToolkit.ModalPopupExtender mp =(AjaxControlToolkit.ModalPopupExtender)Page.FindControl("mp1");
Label lblUserValue = (Label)mp.FindControl("lblUserValue");
lblUserValue.Text = textbox1.Text;
mp.Show();
}
I only came across this question recently, a year after it was asked and am posting a solution in case any one else has the same problem.
The answer is to put the the ModalPopupExtender panel "pnlShow" inside an update panel with an AsycPostBackTrigger added whose ID is btnShowConfirmation.
If btnShowConfirmation is dynamically added it should be added to the UpdatePanel dynamically.
The attached example shows two buttons which raise the modal popup. The trigger reference to btnX is added in the aspx code,the btnY triger is added dynamically as an example.
[Aspx code]
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="TestModalPopup.aspx.vb"
Inherits="USSGAinfo.TestModalPopup" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.modalPopupX
{
background-color: #DDFFDD;
border-width: 2px;
border-style: solid;
border-color: black;
padding-top: 20px;
padding-left: 10px;
width: 400px;
height: 150px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
<!-- Hidden Field -->
<asp:UpdatePanel runat="server" ID="up1" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="OkButton" />
</Triggers>
<ContentTemplate>
<asp:Button runat="server" ID="btnX" Text="X" />
<asp:Button runat="server" ID="btnY" Text="Y" /><br />
<asp:Label runat="server">Confirm:</asp:Label><asp:Label runat="server" ID="lblResult"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:HiddenField ID="hidForModal" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server" TargetControlID="hidForModal"
PopupControlID="pnlTarget" BackgroundCssClass="modalBackground" PopupDragHandleControlID="pnlTarget">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlTarget" Style="display: none" runat="server">
<asp:UpdatePanel runat="server" ID="up2" ChildrenAsTriggers="false" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnX" />
<%-- <asp:AsyncPostBackTrigger ControlID="btnY" />--%>
</Triggers>
<ContentTemplate> <asp:Panel runat="server" ID="Panel1" HorizontalAlign="Center" DefaultButton="OkButton"
CssClass="modalPopupX">
<asp:Table runat="server">
<asp:TableRow runat="server">
<asp:TableCell runat="server" ID="tcResult" HorizontalAlign="Center" Width="400px" Height="20px" BackColor="AntiqueWhite">Button Clicked:
<asp:label runat="server" ID="lblMPEResult"></asp:label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<br />
<asp:Button ID="OkButton" runat="server" Text="Yes" />
<asp:Button ID="CancelButton" runat="server" Text="No" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</form>
</body>
</html>
[Code behind]
Public Class TestModalPopup
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
' Add btnY as trigger for ModalPopoup update panel
Dim trigger As New AsyncPostBackTrigger
trigger.ControlID = "btnY"
trigger.EventName = "Click"
up2.Triggers.Add(trigger)
End Sub
Private Sub btnX_Click(sender As Object, e As System.EventArgs) Handles btnX.Click
' Put button dependent info into ModalPopup and then show
lblMPEResult.Text = "XXX"
MPE.Show()
End Sub
Private Sub btnY_Click(sender As Object, e As System.EventArgs) Handles btnY.Click
' Put button dependent info into ModalPopup and then show
lblMPEResult.Text = "YYY"
MPE.Show()
End Sub
Private Sub OkButton_Click(sender As Object, e As System.EventArgs) Handles OkButton.Click
' Show that OK button was pressed and also information derived from the ModalPopup
lblResult.Text = lblMPEResult.Text
MPE.Hide()
End Sub
Private Sub CancelButton_Click(sender As Object, e As System.EventArgs) Handles CancelButton.Click
MPE.Hide()
End Sub
End Class
<asp:Button ID="newbutton" runat="server" Text="Click" onsubmit="button_click" OnClick="button_click" />
I have this button in update panel and i want it to work on enter not only onclick it works in google chrome , but not in ie what should I do?
On the panel set the default button to the id of the button
<asp:Panel runat="server" id="examplePanel" DefaultButton="newbutton">
Set the default button for update panel with the Id of this button
Sample:
<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="pTest" DefaultButton="newbutton">
<asp:Button ID="newbutton" runat="server" Text="Click" onsubmit="button_click" OnClick="button_click" />
ASP:Button cannot work with enter because it has OnClick. To react on enter properly you should use ASP:Panel with DefaultButton property. You need to have focus on control inside asp:Panel for example TextBox
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" DefaultButton="newbutton">
<asp:TextBox ID="TxtUserLogin" runat="server" TabIndex="1" Text="login" />
<asp:Button ID="newbutton" runat="server" Text="Click" OnClick="button_click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have a repeater and the items are editable through an edit button which opens a FormView in edit mode. The formView is initially invisible and the repeater visible. Once edit is pressed the repeater goes invisible then the formview becomes visible with the item to edit.
Once changes have been made the user presses update. This sets the formview invisible and the repeater visible.
The problem is the formview goes invisible but the repeater doesn't become visible. This I think is caused by the fact the formview is within an update panel and the repeater isn't? Only the items in the update panel are being altered on clicking update because it is only a partial page update.
I can't put the repeater within the update panel because there is a requirement that the public view doesn't use javascript.
Does anyone know how I could make the repeater reappear?
<asp:Repeater id="resultsRepeater" runat="server" DataSourceID="vehiclesDataSource" >
<ItemTemplate>
<asp:Label id="makeLabel" runat="server" Text='<%# Eval("Make") %>' />
<asp:Button id="editButton" runat="server" Text="Edit" CommandArgument='<%# Eval("Id") %>' OnClick="EditButton_Click" />
</ItemTemplate>
<asp:Repeater>
<asp:UpdatePanel ID="updatePanel" runat="server">
<ContentTemplate>
<asp:Panel id="insertUpdatePanel" runat="server" Visible="false">
<asp:FormView id="editformview" runat="server" DataKeyNames="Id" Datasourceid="VehiclesEditDataSource" >
<EditItemTemplate>
<uc:VehiclesEdit ID="VehiclesEdit" runat="server" />
<asp:Button id="updateButton" runat="server" OnClick="Update_Click" />
</EditItemTemplate>
</asp:FormView>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
protected void EditButton_Click(object sender, EventArgs e)
{
resultsRepeater.Visible = false;
insertUpdatePanel.Visible = true;
}
protected void Update_Click(object sender, EventArgs e)
{
resultsRepeater.Visible = true;
insertUpdatePanel.Visible = false;
}
This might help. I had a similar problem and this worked for me. I simply used ScriptManager to register the button (even iterated by row) as a postback control like this:
ScriptManager.GetCurrent(Page).RegisterPostBackControl(updateButton)
This caused a full postback and allowed me to set the visibility of a panel outside the update panel. I hope it works!
REVISED: Add a PostBackTrigger to your UpdatePanel to force a full post-back when your UpdateButton is clicked. This will hide your UpdatePanel and reveal your Repeater again. See final code below:
For more info refer to: https://stackoverflow.com/questions/2545508/how-do-i-force-full-post-back-from-a-button-within-an-updatepanel
<asp:UpdatePanel ID="updatePanel1" runat="server">
<Triggers>
<asp:PostBackTrigger ControlID="updateButton" />
</Triggers>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Visible="false">
<asp:FormView ID="editformview" runat="server" DataKeyNames="Id" DataSourceID="VehiclesEditDataSource">
<EditItemTemplate>
<uc:vehiclesedit id="VehiclesEdit" runat="server" />
</EditItemTemplate>
</asp:FormView>
<asp:Button ID="updateButton" runat="server" OnClick="Update_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
I have UserControl and within that control i have asp:ListView. Inside the ListView i have a asp:LinkButton. When i click on the LinkButton the control raises full postback, no matter if the UserControl is inside UpdatePanel or is not.
UserControl:
<asp:ListView ID="lvImages" runat="server" OnItemCommand="lvImages_ItemCommand">
<ItemTemplate>
<div>
<asp:Image runat="server" ID="imgImageThumb" ImageUrl='<%#Eval("Image") %>' GenerateEmptyAlternateText="true" />
<asp:LinkButton runat="server" ID="lbtnImageAdd" CommandName="Add" CommandArgument='<%#Container.DisplayIndex %>'
CausesValidation="false" Text="Add" />
</div>
<ItemTemplate>
</asp:ListView>
Page:
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<cuc:UserControl ID="cucUserControl" runat=server/>
</ContentTemplate>
</asp:UpdatePanel>
You need to set the properties to let the update panel know what to trigger off of. Try setting ChildrenAsTrigger=true.