Skip to main content

GridView row double click and postback using Jquery

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

<!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">
    <style type="text/css">
        .selected
        {
            background-color: Red;
        }
    </style>

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <title></title>

    <script type="text/javascript">
    var selected = null;

$(document).ready(function(){
   $("#<%=GridView1.ClientID %>").find("tr").click(function(){
      $(selected).removeClass("selected");
      $(this).addClass("selected");
      selected = this;
   });
   $("#<%=GridView1.ClientID %>").find("tr").dblclick(function(){

      /* if you just want to dig into that record I would put a custom attribute on the row */
      window.location = "<%=ResolveUrl("~/Default2.aspx")%>?record=" + $(this).find("td:last").text();
      /* or you could have a hidden LinkButton in the row (Text="" or not set) that you could trigger. Make sure you set the CommandName="Something" and CommandArgument="RecordId" */
      $(this).find("a").click();
   });

});


    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        //Create Object of person class
        Person personObject = new Person();
        //Assign Person list to GridView
        GridView1.DataSource = personObject.GetPersonList();
        //Call Bindmethod of GridView
        GridView1.DataBind();

    }
}
public class Person
{
    public int ID { get; set; }
    public string Name { get; set; }
    public int Age { get; set; }
    public List<Person> GetPersonList()
    {
        //Retrun List of Person
        List<Person> list = new List<Person>()
        {
            new Person{ID=1,Name="Person1",Age=32},
            new Person{ID=2,Name="Person2",Age=45},
            new Person{ID=3,Name="Person3",Age=43},
            new Person{ID=4,Name="Person4",Age=21},
            new Person{ID=5,Name="Person5",Age=76},
            new Person{ID=6,Name="Person6",Age=54},

        };

        return list;

    }
}

Comments

  1. Not good, its excellent post.

    ReplyDelete
  2. gr8 post,

    Can you tell me how to get cell value if the cell is visible false by changing the below code.
    $(this).find("td:last").text();


    ReplyDelete

Post a Comment

Popular posts from this blog