Gridview Row Click display selected row data into alert


  (This button click to Show and Hide GridView - )


Username FirstName LastName Date-Of-Birth Phone
MariaAnders Maria Anders 24-04-1984 1234567890
AnaTrujillo Ana Trujillo 04-08-1964 9876543210
AntonioMoreno Antonio Moreno 01-12-1974 2222222222
ThomasHardy Thomas Hardy 02-02-1984 5432167890

Description :

In this article i'm going to explain how to get gridview click row data and display in alert practically. They is a GridView Control in these page is hidden if you want to see Gridview Control then click on Demo Available Button to see gridview control. After Gridview Control enable click anywhere on gridview control to get click row record and display in alert.

HTML Markup : Add Gridview Control

this block is used to tell add Gridview control to the .aspx page

 <asp:GridView ID="tblGrid" runat="server">
 </asp:GridView>

C# Coding : Bind GridView Control

now bind gridview record from database to gridview control through code behind file
first we need to add namespace to the code behind file

//Add namespace
using System.Data;
using System.Data.SqlClient;

in this page load we are calling a private method name is BindGridView()

//Page Load
protected void Page_Load(object sender, EventArgs e)
{
  if(!IsPostBack) 
   {
     BindGridView();
   }
}

Declare a private method to bind Gridvie Control and call that method in page Load

private void BindGridView()
{
  SqlConnection con=new SqlConnection("Data Source=.; User ID=sa; Password=567334; Database=master;");
  SqlDataAdapter da=new SqlDataAdapter("Select * from Customers",con);
  DataSet ds=new DataSet();
  da.fill(ds);
  tblGrid.DataSource = ds;
  tblGrid.DataBind();
}

jQuery : GridView Row Click Event

by using jQuery we can get GridView Row Clicked Data and display in alert

<script type="text/javascript">

$(document).ready(function(){
$("#tblGrid").on("click","tr", function(e){

   var user = $(this).closest('tr').find('td:eq(0)').text();
   var first = $(this).closest('tr').find('td:eq(1)').text();
   var last = $(this).closest('tr').find('td:eq(2)').text();
   var dob = $(this).closest('tr').find('td:eq(3)').text();
   var phone = $(this).closest('tr').find('td:eq(4)').text();
alert('Username : '+user+'\nFirst Name : '+first+'\nLast Name : '+last+'\nDate Of Birth : '+dob+'\nContact No : '+phone);
});
});

</script>
0 Komentar untuk "Gridview Row Click display selected row data into alert"

Back To Top