How to get the gridview cell value of the selected row in javascript

How to get the gridview cell value of the selected row in javascript

Gridview control is the most used control in ASP.NET application. It’s already provided a lot of functionality out of the box. Sometimes our requirement does not meet then we write custom code to achieve the functionality.
In this post, I will show you how to read the selected row value of GridView using javascript.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Untitled Page</title>

   <script type="text/javascript"> function Read() {
  var oDataGrid = document.getElementById("<%= GridView1.ClientID %>")
  var tableRows = oDataGrid.rows;
  var rawDataRows = new Array();
  //somewhere to put the actual data
  for (var i = 0; i < tableRows.length; i++) {
     var thisRow = tableRows[i];
     for (var j = 0; j < thisRow.cells.length; j++) {
        alert(oDataGrid.rows(i).cells(j).innerHTML);
        }
     }
  }
   </script>

</head>
<body>
   <form id="form1" runat="server">
       <div>
           <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
               <Columns>
                   <asp:BoundField DataField="Item" HeaderText="Item " />
                   <asp:BoundField DataField="Price" HeaderText="Price" />
               </Columns>
           </asp:GridView>
           <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Read();" /></div>
   </form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ReadGridView : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            GridView1.DataSource = _sampleData;
            GridView1.DataBind();
        }
    }
    public DataTable _sampleData
    {
        get
        {
            DataTable dt = (DataTable)Session["DataTable"];
            if (dt == null)
            {
                dt = new DataTable();
                dt.Columns.Add(new DataColumn("ID", typeof(string)));
                dt.Columns.Add(new DataColumn("Item", typeof(string)));
                dt.Columns.Add(new DataColumn("Price", typeof(string)));


                dt.Rows.Add(new object[] { "1", "XX", "12.43", });
                dt.Rows.Add(new object[] { "2", "XX1", "11.43", });
                dt.Rows.Add(new object[] { "3", "XX2", "13.43", });
                Session["DataTable"] = dt;
            }
            return dt;
        }
        set
        {
            Session["DataTable"] = value;
        }
    }
}

Please do not post any spam link in the comment box😊

Post a Comment (0)
Previous Post Next Post