dL creations': Popup On Gridview..

how to show ModalPopUp to edit the gridview row values or how to invoke ModalPopup with gridview button click or Ajax ModalPopupExtender Example for Editing Rows in a GridView using asp.net

Introduction:

Here I will explain how to show the modal popup using Ajax ModalPopupExtender to edit Rows in a GridView using asp.net.

Description:
In my previous post I explained clearly how to show the gridview images with lightbox effect. Same way we can display popup using Ajax futures. In ajax we have ModalPopup extender to display data in Popup here I am doing sample to show pop up whenever user clicks on Edit button in gridview at that time I will display that particular gridview row data into Modal popup for that First design table in your database like this

Column Name	Data Type	Allow Nulls
UserId	int(set identity property=true)	No
UserName	varchar(50)	Yes
FirstName	varchar(50)	Yes
LastName	varchar(50)	Yes
City	varchar(50)	Yes
Designation	varchar(50)	Yes

After that enter some data in table to bind that data to gridview.

Now add AjaxControlToolkit.dll to your bin folder and design your aspx page like this

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

<title>Untitled Page</title>

.modalBackground

{

background-color: Gray;

filter: alpha(opacity=80);

opacity: 0.8;

z-index: 10000;

}

</style>

</head>

<body>

<asp:ToolkitScriptManager ID="ScriptManager1" runat="server">

</asp:ToolkitScriptManager>

<div>

<asp:GridView runat="server" ID="gvdetails" DataKeyNames="UserId" AutoGenerateColumns="false">

<asp:TemplateField HeaderText="Edit">

<asp:ImageButton ID="imgbtn" ImageUrl="~/Edit.jpg" runat="server" Width="25" Height="25"onclick="imgbtn_Click" />

</ItemTemplate>

</asp:TemplateField>

<asp:BoundField DataField="UserName" HeaderText="UserName" />

<asp:BoundField DataField="FirstName" HeaderText="FirstName" />

<asp:BoundField DataField="LastName" HeaderText="LastName" />

<asp:BoundField DataField="City" HeaderText="City" />

<asp:BoundField DataField="Designation" HeaderText="Designation" />

</Columns>

</asp:GridView>

<asp:Label ID="lblresult" runat="server"/>

<asp:Button ID="btnShowPopup" runat="server" style="display:none" />

<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnShowPopup"PopupControlID="pnlpopup"

CancelControlID="btnCancel" BackgroundCssClass="modalBackground">

</asp:ModalPopupExtender>

<asp:Panel ID="pnlpopup" runat="server" BackColor="White" Height="269px" Width="400px"style="display:none">

<td colspan="2" style=" height:10%; color:White; font-weight:bold; font-size:larger" align="center">User Details</td>

</tr>

<tr>

UserId:

</td>

<td>

<asp:Label ID="lblID" runat="server"></asp:Label>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:Label ID="lblusername" runat="server"></asp:Label>

</td>

</tr>

<tr>

FirstName:

</td>

<td>

<asp:TextBox ID="txtfname" runat="server"/>

</td>

</tr>

<tr>

LastName:

</td>

<td>

<asp:TextBox ID="txtlname" runat="server"/>

</td>

</tr>

<tr>

City:

</td>

<td>

<asp:TextBox ID="txtCity" runat="server"/>

</td>

</tr>

<tr>

Designation:

</td>

<td>

<asp:TextBox ID="txtDesg" runat="server"/>

</td>

</tr>

<tr>

<td>

</td>

<td>

<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update"onclick="btnUpdate_Click"/>

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

</td>

</tr>

</table>

</asp:Panel>

</div>

</form>

</body>

</html>

Here if you observe above code for ModalPopupExtender I have declared different properties to ModalPopupEtender now I will explain each property clearly

TargetControlID - The ID of the element that activates the modal popup.

Here I gave one button name btnShowPopup but that button mode is in visible=false because it’s not necessary here we are triggering popup by calling show() function in button click codebehind but if we didn’t given that targetcontrolid to ModalPopupExtender it will throw error for that reason I gave target controlid.

PopupControlID - The ID of the element to display as a modal popup.

CancelControlID - The ID of the element that cancels the modal popup.

BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed.

After completion our aspx page design write the following namespaces in codebehind

using System.Configuration;

using System.Data;

using System.Data.SqlClient;

using System.Drawing;

After completion of writing namespaces and write the following code

SqlConnection con = newSqlConnection(ConfigurationManager.ConnectionStrings["dbconnection"].ToString());

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

BindGridData();

}

protected void BindGridData()

{

con.Open();

SqlCommand cmd = new SqlCommand("Select * from Employee_Details", con);

SqlDataAdapter da = new SqlDataAdapter(cmd);

DataTable dt = new DataTable();

da.Fill(dt);

gvdetails.DataSource = dt;

gvdetails.DataBind();

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

con.Open();

SqlCommand cmd = new SqlCommand("update Employee_Details set FirstName=@FirstName,LastName=@LastName, City=@City,Designation=@Designation where UserId=@UserId", con);

cmd.Parameters.AddWithValue("@FirstName", txtfname.Text);

cmd.Parameters.AddWithValue("@LastName", txtlname.Text);

cmd.Parameters.AddWithValue("@City", txtCity.Text);

cmd.Parameters.AddWithValue("@Designation", txtDesg.Text);

cmd.Parameters.AddWithValue("@UserId", Convert.ToInt32(lblID.Text));

cmd.ExecuteNonQuery();

con.Close();

lblresult.Text = lblusername.Text + " Details Updated Successfully";

lblresult.ForeColor = Color.Green;

BindGridData();

}

protected void imgbtn_Click(object sender, ImageClickEventArgs e)

{

ImageButton btndetails = sender as ImageButton;

GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;

lblID.Text = gvdetails.DataKeys[gvrow.RowIndex].Value.ToString();

lblusername.Text = gvrow.Cells[1].Text;

txtfname.Text = gvrow.Cells[2].Text;

txtlname.Text = gvrow.Cells[3].Text;

txtCity.Text = gvrow.Cells[4].Text;

txtDesg.Text = gvrow.Cells[5].Text;

this.ModalPopupExtender1.Show();

}

After that set your database connection in web.config like this

</connectionStrings >

Demo

Download sample code attached

dL creations'

Pages

Monday, April 18, 2011

Popup On Gridview..

how to show ModalPopUp to edit the gridview row values or how to invoke ModalPopup with gridview button click or Ajax ModalPopupExtender Example for Editing Rows in a GridView using asp.net

No comments:

Post a Comment

Total Pageviews