Skip to main content

How To Select GridView Row using Javascript

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

<!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 rowBind()
{
 var navRoot,node,dgRowid = null,tBody,rwVal;
 var Prev = null,Curr = null;

 if(document.all && document.getElementById)
 {
     navRoot = document.getElementById('<%=GridView1.ClientID %>');

     if(navRoot != null)
     {
         tBody = navRoot.childNodes[0];
  
         for(i=0;i<tBody.childNodes.length;i++)
         {
             node = tBody.childNodes[i];
             if(node.tagName == "TR")
             {
                 node.onmousedown = function()
                 {
                    dtRowid = this.rowIndex;
                    rVal = dtRowid+2;
                    if(dtRowid < 8)
                    {
                         rwVal = 'GridView1$ctl0'+ rVal+'$txtAuId';
                    }
                    else
                    {
                         rwVal = 'GridView1$ctl0'+rVal+'$txtAuId';
                    }              
             
                    var ctrl1 = document.getElementById(rwVal);
                    if(Prev != null)
                      {
                         node.parentElement.children[Prev].style.background = "#FFFFFF";
                      }
                      Curr = this.rowIndex;
                      if(Curr != null)
                      {
                         node.parentElement.children[Curr].style.background = "#D8E8FF";
                         Prev = Curr;
                      }
                    alert(ctrl1.value);
                 }
             }         
         }     
     } 
 } 
}

 </script>
</head>
<body onload="rowBind();">
 <form id="form1" runat="server">
     <div>
         <asp:GridView ID="GridView1" ShowHeader="false" runat="server" AutoGenerateColumns="false">
             <Columns>
             <asp:TemplateField>
              <ItemTemplate>
                         <asp:TextBox ID="txtAuId" ReadOnly="true" runat="server"
                         Text='<%# Bind("Item")  %>'
                         Style="background-color: Transparent; border: 0px;">
                         </asp:TextBox>
                     </ItemTemplate>
             </asp:TemplateField>
                 <asp:BoundField DataField="Item" HeaderText="Item " />
                 <asp:BoundField DataField="Price" HeaderText="Price" />
             </Columns>
         </asp:GridView>
         </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 SelectRowUsingJavascript : 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", "Product1", "12.43", });
              dt.Rows.Add(new object[] { "2", "Product2", "11.43", });
              dt.Rows.Add(new object[] { "3", "Product3", "13.43", });
              Session["DataTable"] = dt;
          }
          return dt;
      }
      set
      {
          Session["DataTable"] = value;
      }
  }
}

Comments

Popular posts from this blog