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

Question

User1109297939 posted

Hi,

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.

Answer 1

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.

JavaScript.

    <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;
        }
    </script>

Aspx.

        <div>
            <asp:GridView ID="gridview1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
                <Columns>
                    <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" />
                </Columns>
            </asp:GridView>
            <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>
        </div>

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

Abraham