SIGN UP MEMBER LOGIN:    
ARTICLE

Single Click on GridView Row To Redirect and bind Row values in another Page

Posted by Hari Krishna Articles | ASP.NET Controls in C# September 29, 2010
The code in this article can be used to select a GridRow by single click or double click. When user clicks on the GridRow, it will pickup the ROW ID & redirect to another aspx page and bind the values.
Reader Level:

This code is used to Redirect to another page when User click on the GRIDVIEW ROW.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false"%>

<%@ Register TagName="Header" TagPrefix="Uc1" Src="~/UserControl/Header.ascx" %>

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

    <script type="text/javascript">

 

//This function will fire when user Click on the GRID VIEW ROW

var NAC_TimeoutId = null;

function NAC_StartSingleClick(event)

{

    NAC_TimeoutId = setTimeout(event, 200);

 

}

var previousRow;

function NAC_StartDblClick(event)

{

    window.clearTimeout(NAC_TimeoutId);

    setTimeout(event, 1);

}

function ChangeRowColor(row) {

    //If last clicked row and the current clicked row are same

    if (previousRow == row)

        return; //do nothing

    //If there is row clicked earlier

    else if (previousRow != null)

        document.getElementById(previousRow).style.backgroundColor = "#ffffff"; //change the color of the previous row back to white

 

    document.getElementById(row).style.backgroundColor = "#ffffda"; //change the color of the current row to light yellow

 

    //assign the current row id to the previous row id for next row to be clicked

    previousRow = row;

}

function RowColor(row)

 {

 

}

//This Function is used to change the ROW backGroundColor on MouseOver.

var lastColorUsed;

function NAC_ChangeBackColor(row, highlight, RowHighlightColor)

{

    if (highlight)

    {

        // set the background colour

        lastColorUsed = row.style.backgroundColor;

        row.style.backgroundColor = RowHighlightColor;

    }

    else

    {

        // restore the colour

        row.style.backgroundColor = lastColorUsed;

    }

} 

 

</script>

</head>

<body>

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

    <div style="height: 554px; width: 1088px; margin-bottom: 91px;">

    <Uc1:Header ID="test" runat="server" Visible="true" />

    <table>

    <tr>

    <td>

        <asp:ScriptManager ID="ScriptManager1" runat="server">

        </asp:ScriptManager>

   

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

           

            style="top: 177px; left: 394px; position: absolute; height: 198px; width: 531px"

            onrowupdated="GridView1_RowUpdated" onrowupdating="GridView1_RowUpdating"

            onrowcancelingedit="GridView1_RowCancelingEdit" DataKeyNames="Sno"

            onrowediting="GridView1_RowEditing"

            onrowdatabound="GridView1_RowDataBound"

            onselectedindexchanged="GridView1_SelectedIndexChanged"

            onselectedindexchanging="GridView1_SelectedIndexChanging"

            ondatabound="GridView1_DataBound" onrowcommand="GridView1_RowCommand"

            onprerender="GridView1_PreRender">

           

        <Columns>

        <asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false" />

        <asp:ButtonField Text="DoubleClick" CommandName="DoubleClick"

                            Visible="false" />

        <asp:TemplateField HeaderText="ENo.">

        <ItemTemplate>

        <%#Eval("Sno")%>

        </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Name">

        <ItemTemplate>

        <%#Eval("Name")%>

        </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Salary">

        <ItemTemplate>

        <%#Eval("Salary")%>

        </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="DeptNo">

        <ItemTemplate>

        <%#Eval("DeptNo")%>

        </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Address">

        <ItemTemplate>

        <%#Eval("Address")%>

        </ItemTemplate>

        </asp:TemplateField>

       

        <asp:TemplateField HeaderText="Country">

        <ItemTemplate>

        <%#Eval("Country")%>

        </ItemTemplate>

        </asp:TemplateField>

       

        <asp:TemplateField HeaderText="State">

        <ItemTemplate>

        <%#Eval("State")%>

        </ItemTemplate>

        </asp:TemplateField>

       

        <asp:TemplateField HeaderText="City">

        <ItemTemplate>

        <%#Eval("City")%>

        </ItemTemplate>

        </asp:TemplateField>       

            <asp:TemplateField HeaderText="Image">

        <ItemTemplate>

      <asp:Image ID="main" runat="server" Height="100" Width="100"/>

        </ItemTemplate>

        </asp:TemplateField>       

      

     <%-- <asp:TemplateField HeaderText="Edit">

      <ItemTemplate>

      <a id="Edit" visible="true" href="Employee.aspx?ID=<%#Eval("Sno")%>">Edit</a>

      </ItemTemplate>

      </asp:TemplateField>--%>          

       

        </Columns>

            <SelectedRowStyle BackColor="#FF66FF" />

            <EditRowStyle BackColor="Fuchsia" />

        </asp:GridView>

        </ContentTemplate>

        </asp:UpdatePanel>

        </td>

    </tr>

    </table>

    </div>

    </form>

</body>

</html>


Code Behind File:


using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

 

public partial class _Default : System.Web.UI.Page

{

    DataSet ds = new DataSet();

    protected void Page_Load(object sender, EventArgs e)

    {

          if(!this.IsPostBack)

            {

 

                BindGrid();

            }  

     }

//This method is used to bind Table to GridView

    private void BindGrid()

    {

        SqlConnection con = new SqlConnection("");

        SqlDataAdapter da = new SqlDataAdapter("select * from emp", con);

        da.Fill(ds, "Emp");

        GridView1.DataSource = ds;

        GridView1.DataBind();

 

    }

    protected void GridView1_RowUpdated(object sender, GridViewUpdatedEventArgs e)

    {

       

    }

    protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)

    {

        //int no = Convert.ToInt32(GridView1.Rows[e.RowIndex].Cells[0].Text);

    }

    protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)

    {

 

    }

    //This event will fire after the single click on Grid Row

    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)

    {

        int id =Convert.ToInt32(GridView1.DataKeys[e.NewEditIndex].Value);

       Response.Redirect("Employee.aspx?ID="+id+"");       

    }

    //This event will use to bind GridRows if UserClicks on the row ROWDATABOUND event will b fired 

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

    {    

        try

        {

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

//This is used to Bind IMAGES on GRIDVIEW column

                DataRowView drview = (DataRowView)e.Row.DataItem;

                ((Image)e.Row.FindControl("main")).ImageUrl = "~/Images/" + drview.Row.ItemArray[8].ToString();

 

                LinkButton _doubleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];

                string _jsDouble = ClientScript.GetPostBackClientHyperlink(_doubleClickButton, "");

                e.Row.Attributes["ondblclick"] = _jsDouble;

                e.Row.Attributes["onmouseover"] = "javascript:return setMouseOverColor(this);";

                e.Row.Attributes["onmouseout"] = "javascript:return setMouseOutColor(this);";

                //Newly changed

               //e.Row.Attributes.Add("onclick", "javascript:ChangeRowColor('" + e.Row.ClientID + "')");

            }

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';";

                e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

                string jsCommand = string.Format("if ({2} != {1}) __doPostBack('{0}','Edit${1}')", GridView1.ID, e.Row.RowIndex, GridView1.EditIndex);

             

                foreach (TableCell c in e.Row.Cells)

                {

                    if (c == e.Row.Cells[1])

                    {

                    }

                    else

                    {

                        c.Attributes["onclick"] += jsCommand;

                       

                    }

                }

            }

        }

        catch (Exception ex)

        {

 

        }  

    }

    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

    {

      

    }

    protected void GridView1_SelectedIndexChanging(object sender, GridViewSelectEventArgs e)

    {

     

    }

    //This event is used to check the click whether it is single or double click

    protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)

    {

        int selectedIndex = int.Parse(e.CommandArgument.ToString());

        string _commandName = e.CommandName;

        switch (_commandName)

        {

            case ("SingleClick"):

                {

                   

                    GridView1.SelectedIndex = selectedIndex;

                    object send = new object();

                    GridViewEditEventArgs ex = new GridViewEditEventArgs(selectedIndex);

                  

                   GridView1_RowEditing(send, ex);

                   

                    break;

                }

        }

    }

    //this event is used to change the background color of row if user mouseover the row.

    protected void GridView1_DataBound(object sender, EventArgs e)

    {

        foreach (GridViewRow row in GridView1.Rows)

        {

            if (row.RowType == DataControlRowType.DataRow)

            {

                // Add javascript to highlight row

                row.Attributes["onmouseover"] =

                   "javascript:NAC_ChangeBackColor(this, true, '#BAD5E8'); this.style.cursor = 'hand';";

                row.Attributes["onmouseout"] = "javascript:NAC_ChangeBackColor(this, false, '');";

               

               

                foreach (Control c in row.Cells[0].Controls)

                {

                    if (c is LinkButton)

                    {

                        LinkButton selectButton = (LinkButton)c;

 

                        // Get the javascript which is assigned to this LinkButton

                        String jsClick = ClientScript.GetPostBackClientHyperlink(selectButton, "");

 

                        // Get command name in lowercase

                        String commandName = selectButton.CommandName.ToLower();

 

                        // Add this javascript to the onclick Attribute of the row

                        if (commandName == "details")

                            row.Attributes["onclick"] = "NAC_StartSingleClick(\"" + jsClick + "\");";

 

                        // Add this javascript to the ondblclick Attribute of the row

                        if (commandName == "edit")

                            row.Attributes["ondblclick"] = "NAC_StartDblClick(\"" + jsClick + "\");";

 

                        // set the link button to be invisible

                        if (commandName == "details" || commandName == "edit")

                            selectButton.Visible = false;

                    }

                }

            }

        }

    }

    //this is the preRender event used to render the control from client side to server side

    protected void GridView1_PreRender(object sender, EventArgs e)

    {

 

    }

}

Login to add your contents and source code to this article
share this article :
post comment
 

very good!

Posted by viet vo quoc Nov 16, 2011

Very useful!!keep sharing Hari Krishna.

Posted by viet vo quoc Nov 16, 2011

eiadd

Posted by lover csharpasp Jul 05, 2011

Can you provide the employee.aspx file

Posted by Rajan Ebenezer Feb 12, 2011
Become a Sponsor
PREMIUM SPONSORS
  • Get 2 Months Free of ASP.NET Hosting for Only $4.95/month! Receive FREE MS SQL and MySQL Databases Including ASP.NET 4/3.5, MVC 3.0, Silverlight 4, Windows 2008/IIS 7.0 Plus FREE IIS 7 Modules. Host UNLIMITED ASP.NET Web Sites - Click Here!
    Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.
Team Foundation Server Hosting
Become a Sponsor