Introduction:
Here I will explain how to use jQuery to display or show gridview row details in modal popup window on button click in asp.net using c#, vb.net with example or Display gridview row details in jQuery modal popup dialog window in asp.net using c#, vb.net.
Description:
In previous articles I explained jQuery show gridview row details in tooltip on mouseover, simple jquery modalpopup example, Ajax modal popup to edit gridview rows in asp.net, populate dropdownlist selected value in gridview in asp.net, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show gridview row details in jQuery modal popup in asp.net using c#, vb.net.
In previous articles I explained jQuery show gridview row details in tooltip on mouseover, simple jquery modalpopup example, Ajax modal popup to edit gridview rows in asp.net, populate dropdownlist selected value in gridview in asp.net, group columns in gridview, gridview examples in asp.net and many articles relating to gridview, asp.net, c#,vb.net and jQuery. Now I will explain how to show gridview row details in jQuery modal popup in asp.net using c#, vb.net.
Column Name
|
Data Type
|
Allow Nulls
|
productid
|
Int(IDENTITY=TRUE)
|
Yes
|
productname
|
varchar(50)
|
Yes
|
price
|
varchar(50)
|
Yes
|
Once
table created in database enter some dummy data to test application now open
your aspx page and write the code like as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Show Gridview
Row Details in Modal Popup window in asp.net</title>
<link href="http://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet"
type="text/css"/>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
function openPopup(productid,
productname, price) {
$('#lblId').text(productid);
$('#lblName').text(productname);
$('#lblPrice').text(price);
$("#popupdiv").dialog({
title: "jQuery Show Gridview Row
Details in Popup",
width: 300,
height: 250,
modal: true,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
}
</script>
<style type="text/css">
.GridviewDiv {font-size: 100%; font-family: 'Lucida
Grande', 'Lucida Sans Unicode', Verdana, Arial, Helevetica, sans-serif;
color: #303933;}
.headerstyle
{
color:#FFFFFF;border-right-color:#abb079;border-bottom-color:#abb079;background-color:
#df5015;padding:0.5em 0.5em 0.5em 0.5em;text-align:center;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div>
<div id="popupdiv"
title="Basic
modal dialog" style="display: none">
Product Id: <label id="lblId"></label><br />
Product Name: <label id="lblName"></label><br />
Price: <label
id="lblPrice"></label>
</div>
<table align="center"
style="margin-top:200px">
<tr>
<td>
<div class="GridviewDiv">
<asp:GridView runat="server"
ID="gvDetails"
AutoGenerateColumns="false"
Width="420px">
<HeaderStyle CssClass="headerstyle"
/>
<Columns>
<asp:BoundField DataField="productid"
HeaderText="Product
Id" />
<asp:BoundField DataField="productname"
HeaderText="Product
Name" />
<asp:BoundField DataField="price"
HeaderText="Price"
/>
<asp:TemplateField>
<ItemTemplate>
<a href="#"
class="gridViewToolTip"
onclick='openPopup("<%# Eval("productid")%>","<%#
Eval("productname")%>","<%# Eval("price")%>")'>test</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
After completion of aspx page add following namespaces in
codebehind
C#
Code
using System;
using
System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
|
After completion of adding namespaces you need to write the
code like as shown below
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
DataSet ds = new DataSet();
using (SqlConnection con = new
SqlConnection("Data
Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from productinfo", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Close();
gvDetails.DataSource = ds;
gvDetails.DataBind();
}
}
|
VB.NET
Code
Imports
System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Partial Class VBCode
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal
sender As Object,
ByVal e As EventArgs) Handles
Me.Load
If Not
IsPostBack Then
BindGridview()
End If
End Sub
Protected Sub BindGridview()
Dim ds As New DataSet()
Using con As New SqlConnection("Data
Source=Suresh;Integrated Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim cmd As New SqlCommand("select
* from productinfo", con)
Dim da As New SqlDataAdapter(cmd)
da.Fill(ds)
con.Close()
gvDetails.DataSource = ds
gvDetails.DataBind()
End Using
End Sub
End Class
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
5 comments :
It is very useful.thank you Suresh
its working thank you...
unable to display large text field.
Hi Suresh,
I have tried this, and popup div working properly with row data.
I have a requirement like, gridview having number of different Items, user need to add images to each gridview row line. so I have given a link button as above example, and placed fileupload control and upload button inside popup div. Gridview and popdiv are placed in update panel for updating without page refresh. Its working with postback, but while giving AsyncPostBackTrigger for upload button, fileupload value not getting. Saying fileupload need a fullpostback to work properly.
please give a solution this.
thanks in advance.
Sajeesh
Note: Only a member of this blog may post a comment.