Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Display GridView Row details in Modal Popup Dialog in ASP.Net using C#, VB.NET

Jun 11, 2015
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.


Before implement this example first design one table productinfo in your database as shown below

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

jQuery Display GridView Row details in Modal Popup Dialog in ASP.Net using C#, VB.NET

Download Sample Code Attached

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 RSS subscribe by email Subscribe by Email

5 comments :

Unknown said...

It is very useful.thank you Suresh

Anonymous said...

its working thank you...

Anonymous said...

unable to display large text field.

Sajeesh KP said...
This comment has been removed by the author.
Sajeesh KP said...

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

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.