Displaying the Cell Value of a gridview in a TextBox, on click of the Row in Javascript. RRS feed

  • Question

  • User1109297939 posted


    I need some help regarding displaying cell value.

    I have a gridview in which I have out onclick event handler in the RowDataBound event.

    protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
                if (e.Row.RowType == DataControlRowType.DataRow)
                   e.Row.Attributes.Add("onclick", string.Format("DisplayDetails('{0}');", e.Row.RowIndex));

    The DisplayDetails function, I want to run it on the Client Side. 

    function DisplayDetails(row) {
             var gridView = document.getElementById('gridview1');  
             document.getElementById("textbox1").value = gridView.rows[row + 1].cells[0].innerText  ;
             document.getElementById("textbox2").value = gridView.rows[row + 1].cells[1].innerText ;

    The code works if I click on the first row of each Page.

    Now when I ever I click on the other Rows, I get errors saying :

    JavaScript runtime error: Unable to get property 'innerText' of undefined or null reference

    Sometimes I get this too

    JavaScript runtime error: Unable to get property 'cells' of undefined or null reference

    please help.

    P.S Code works if I write

    gridView.rows[row ].cells[0].innerText;

    instead of

    gridView.rows[row + 1].cells[0].innerText;

    but it gives the value of the previous row.

    Wednesday, May 9, 2018 1:09 PM

All replies

  • User-330142929 posted

    Hi labaningombam,

    e.Row.Attributes.Add("onclick", string.Format("DisplayDetails('{0}');", e.Row.RowIndex));

    document.getElementById("textbox1").value = gridView.rows[row + 1].cells[0].innerText  ;

    Based on your code, we can find you pass RowIndex as string from your code behind, but you directly use it add to a number on JavaScript client side. As you know, JavaScript is a weakly typed language. I suggest you can parse the variable “row” to int, then use it to find the row and cells based on row index. The following sample is for your reference.


        <script type="text/javascript">
            function DisplayDetails(row) {
                var grid = document.getElementById('gridview1');
                var rowindex = parseInt(row) + 1;  //or you can use Number(row) too.
                document.getElementById("textBox1").value = grid.rows[rowindex].cells[0].innerText;
                document.getElementById("textBox2").value = grid.rows[rowindex].cells[1].innerText;


                <asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                        <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="ID" />
                        <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                        <asp:BoundField DataField="Price" HeaderText="Price" SortExpression="Price" />
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=(localdb)\mssqllocaldb;Initial Catalog=DataStore;Integrated Security=True;MultipleActiveResultSets=True;Application Name=EntityFramework" ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>
                <asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
                <asp:TextBox ID="textBox2" runat="server"></asp:TextBox>

    GIF Demo.

    Besides, another approach: you can pass RowIndex as int instead of putting it in ''.

    string.Format("DisplayDetails({0});", e.Row.RowIndex));

    Best Regards


    Thursday, May 10, 2018 6:33 AM