I have an asp.net website in which I'm using an AJAX TabContainer. Within this container I have one TabPanel. Inside this panel I want to have a close button which would, upon clicking, close (visible=false) this panel.
Sample:
<cc1:TabContainer ID="tbcMain" runat="server" Width="100%" ActiveTabIndex="0" CssClass="Tab">
<cc1:TabPanel ID="tbp1" runat="server" Visible="false">
<HeaderTemplate>
<asp:Label ID="lbl_tbp1_Title" runat="server"></asp:Label>
<asp:ImageButton ID="imb_tbp1_Close" runat="server" ImageUrl="~/Images/cross.png" />
</HeaderTemplate>
<ContentTemplate>
some content
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
The button imb_tbp1_Close does not cause a postback. I belive it's something with the whole region of HeaderTamplate being clickable and thus my button stays behind (like a z-index of sorts).
How can I make my button receive the click and cause a postback?
Edit, the solution I'm using now:
Firstly I could use an actual button event in the code-behind but ImageButton control does not have the property UseSubmitBehavior to set it false. So I handle the event in my Page_Load.
<cc1:TabPanel ID="tbpCust_1" runat="server" Visible="false">
<HeaderTemplate>
<asp:Label ID="lbl_UC_CUSTO_1_Title" runat="server"></asp:Label>
<asp:ImageButton ID="imb_CUSTO_Close_1" runat="server" ImageUrl="~/Images/cross.png" OnClientClick="javascript:__doPostBack('imb_CUSTO_Close_1', '0')" />
</HeaderTemplate>
<ContentTemplate>
<ucCUSTO:UC_CUSTO ID="UC_CUSTO_1" runat="server" />
</ContentTemplate>
</cc1:TabPanel>
and in the code-behind:
Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim evtTarg As String = Request.Form("__EVENTTARGET")
Dim evtArg As String = Request.Form("__EVENTARGUMENT")
If evtTarg = "imb_CUSTO_Close_1" Then
UC_CUSTO_1.clear_fields()
tbcStranke.Tabs(0).Visible = False
ElseIf evtTarg = "imb_CUSTO_Close_2" Then
UC_CUSTO_2.clear_fields()
tbcStranke.Tabs(1).Visible = False
End If
End Sub
Related
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();
} });
It is a strange problem. I am setting the pagesize of gridview in dropdownlist selectedindexchanged which is i gridview pager template. Here is my html source
<PagerTemplate>
<div class="grid-footer">
<div class="gridfooter_size"> <asp:DropDownList ID="pageSize2" runat="server" AutoPostBack="true"
onselectedindexchanged="pageSize2_SelectedIndexChanged">
<asp:ListItem Value="10" Selected="True">10</asp:ListItem>
<asp:ListItem Value="25">25</asp:ListItem>
<asp:ListItem Value="50">50</asp:ListItem>
<asp:ListItem Value="100">100</asp:ListItem>
</asp:DropDownList>
</div>
<div class="gridfooter_info">
<asp:Label ID="lblSummary" runat="server"></asp:Label>
</div>
<div class="gridfooter_paginate">
<asp:LinkButton ID="lnkFirstbnt" runat="server" CommandName="Page" CssClass="pagerclass-nxt"
CausesValidation="false" CommandArgument="First">First</asp:LinkButton>
<asp:LinkButton ID="lnkPrevbnt" runat="server" CommandName="Page" CssClass="pagerclass-prev"
CausesValidation="false" CommandArgument="Prev">Previous</asp:LinkButton>
<asp:Label ID="CurrentPage" CssClass="pagerclass-number" Visible="false" runat="server"
Text="Label"></asp:Label>
<asp:LinkButton ID="lnkNextbnt" runat="server" CommandName="Page" CssClass="pagerclass-next"
CausesValidation="false" CommandArgument="Next">Next</asp:LinkButton>
<asp:LinkButton ID="lnkLastbnt" runat="server" CommandName="Page" CssClass="pagerclass-last"
CausesValidation="false" CommandArgument="Last">Last</asp:LinkButton>
</div>
</div>
</PagerTemplate>
Here is my code behind
Protected Sub pageSize2_SelectedIndexChanged(sender As Object, e As System.EventArgs)
Dim gvr2 As GridViewRow = GridView2.BottomPagerRow
Dim ddPageSize2 As DropDownList = DirectCast(gvr2.Cells(0).FindControl("pageSize2"), DropDownList)
GridView2.PageSize = Convert.ToInt32(ddPageSize2.SelectedValue)
Call GetDataTables2()
End Sub
When post back is occured the pageSize2_SelectedIndexChanged event is firing for all the selectd values of dropdownlist, but the page is not rendering. It is jumping from the pageSize2_SelectedIndexChanged event Call GetDataTables2() method. If the dropdownlist selectd value is 10, then the page is rendering, it strange. What might be the problem, Please suggest solution
The problem is, I am using two gridviews in the same update panel. And those two gridviews having the controsl with same IDs under the templates of two gridviews. This might be a bug in visual studio. It did not tell me any compile time exception and not even in runtime until I remove the updatepanel. I ahve changed the control IDs. Now it is working fine.
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
Hi all I have a simpe ASP button inside a grid. But the onclick event doesn't seem to fire. Where did I go wrong?
Here's the first line of my aspx page.
<%# Page Title="Trainer Data" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeFile="TrainerData.aspx.vb" Inherits="TrainerData"%>
And the button inside my gridview..
<asp:GridView ID ="gvExecSummary" runat="server" CssClass="gridview" AllowSorting="false" AllowPaging="false" AutoGenerateColumns="false" Width="98%" >
<RowStyle Height="22px" />
<AlternatingRowStyle Height="22px" CssClass="bg" BackColor="LightGray"/>
<HeaderStyle Height="22px" BackColor="#4b6c9e" Font-Bold="true"/>
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="5%" HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate" OnClientClick="btnExecutiveGenerate_Click" />
</ItemTemplate>
</asp:TemplateField>
P.S. I tried even onclick but it doesn't work either.
EDIT: My code for server side.
Protected Sub btnExecutiveGenerate_Click(sender As Object, e As EventArgs)
Dim gvrow As GridViewRow = CType(CType(sender, Control).Parent.Parent, GridViewRow)
Dim lblSchoolId As System.Web.UI.WebControls.Label = gvrow.FindControl("lblSchoolMasterID")
Dim lblFacultyId As System.Web.UI.WebControls.Label = gvrow.FindControl("lblFacultyMasterID")
Dim btnExecutiveGenerate As System.Web.UI.WebControls.Button = gvrow.FindControl("btnExecutiveGenerate")
PDF_Creation_Executive(Val(lblSchoolId.Text), Val(lblFacultyId.Text))
End Sub
Use Command Argumnet,
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="AddButton" runat="server"
CommandName="AddToCart"
CommandArgument="<%# CType(Container,GridViewRow).RowIndex %>"
Text="Add to Cart" />
</ItemTemplate>
</asp:TemplateField>
add code page side
Protected Sub GridView1_RowCommand(ByVal sender As Object, _ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs)
If (e.CommandName = "AddToCart") Then
' Retrieve the row index stored in the CommandArgument property.
Dim index As Integer = Convert.ToInt32(e.CommandArgument)
' Retrieve the row that contains the button
' from the Rows collection.
Dim row As GridViewRow = GridView1.Rows(index)
' Add code here to add the item to the shopping cart.
End If
End Sub
You need to handle the button click event of Gridview in RowCommand event
NOTE: Please see the CommandName & CommandArgument properties added to the button.
<asp:GridView ID ="gvExecSummary" runat="server" CssClass="gridview" AllowSorting="false" AllowPaging="false" AutoGenerateColumns="false" Width="98%" >
<RowStyle Height="22px" OnRowCommand="gvExecSummary_RowCommand" />
<AlternatingRowStyle Height="22px" CssClass="bg" BackColor="LightGray"/>
<HeaderStyle Height="22px" BackColor="#4b6c9e" Font-Bold="true"/>
<Columns>
<asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="5%" HeaderText="Action">
<ItemTemplate>
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate" CommandName="GenerateExecutive" CommandArgument="<%#((GridViewRow)Container).RowIndex %>" />
</ItemTemplate>
</asp:TemplateField>
And and RowCommand event will be..
protected void gvExecSummary_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "GenerateExecutive")
{
// button click code goes here
}
}
change OnClientClick event to OnClick if btnExecutiveGenerate_Click is vb.net event handler
<asp:Button ID="btnExecutiveGenerate" runat="server" Text="Generate"
OnClick="btnExecutiveGenerate_Click"/>
OnClientClick event use to execute client-side script, if you have given OnClientClick event with OnClick event, then if OnClientClick return true only it will call OnClick event.
so make sure you are returning true or false from OnClientClick event if you using it.
note that if you are loading data in page laod, do as below
Sub Page_Load
If Not IsPostBack
LoadGridViewData()
End If
End Sub
This may help someone, but I was experiencing edit buttons not firing the event within rows (and not footer).
The cause was a gridview containing a label, which had the same ID as one elsewhere on the page.
Seemingly this did not cause problems for the footer row, which did not contain any such labels.
I hope this helps someone.
inside of while loop, i've used
<asp:Button ID="<%=objReader.Item(0)%>" OnClick="btn_Click" runat="server" CssClass="submit_button" Text="Delete" />
Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs)
'You have clicked button
End Sub
to creating the button dynamically. Now, on click of particular button, it should show the information which are associated with the clicked button. Need Help !!
Solution
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="Jobs">
<ItemTemplate>
<asp:Button ID="btnDemo" CommandArgument='<%#Eval("Login_id")%>' OnCommand="btnDemo_Click" runat="server" Text="Button" /></ItemTemplate>
</asp:Repeater>
Sub btnDemo_Click(ByVal sender As Object, ByVal e As CommandEventArgs)
MsgBox(e.CommandArgument)
End Sub
Thanks to every one!!
It's better to implement this in a databound control, like the repeater or listview.
You could then use the CommandArgument of a button to add some arguments which are distinct for each button.
You can then handle this in the Click procedure to handle the right action at the right CommandArgument.
see:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.button.commandargument.aspx
Example:
<asp:Repeater runat="server" ID="rptList">
<ItemTemplate>
<asp:Button runat="server" ID="btnDemo" CommandArgument='<%#Eval("Id") %>' Text="Click me" OnCommand="btnDemo_Click" />
</ItemTemplate>
</asp:Repeater>