Thursday, March 6, 2008

How to select ROW in datagrid using Javascript


Program To Select Row In DataGrid Or Gridview Using JavaScript,Have To Use TemplateColumn,AutoGenerateColumns="false"
// JScript File JSdg.js
function rowBind()
{
var navRoot,node,dgRowid = null,tBody,rwVal;
var Prev = null,Curr = null;

if(document.all && document.getElementById)
{
navRoot = document.getElementById('dg');
// Can Be Used For Both DataGrid & GridView,
//Have To Give The Cleint ControlId.

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 = 'dg$ctl0'+ rVal+'$txtAuId';
}
else
{
rwVal = 'dg$ctl'+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);
}
}
}
}
}
}

CodeBehind

SqlConnection Con = new SqlConnection(@"SERVER=YourSERVERNAME;DATABASE=PUBS;UID=sa;PWD=sa;");
SqlDataAdapter Da = new SqlDataAdapter();
DataSet Ds = new DataSet();
protected void Page_Load(object sender, EventArgs e)
{
Da = new SqlDataAdapter("Select * from Authors", Con);
Da.Fill(Ds);
dg.DataSource = Ds;
dg.DataBind();
}

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


<!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>Custom DataGrid</title>


<script type="text/javascript" language="javascript"
src="JavaScript/JSdg.js"></script>


</head>


<body onload="rowBind();">


<form id="form1" runat="server">

<div>

<asp:DataGrid ID="dg" runat="server" AutoGenerateColumns="false" ShowHeader="false">

<Columns>

<asp:TemplateColumn>

<ItemTemplate>
<asp:TextBox ID="txtAuId" ReadOnly="true" runat="server"
Text='<%# Bind("au_id") %>'
Style="background-color: Transparent; border: 0px;">
</asp:TextBox>
</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn>

<ItemTemplate>

<asp:TextBox ID="txtAuName" ReadOnly="true" runat="server"
Text='<%# Bind("au_lname") %>'
Style="background-color: Transparent; border: 0px;">
</asp:TextBox>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:DataGrid>

</div>

</form>

</body>

</html>

1 comment:

Sachin said...

Hi,

I have use your code in my page it's not working. do you have source code save some where on web. which can help me. please i need your code very urgently