XploreDotNet: How to select ROW in datagrid using Javascript

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; June 19, 2008 at 12:49 PM