Sunday, January 3, 2010

How to get cell value of gridview 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">
    <title></title>

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

    <script type="text/javascript">
        $(document).ready(function() {
            var list = "";
            $("#btnGet").click(function() {
                $("#<%=GridView1.ClientID %> tr").each(function() {
                    //Skip first(header) row
                    if (!this.rowIndex) return;
                    var age = $(this).find("td:last").html();
                    list += age + "</br>";

                });
                $("#listAge").html(list)
            });

        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    <asp:GridView ID="GridView1" runat="server">
    </asp:GridView>
    <input type="button" id="btnGet" value="Get Cell Value" />
    <div id="listAge">
    </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;

    }

}

9 comments :

  1. Thank you so much.
    Very very helpful.

    ReplyDelete
  2. Thank you so much.

    This saved me a ton of time.


    Ruddy

    ReplyDelete
  3. grt post.Can u tell if i want to get cell value of
    second column then wht i have to change in the below line of code.
    var age = $(this).find("td:last").html();
    thx in advance.

    ReplyDelete
  4. Hi Ali

    try this
    var val= $(this).find("td:eq(1)").html();

    ReplyDelete
  5. grt post.
    Suppose i the above grid is another column "Test".
    and it's all cells is empty.Now i want to add text
    in the Test cells.
    for example:
    Id Name Age Test
    1 abc 232

    how i add value in test column using jquery.
    thnx in advance.
    i am stuck for last two days.

    ReplyDelete
  6. Thnx, for recent answer during the time span i
    get cell value of second column using the below line.
    var cells = $(this).find('td');
    lstName = cells.get(2).outerText;

    ReplyDelete
  7. Good article.I really think what you said is right,in modern society,we have so many troubles,if you feel nothing to relax yourself,I suggest you to play the wow and some other games,and you can come to my page to find more information about Buy WOW Gold and Cheap RS Gold

    ReplyDelete
  8. Excellent post, Can you tell me if the cell is visible false then how to get the cell value by changing the below code.
    $(this).find('td:last').Text();

    ReplyDelete
  9. thank you so much but can you show me how to get value from hidden conlumn

    ReplyDelete