Show Row data in popup Using GridView

HELLO

Friends today I am going to show how you can display a popup from GridView to display more information

Normally we used to display less number of database columns in GridView. Sometimes there are requirements where we have to show more records in GridView or show more information, in this case this article might useful to you guys let’s start.

Step 1: Now Create Empty web site by add two pages Default.aspx and Deafult2.aspx

Default.aspx will be our starting page and Default2.aspx will be used to displayed information popup window.

Step 2: Database Creation

In this step I am going to add a database from which I am going to display records and fill GridView.

Below is snap of database structure

Step 3: Now add class file which will be used for filling GridView and showing records. Structure of class file is like below

Step4: On Default.aspx put a GridView structure of page will be like below

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

                        <Columns>

<asp:BoundField DataField="ID" HeaderText="Emp ID" ItemStyle-HorizontalAlign="Left" />

<asp:BoundField DataField="Emp_FirstName" HeaderText="First Name" />

<asp:BoundField DataField="DOB" DataFormatString="{0: dd MMM yyyy}" HeaderText="Date of Birth" />

<asp:TemplateField ItemStyle-Wrap="false">

<ItemTemplate>

<asp:LinkButton ID='lnk' Text="click here For More Info" runat='server' OnClientClick='<%#Eval("ID","javascript:openPopUp({0});")%>' />

                                </ItemTemplate>

                            </asp:TemplateField>

                        </Columns>

                    </asp:GridView>

Note that in GridView I have field with LinkButton if I click on this button of particular row I need to display that particular row values into other page.

<asp:LinkButton ID='lnk' Text="click here For More Info" runat='server' OnClientClick='<%#Eval("ID","javascript:openPopUp({0});")%>' />

With the help of this I will get ID of particular row and will pass it to JavaScript functions that will display more information in popup

Step5:  I have a crated a script that will take id as parameter and will open window to display records. This will pass a id as query string parameter to next page.

Below is my script

<script type="text/javascript">

        function openPopUp(strUser) {

            var popUrl = 'Default2.aspx?Value=' + strUser;

            var name = 'popUp';

            var appearence = 'dependent=yes,menubar=no,resizable=yes,' +

                                          'status=no,toolbar=no,titlebar=no,' +

                                          'left=100,top=80,width=400,height=400';

            var openWindow = window.open(popUrl, name, appearence);

            openWindow.focus();

        }

    </script>

Step 6: Now on Default.aspx.cs I have written method to fill grid from database result from database will be used to fill Grid. This result will stored in Cache (for more info on Cache click here)

  

Cache syntax

public static List<Emp> CacheEmpdetails

    {

        get

        {

            return (List<Emp>)HttpContext.Current.Cache["CacheEmpdetails"];

        }

        set

        {

            HttpContext.Current.Cache["CacheEmpdetails"] = value;

        }

    }

Step 7: Now design Default2.aspx like this

<table class="style1">

            <tr>

                <td>

                    ID

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    First Name

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    Last Name

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    Address

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    Mobile

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    Sex

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    Salary

                </td>

                <td>

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

                </td>

            </tr>

            <tr>

                <td>

                    DoB

                </td>

                <td>

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

                </td>

            </tr>

        </table>

Step 8:  Now code behind I have written code to get id from query string and find result in cache a display result to page

  // get data from query string to a variable

        string id = Request.QueryString["Value"].ToString();

      // assign Cache result in list

        List<Emp> emp = DemoCache.CacheEmpdetails;

        // find record in list to get result for particular id

        Emp empdeatils = emp.Find(x => x.ID == Convert.ToInt32(id));

You can Download Code from here