Display GridView Row Detail in Model PopUp Dialog using Jquery in Asp.Net

In this article I will explain how to display a div PopUp on GridView Row click event using Jquery.

Description-

If you are familiar with Jquery then this task much easier for you but don’t worry if you are not in touch with jquery because here I am using a simple jquery function to display PopUp on screen.

Jquery is JavaScript library and it has its own functions which makes our task easy.

On Aspx Page Create a GridView control

<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="Name" HeaderText="Name" />

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

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

                                    <asp:BoundField DataField="MobileNo" HeaderText="Phone" />

                                    <asp:TemplateField>

                                        <ItemTemplate>

                                            <a href="#" class="gridViewToolTip" onclick='openPopup("<%# Eval("name")%>","<%# Eval("gender")%>","<%# Eval("address")%>","<%# Eval("mobileno")%>")'>Select</a>

                                        </ItemTemplate>

                                    </asp:TemplateField>

                                </Columns>

                            </asp:GridView>

                        </div>

                    </td>

                </tr>

            </table>

Popup will be display by clicking Select button in a Grid which you can see in a template field on above code. I called my Js function in this select Link. 

onclick='openPopup("<%# Eval("name")%>","<%# Eval("gender")%>","<%# Eval("address")%>","<%# Eval("mobileno")%>")

Eval is used to bind data from selected Row and pass all detail as a parameter in Js function. openPopup is my JS function which you can find in below section

After creation of Grid-View we need to controls and data which will display as Popup.So I used a div as a container. Filed name same as GridView Fields.

<div id="popupdiv" title="Basic modal dialog" style="display: none">

                Name:

                <label id="lblName"></label>

                <br />

                 Gender:

                <label id="lblGender"></label>

                <br />

                Address:

                <label id="lblAddress"></label>

                 <br />

                Phone:

                <label id="lblPhone"></label>

            </div>

CSS Style to make Grid interactive

<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: #6699ff;

            padding: 0.5em 0.5em 0.5em 0.5em;

            text-align: center;

        }

    </style>

Now finally the Jquery code to display popup. Jquery has dialog function for this. We don’t need to bother about code.

<script type="text/javascript">

        function openPopup(name, gender, address, mobileno) {

            $('#lblName').text(name);

            $('#lblGender').text(gender);

            $('#lblAddress').text(address);

            $('#lblPhone').text(mobileno);

            $("#popupdiv").dialog({

                title: "Employee Detail As Popup",

                width: 290,

                height: 240,

                modal: true,

                buttons: {

                    Close: function () {

                        $(this).dialog('close');

                    }

                }

            });

        }

    </script>

In above code I made a JavaScript function and call this function already in Grid Select link click.

You have to use Jquery /JavaScript Library for to implement  jquery syntax and functions in your code.

  <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>

Now finally your whole aspx page looks like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopupDivInGridUsingJquery.aspx.cs" Inherits="PopupDivInGridUsingJquery" %>

<!DOCTYPE html>

<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(name, gender, address, mobileno) {

            $('#lblName').text(name);

            $('#lblGender').text(gender);

            $('#lblAddress').text(address);

            $('#lblPhone').text(mobileno);

            $("#popupdiv").dialog({

                title: "Employee Detail As Popup",

                width: 290,

                height: 240,

                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: #6699ff;

            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">

                Name:

                <label id="lblName"></label>

                <br />

                 Gender:

                <label id="lblGender"></label>

                <br />

                Address:

                <label id="lblAddress"></label>

                 <br />

                Phone:

                <label id="lblPhone"></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="Name" HeaderText="Name" />

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

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

                                    <asp:BoundField DataField="MobileNo" HeaderText="Phone" />

                                    <asp:TemplateField>

                                        <ItemTemplate>

                                            <a href="#" class="gridViewToolTip" onclick='openPopup("<%# Eval("name")%>","<%# Eval("gender")%>","<%# Eval("address")%>","<%# Eval("mobileno")%>")'>Select</a>

                                        </ItemTemplate>

                                    </asp:TemplateField>

                                </Columns>

                            </asp:GridView>

                        </div>

                    </td>

                </tr>

            </table>

        </div>

    </form>

</body>

</html>

After doing all the front end task we need to Bind Grid from Backend. So here is the CS page code for bind Grid.

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=JP-PC\\JP;Initial Catalog=ForMVC;Integrated Security=true;"))

        {

            con.Open();

            SqlCommand cmd = new SqlCommand("select * from Employee", con);

            SqlDataAdapter da = new SqlDataAdapter(cmd);

            da.Fill(ds);

            con.Close();

            gvDetails.DataSource = ds;

            gvDetails.DataBind();

        }

    }

Keep in mind here I am using my DataSource  and Initial Catalog Name in Connection-String. Change this code as per your Source type and database.

 

Click on Select