Monday, March 26, 2012

Modal Popup Problem

Plz check My below code

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="false"CodeFile="ModalPopUp_In_Datagrid.aspx.vb"Inherits="ModalPopUp_In_Datagrid" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

<scripttype="text/javascript"language="javascript">

function shopModalPopup(employeeID){

//show the ModalPopupExtender

$get("<%=Label1.ClientID %>").value = employeeID;returnfalse;

}

</script>

<styletype="text/css">

.modalBackground

{

background-color:#000;

-moz-opacity:0.7;

opacity:.70;filter:alpha(opacity=70);

}

</style>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

</div>

<asp:PanelID="Panel1"runat="server"Height="50px"Width="125px">

<asp:GridViewID="GV1"runat="server"AutoGenerateColumns="False"DataKeyNames="RID">

<Columns>

<asp:BoundFieldDataField="rid"HeaderText="rid"/>

<asp:BoundFieldDataField="name"HeaderText="Name"/>

<asp:BoundFieldDataField="off_phone"HeaderText="OFF_PHONE"/>

<asp:BoundFieldDataField="photo"HeaderText="Photo"/>

<asp:TemplateField>

<ItemTemplate>

<asp:LinkButtonrunat="server"Text="Popup"CommandName="EditRow"CausesValidation="false"ID="lnkPopup"OnCommand="lnkPopup_Command"></asp:LinkButton>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

</asp:Panel>

<asp:Panelrunat="Server"ID="panel2">

<asp:LabelID="Label2"runat="server"Text="Label"Visible="False"></asp:Label>

<cc1:ModalPopupExtenderID="ModalPopupExtender2"runat="server"PopupControlID="popupPanel"

BackgroundCssClass="modalBackground"TargetControlID="Label2">

</cc1:ModalPopupExtender>

</asp:Panel>

<asp:PanelID="popupPanel"runat="server"Height="50px"Width="125px">

Click To Display Authors Name:

<asp:LabelID="Label1"runat="server"></asp:Label>

<asp:ButtonID="btnShowAuthorName"runat="server"

Text="Show Author's Name"></asp:Button><br/>

<asp:LabelID="lblAuthorsName"runat="server"BackColor="Beige"ForeColor="Red"></asp:Label>

<br/>

<br/>

<asp:ButtonID="btnOk"runat="server"Text="OK"/>

<asp:ButtonID="btnCancel"runat="server"Text="Cancel"/>

</asp:Panel>

<br/>

</form>

</body>

</html>

Server Side:

Sub fill_values()

Label1.Text ="a"

EndSub

ProtectedSub GV1_RowCommand(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.GridViewCommandEventArgs)Handles GV1.RowCommand

If e.CommandName ="EditRow"Then

fill_values()

ModalPopupExtender2.Show()

EndIf

EndSub

---------------------------------------

Now when i click link button in datagrid...then server side code is executed namedfill_values() and then to show Modal Popup showing those values...

But now values are being filled but Modal Popu doesn't come...

Plz help......

Hi Varun,

Please don't attach a hidden Control(visible= false) to your ModalPopupExtender or it won't work because no Dom element generate to the client. Also don't put $get function before ScriptManager. Here is the sample , please pay attention to the "Bold" part.

<%@. Page Language="VB" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> Sub fill_values() Label1.Text = "a" End Sub Protected Sub GV1_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) If e.CommandName = "EditRow" Then fill_values() ModalPopupExtender2.Show() End If End Sub</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title> <style type="text/css"> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> <asp:GridView ID="GV1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" AllowPaging="True" onrowcommand="GV1_RowCommand" > <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" /> <asp:BoundField DataField="LastName" HeaderText="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton runat="server" Text="Popup" CommandName="EditRow" CausesValidation="false" ID="lnkPopup"></asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource> </asp:Panel> <asp:Panel ID="popupPanel" runat="server" CssClass="modalPopup" Height="200px" Width="200px" style="display:none"> Click To Display Authors Name: <asp:Label ID="Label1" runat="server"></asp:Label> <asp:Button ID="btnShowAuthorName" runat="server" Text="Show Author's Name" OnClientClick="getName(); return false;"></asp:Button><br /> <asp:Label ID="lblAuthorsName" runat="server" BackColor="Beige" ForeColor="Red"></asp:Label> <br /> <br /> <asp:Button ID="btnOk" runat="server" Text="OK" /> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel><cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="popupPanel" BackgroundCssClass="modalBackground" TargetControlID="Label2" CancelControlID="btnCancel" OkControlID="btnOk"> </cc1:ModalPopupExtender> <div style="display:none"> <asp:Label ID="Label2" runat="server" Text="Label"></asp:Label></div> <script type="text/javascript" language="javascript">function getName(){ var labelValue = $get("<%=Label1.ClientID%>").innerHTML; } </script> </form></body></html>

I hope this hlep.

Best regards,

Jonathan

No comments:

Post a Comment