ASP.NET - Reading DataGrid cell value using javascript

Asked By Rajiv Sharma
01-Aug-11 08:17 AM
hi,

Can any one give me code for reading the cell value of Datagrid with javascript
  Ravi S replied to Rajiv Sharma
01-Aug-11 08:19 AM
HI

Check this

http://social.msdn.microsoft.com/Forums/en/wpf/thread/74332b78-6bfd-4ac9-af85-dfd9bec87a29

http://wpfadventures.wordpress.com/2008/12/02/wpf-datagrid-detecting-clicked-cell-and-row/

http://stackoverflow.com/q/2148978/217880

  Ravi S replied to Rajiv Sharma
01-Aug-11 08:19 AM
HI

refer this

script language="javascript" type="text/javascript">
var gridViewCtlId = '<%=ctlGridView.ClientID%>';
    var gridViewCtl = null;
    var curSelRow = null;
    var curRowIdx = -1;
    function getGridViewControl()
    {
        if (null == gridViewCtl)
        {
            gridViewCtl = document.getElementById(gridViewCtlId);
        }
    }
    
    function onGridViewRowSelected(rowIdx)
    {
        var selRow = getSelectedRow(rowIdx);
        if (null != selRow)
        {
            curSelRow = selRow;
            var cellValue = getCellValue(rowIdx, 0);
            alert(cellValue);
        }
    }
    
    function getSelectedRow(rowIdx)
    {
        return getGridRow(rowIdx);
    }
    
    function getGridRow(rowIdx)
    {
        getGridViewControl();
        if (null != gridViewCtl)
        {
            return gridViewCtl.rows[rowIdx];
        }
        return null;
    }
    
    function getGridColumn(rowIdx, colIdx)
    {
        var gridRow = getGridRow(rowIdx);
        if (null != gridRow)
        {
            return gridRow.cells[colIdx];
        }
        return null;
    }
    
    function getCellValue(rowIdx, colIdx)
    {
        var gridCell = getGridColumn(rowIdx, colIdx);
        if (null != gridCell)
        {
            return gridCell.innerText;
        }
        return null;
    }
</script>
  TSN ... replied to Rajiv Sharma
01-Aug-11 08:21 AM
hi..

<%@ 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;

}

}

  Vickey F replied to Rajiv Sharma
01-Aug-11 08:23 AM

If you want to Read the of Control in DataGrid in client side then use jquery.

follow this steps-

step1. create on css clss in aspx page, like this-

<style type ="text/css" >

 

.clslbl

{

}

 

</style>

step2. Assign this css class to control in DataGrid, like this-

<asp:TemplateField>

<ItemTemplate>

<asp:Label ID="lbl"  runat ="server" CssClass ="clslbl" ></asp:Label>

</ItemTemplate>

</asp:TemplateField>

step3. Now access this control ,like this-

<script type="text/javascript">

function ReadControl() {

var value= $('.clslbl).val();
 

}

 

</script>

call this function. to disable the chechBox.

 

Try this code and let me know.

 

  Riley K replied to Rajiv Sharma
01-Aug-11 08:33 AM

Do this way

var parent = document.getElementById("<%=datagrid.ClientID%>");
 
var tr = parent.getElementsByTagName("TR")[0];
 
var tc = tr.getElementsByTagName("TD")[0];
 
var val = parseInt(tc.innerHTML);


Try this and let me know
  Reena Jain replied to Rajiv Sharma
01-Aug-11 08:36 AM
hi,

implement the DataGridView_Click(object sender, dataGrideventArgs e) event handler by the appropriate code
public void yourDataGridView_Click(object sender, DataGridViewEventHandler e)
{
/*Put the value of the current cell that has the focus into oString */
string oString = yourDataGridView[yourDataGridView.CurrentCell.RowIndex,yourDataGridView.CurrentCell.ColumnIndex].ToString();
// then set yourTextBox.text to oString
yourTextBox.Text = oString;
}

hope this will help you
  Rajiv Sharma replied to Riley K
01-Aug-11 08:54 AM
thanks for reply but I am getting error as

Microsoft JScript runtime error: 'undefined' is null or not an object for tr and tc
  Greg replied to Rajiv Sharma
23-Sep-11 09:05 PM
I have seen this example posted in several different web sites. I copied into my code. Change DataGrid name, use onload in the <body onload="tryit">, and in the JavaScript tryit(), I simply called alert(getCellValue(2, 2)); while the DataGrid shows a much bigger table. But the value it returned in alert pop-up, is "undefined".

Do you know where I did wrong?
Create New Account
help
Web Application How can work with gridview inside a gridview by using single database table? Explain with an example? Hi use this code <%@ Page Language = "C#" AutoEventWireup = "true" CodeFile = "DataRelation.aspx.cs" Inherits = "DataRelation" %> <%@ Import Namespace = "System.Data" %> <! DOCTYPE transitional.dtd" > < html xmlns = "http: / / www.w3.org / 1999 / xhtml" > < head runat = "server" > < title > Untitled Page < / title > < / head > < body > < form id = "form1" runat = "server" > < div > < asp:GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "False" > < Columns > < asp:BoundField DataField = "CompanyName" HeaderText = "CompanyName" / > < asp:TemplateField > < ItemTemplate > < asp:GridView ID = "GridView2" DataSource = '<%#((DataRowView)Container.DataItem).CreateChildView("ParentChild") %> ' runat = "server" AutoGenerateColumns = "False" > < Columns > < asp:BoundField DataField = "Dept" HeaderText = "Department" / > < asp:BoundField DataField = "name" HeaderText = "Name" / > < / Columns > < / asp:GridView > < / ItemTemplate > < / asp:TemplateField > < / Columns > < / asp:GridView > < / div > < / form > < / body > < / html > using System; using System.Data; using System.Configuration; using System.Collections
how to display different images in gridview i want to display images in gridview using item template See the following articles http: / / www.codeproject.com / KB / aspnet / GridImage.aspx aspx http: / / www.devasp.net / net / articles / display / 692.html Hope this helps. Populating the GridView Control: The next step is to populate the GridView control with data as well as images. Take a look at the code below which is used to populate the GridView. private void BindData() { SqlConnection myConnection = new SqlConnection (ConnectionString); SqlDataAdapter ad = new SqlDataAdapter ( "SELECT UserID, FirstName thousand of times. Now, let's see how we can display the images into the GridView control. Display Images into the GridView Control: The first thing you need to do is to add a template column in the GridView control. Once, you have added the template column simply add an Image server control inside
Re:Export from Gridview to Excel Hi All, Thanks for ur response my question is not only about exporting or disabled once the data is exported. I am using update progress in the Master page which is usedby all asp pages of the project, which is disabling the page, is there any way to close the progress control or suggest me any solution. Please me to overcome this issue. . In this example, we will see how to Export an ASP.Net GridView to Microsoft Excel. In this example we declare one SqlDataSource control, one ImageButton control and one GridView control in an .aspx file. On click ImageButton control be export GridView data to Microsoft Excel. 1. web.config asp.net data control C# asp.net data
11. Use computed columns 12. Use the correct transaction isolation level I. Improving performance in asp.net 1.Disable Session State if you’re not going to use it. 2. flush all outputs with response.flush = true 3. dont do server side validation 4. avoid datagrid use repeater 5. Use HTTPServerUtility.Transfer instead of Response.Redirect 6. Deploy with Release Build 7. Turn off Tracing 8. use Page.IsPostBack 9. handle exceptions well 10. use cache properly 11. Turn Off ViewState if not developing your applications. Over the last 12 years or so of working with asp and asp.net, I have learned to avoid and do certain things that increase your application performance by a massive amount! Below are my top 20 tips to improving ASP.net application Performance. • Disable Session State Disable Session State if you’re not going to use
ASP.NET DataList and DataRepeater Controls This is the third article in a three part series of articles pertaining to the understanding and application of ASP.NET 2.0 data controls. This article will address common functionality that may be required from ASP.NET DataList and DataRepeater data controls ASP.NET 2.0 Data Controls Author: Douglas Minnaar The intent of this series is to provide