Ad Code

Gridview row click data display in div tag in Asp.net

Erukulla's 18:47:00

gridview selected row data display in div tag

In this articles i'm going to explain How to display Gridview selected row data in div tag when we click on row. To achieve this
1.) first, we need to Bind Data into gridview
2.) second, we need to write a logic to get Gridview row record from Gridview Control by Using jQuery

Create Database :

     Create Table users(
      userID varchar(50),
      username varchar(50),
      password varchar(50),
      name varchar(50)      
     )

Design HTML MarkUp Page :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Gridview_Display_Row_Data.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>



</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
            <FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
            <HeaderStyle BackColor="#003399" Font-Bold="True" ForeColor="#CCCCFF" />
            <PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
            <RowStyle BackColor="White" ForeColor="#003399" />
            <SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
            <SortedAscendingCellStyle BackColor="#EDF6F6" />
            <SortedAscendingHeaderStyle BackColor="#0D4AC4" />
            <SortedDescendingCellStyle BackColor="#D6DFDF" />
            <SortedDescendingHeaderStyle BackColor="#002876" />
        </asp:GridView>
    </div>
        <div id="divgriddisplay"></div>
    </form>
</body>
</html>

JQuery

In jQuery code is used to get clicked row data from gridview Control and append that data to div tags which i declared in html markup page i.e divgriddisplay below gridview control.

    <script src="jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
   var gridId = "<%= GridView1.ClientID %>";
             var rowClickEvent = "#" + gridId + " tr"

             $(rowClickEvent).click(function () {
                 //Add row containing aditional info when user click on a row inside the grid view
                 var row = this;
                 var userID = row.children[0].innerHTML;
                 var username = row.children[1].innerHTML;
                 var name = row.children[2].innerHTML;
                 $('#divgriddisplay').append("<h1>User Details :</h1><hr/> User ID : " + userID + "<br/> Username : " + username + "<br/>Name : " + name);

             });
         });
    </script>

C# Coding : Bind Gridview Control

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;

namespace Gridview_Display_Row_Data
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["dbCon"].ConnectionString);
        protected void Page_Load(object sender, EventArgs e)
        {
            BindGridview();
        }
        private void BindGridview()
        {
            SqlCommand cmd = new SqlCommand("Select uid,username,name from users", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            GridView1.DataSource = ds;
            GridView1.DataBind();
        }
    }
}
Reactions

Post a comment

0 Comments