Guide on accessing and setting values in GridView Cell using JavaScript

Question

Guide on accessing and setting values in GridView Cell using JavaScript

Within my layout, I have two labels named FixedTotal and TotalPercent, as well as a single row GridView with columns labeled ReferenceID, Percentage, and Amount.

    ReferenceID       Percentage          Amount
   --------------    -------------       --------
        1                5                 1000

My goal is to update the "Percentage" column value of 5 with the text from the TotalPercent label, and to display the "Amount" column value of 1000 in the FixedTotal label. Additionally, I need to verify whether the GridView contains any rows. How can I accomplish this task given that the columns are BoundField Columns?

javascript .net asp.net gridview

Answer 1

Answer №1

Manipulating data in gridview cells requires knowledge of the Row Index of the gridview. To achieve this, you can provide the row index as a parameter when invoking a JavaScript function from the gridview.

<script language="javascript" type="text/javascript">
function update(rowIndexOfGridview) {
    var ri = rowIndexOfGridview; 
    var grd = document.getElementById('<%= GridView1.ClientID %>');

    CellValue = grd.rows[ri].cells[1].childNodes[0].value; // get
    grd.rows[ri].cells[2].childNodes[0].value = CellValue; // assign
    ...........
    .............
}

Answer 2

Manipulating data in gridview cells requires knowledge of the Row Index of the gridview. To achieve this, you can provide the row index as a parameter when invoking a JavaScript function from the gridview.

<script language="javascript" type="text/javascript">
function update(rowIndexOfGridview) {
    var ri = rowIndexOfGridview; 
    var grd = document.getElementById('<%= GridView1.ClientID %>');

    CellValue = grd.rows[ri].cells[1].childNodes[0].value; // get
    grd.rows[ri].cells[2].childNodes[0].value = CellValue; // assign
    ...........
    .............
}

Answer 3

Answer №2

<script language="javascript" type="text/javascript"> 
function Calculate() 
<br/>
{ 
<br/>
var grid = document.getElementById("<%=GridID.ClientID%>");
<br/> 
var total = 0; <br/>
for (var j = 1; j < grid.rows.length; j++)<br/>
 { <br/>
var CellValue = grid.rows[j].getElementsByTagName("input"); 
<br/>if (!CellValue[4].value) {total  += 0; } else { total += parseFloat(CellValue[4].value);} } 
<br/>
document.getElementById("<%=TextBox1.ClientID%>").value = total; 
 }
<br/>
 </script>
------------------------------------------------------------------------



<asp:TemplateField HeaderText="Current payment" >
                            <ItemTemplate>
                                <asp:TextBox ID="cridnvalue" runat="server" Width="70px" BorderStyle="None" onkeyup="CalculateTax();" ></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle Width="120px" />
                        </asp:TemplateField>

Answer 4

<script language="javascript" type="text/javascript"> 
function Calculate() 
<br/>
{ 
<br/>
var grid = document.getElementById("<%=GridID.ClientID%>");
<br/> 
var total = 0; <br/>
for (var j = 1; j < grid.rows.length; j++)<br/>
 { <br/>
var CellValue = grid.rows[j].getElementsByTagName("input"); 
<br/>if (!CellValue[4].value) {total  += 0; } else { total += parseFloat(CellValue[4].value);} } 
<br/>
document.getElementById("<%=TextBox1.ClientID%>").value = total; 
 }
<br/>
 </script>
------------------------------------------------------------------------



<asp:TemplateField HeaderText="Current payment" >
                            <ItemTemplate>
                                <asp:TextBox ID="cridnvalue" runat="server" Width="70px" BorderStyle="None" onkeyup="CalculateTax();" ></asp:TextBox>
                            </ItemTemplate>
                            <ItemStyle Width="120px" />
                        </asp:TemplateField>

Answer 5

Answer №3

Feel free to give this a try. I personally tested it and encountered no errors.

<script language="javascript" type="text/javascript">
function updateRowInGridView(index) {
    var rowIndex = index; 
    var grid = document.getElementById('<%= GridView1.ClientID %>');

    var cellValue = grid.rows[rowIndex].cells[1].childNodes[0].textContent); // retrieve
    grid.rows[rowIndex].cells[2].childNodes[0].textContent = cellValue; // assign
}
</script>

Answer 6

Feel free to give this a try. I personally tested it and encountered no errors.

<script language="javascript" type="text/javascript">
function updateRowInGridView(index) {
    var rowIndex = index; 
    var grid = document.getElementById('<%= GridView1.ClientID %>');

    var cellValue = grid.rows[rowIndex].cells[1].childNodes[0].textContent); // retrieve
    grid.rows[rowIndex].cells[2].childNodes[0].textContent = cellValue; // assign
}
</script>

Guide on accessing and setting values in GridView Cell using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

What is the process for adding a dot to the package.json file using the npm-pkg command?

Node.js: The Ultimate Solution for Automatic Data Saving

How to properly format JSON responses in Node.js or Express

The full screen menu is exclusively displayed in the navigation bar

Submitting a file using Ajax XMLHttpRequest

Tips for assigning a standard or custom value using JavaScript

Dynamic Loading of CSS Styles

Error occurs during datetime parsing due to a Format Exception

What is the best way to access and utilize the data stored in my database using mySQL, PHP, and JavaScript?

Apply a specific style conditionally using Angular's ng-repeat directive

Navigating a secure Koa authentication flow using compose mechanism

Bringing a module into Vue framework and transferring information

Encountering difficulty when trying to define the onComplete function in Conf.ts. A type error is occurring, stating that '(passed: any) => void' is not compatible with type '() => void'.ts(2322)'

Looking for an alternative method since jQuery has deprecated the use of '.toggle()' function

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

"Utilize binding in ReactJS to maintain the correct context

Installing a specific version of yarn on Ubuntu

Navigating with the keys is disabled until an item is chosen

On the second attempt to call setState within the componentDidMount method, it is not functioning as expected

In order for Angular forms to be considered valid, they must fall into one of two form