Saturday, 5 January 2013

JQuery:How to get GridView Cell Data in ASP.NET using C#/VB.NET

JQuery:How to get GridView Cell Data in ASP.NET using C#/VB.NET
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>JQuery:How to get GridView Cell Data in ASP.NET using C#/VB.NET</title>

    <style type="text/css">
    body
    {
        font-family: Arial;
        font-size : 10pt;
    }
    .selected
    {
        background-color: #FFCAE1;
    }
    </style>

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

    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#gv_GetCellData tr:has(td)").hover(function (e) {
                $(this).css("cursor", "pointer");
            });
            $("#gv_GetCellData tr:has(td)").click(function (e) {
                var selTD = $(e.target).closest("td");
                $("#gv_GetCellData td").removeClass("selected");
                selTD.addClass("selected");
                $("#lblSelected").html(' <b> ' + selTD.text() + '</b>');
            });
        })
    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
         <asp:GridView ID="gv_GetCellData" runat="server" BackColor="White" BorderColor="#CC9966"
            BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Font-Names="Georgia" Font-Size="Small"
            Width="375px">
            <FooterStyle BackColor="Tan" />
            <AlternatingRowStyle BackColor="#E6E6E1" />
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>     
            <br />
            <br />
            Selected cell value is : <asp:Label id="lblSelected" runat="server"  ForeColor="Red"></asp:Label>
        </div>
    </form>
</body>
</html>

In C#:
using System.Data;

public partial class GetGridCellData : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridData();
        }
    }
    protected void BindGridData()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("EMP ID"), new DataColumn("EMP Name") });
        dt.Rows.Add("1", "Kishore");
        dt.Rows.Add("2", "Roja");
        dt.Rows.Add("3", "Satyam");
        dt.Rows.Add("4", "Raghava");
        dt.Rows.Add("5", "Nag");
        dt.Rows.Add("6", "Krishna");
        dt.Rows.Add("7", "Purna Anil");
        dt.Rows.Add("8", "Sowji");
        dt.Rows.Add("9", "Abhi");
        dt.Rows.Add("10", "Sreenu");
        dt.Rows.Add("11", "Ashok");
        dt.Rows.Add("12", "Sathish");
        dt.Rows.Add("13", "Purna");
        gv_GetCellData.DataSource = dt;
        gv_GetCellData.DataBind();
    }
}

In VB.NET:
Imports System.Data

Partial Public Class GetGridCellData
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            BindGridData()
        End If
    End Sub
    Protected Sub BindGridData()
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("EMP ID"), New DataColumn("EMP Name")})
        dt.Rows.Add("1", "Kishore")
        dt.Rows.Add("2", "Roja")
        dt.Rows.Add("3", "Satyam")
        dt.Rows.Add("4", "Raghava")
        dt.Rows.Add("5", "Nag")
        dt.Rows.Add("6", "Krishna")
        dt.Rows.Add("7", "Purna Anil")
        dt.Rows.Add("8", "Sowji")
        dt.Rows.Add("9", "Abhi")
        dt.Rows.Add("10", "Sreenu")
        dt.Rows.Add("11", "Ashok")
        dt.Rows.Add("12", "Sathish")
        dt.Rows.Add("13", "Purna")
        gv_GetCellData.DataSource = dt
        gv_GetCellData.DataBind()
    End Sub
End Class

Output:

No comments:

Post a Comment

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.