I m showing Modal Popup on click of Edit Link Button of Datagrid.
Now when Link button is clicked I want to show the values of that particular row in Modal Popup.
This has to be done at server side as it would be updation of row and it has dropdown which has to be filled at server side..
So plz help ..
Below i m attaching the 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:TemplateField>
<ItemTemplate>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" PopupControlID="popupPanel"
OkControlID="btnOk" CancelControlID="btnCancel" BackgroundCssClass="modalBackground" TargetControlID="lnkPopup">
</cc1:ModalPopupExtender>
<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:PanelID="popupPanel"runat="server"Height="50px"Width="125px">
Click To Display Authors Name:
<asp:LabelID="Label1"runat="server"></asp:Label>
<br/>
<br/>
<asp:ButtonID="btnOk"runat="server"Text="OK"/>
<asp:ButtonID="btnCancel"runat="server"Text="Cancel"/>
</asp:Panel>
<br/>
</form>
</body>
</html>
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>Best regards,
Jonathan
Hi Varun,
Here is another sample which won't postback when click to show the ModalPopupExtender.
<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
protected void Page_Load(object sender, EventArgs e)
{
//Attach a Javascript funtion to the LinkButton.
LinkButton myLinkButton;
for (int i = 0; i < GridView1.Rows.Count; i++)
{
myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
}
}
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.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:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
<asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Click On Me</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 ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
</asp:Panel>
<div style="display: none">
<asp:Button ID="Button1" runat="server" Text="Button" /></div>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<script type="text/javascript" language="javascript">
function shopModalPopup(employeeID){
//show the ModalPopupExtender
$get("<%=tbEmployeeID.ClientID%>").value = employeeID;
$get("<%=tbReason.ClientID%>").value ="";
$find("<%=ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>
Best regards,
Jonathan
No comments:
Post a Comment