[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 554
  • Last Modified:

javascript addition in ASP.NET DATAGRID

Experts,

Needed functionality:

I have a ASP.NET Datagrid which has textboxes in each and every cell.

I have to add the first 7 columns and display the sum in the last column using javascript (something like a sum function in Excel)

I have to do the same thing with the rows. I have to sum up all the rows and display the result in the last row.

Problem:

I am not good with the javascript :-)

How do i reference the textboxes which are inside a datagrid using javascript?

Please help me out

Raj
0
Raju Srivatsavaye
Asked:
Raju Srivatsavaye
  • 8
  • 8
1 Solution
 
Jens FiedererCommented:
For the below code, call the function  init() with <body onload="init()">

Note that if you have other input fields on the page, you might want to exclude those, and not put the onchange on them!



    function dochange() {
        var tr = this.parentNode.parentNode;
        var rowsum = 0.0;
        for (var td = tr.firstChild; td != tr.lastChild; td = td.nextSibling) {
            rowsum += td.firstChild.value - 0;
        }
        tr.lastChild.firstChild.value = rowsum;
       
        var tbody = tr.parentNode;
        var numberOfColumns = tbody.lastChild.childNodes.length;
        var numberOfRows = tbody.childNodes.length;
        var sums = new Array(numberOfColumns);
       
        for (var i = 0; i < numberOfColumns; i++) {
            sums[i] = 0;
        }
       
        for (var row = 1; row < numberOfRows-1; row++) {
            tr = tbody.childNodes[row];
            for (var i = 0; i < numberOfColumns; i++) {
                sums[i] += tr.childNodes[i].firstChild.value - 0;
            }
        }
        for (var i = 0; i < numberOfColumns; i++) {
            tbody.lastChild.childNodes[i].firstChild.value = sums[i];
        }
    }
   
    function init() {
        var cl = document.getElementsByTagName("INPUT");
        for (var i =0; i < cl.length; i++) {
            cl[i].onchange = dochange;
        }
    }



0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
Thanks for the reply

I am sorry to say this but I have some other important task to do before i get to this issue.
When i get to work on this issue, i ll ask you the questions.

Sorry once again


Raj
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
Hello jensfiederer,

Sorry Once again.
Now i am in a point to work on my javascipt. If you are still not mad at me, please respond to this comment. I have couple of questions in your code.

Raj

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Jens FiedererCommented:
Ask away.
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:


I been playing with your code but i does not make sense to me 'coz i am new to Javascript.

It is not adding up any values. It says lastChild.childNodes[i].firstChild.value is null or not an object and displays "NaN" in my last column.

Let me explain my Grid in detail

I have 12 columns and 23 rows (they are fixed)

1st column is a checkbox column and 2nd column is a description column. I have to add the values from the 3rd column thru 9th and display the sum in 10th. And Add 10th and 11th and display the result in 12th.

And From column 3 thru 12, i have to add rows 1st thru 22nd and display result in 23rd row.

Could you please give me some reference to this question and any links where i can get familiar with Javascript.

Regards
Raj

0
 
Jens FiedererCommented:
You didn't mention the checkbox - you said you wanted to add the "first seven columns", and a checkbox does not add very well :-)

So instead of
        for (var td = tr.firstChild; td != tr.lastChild; td = td.nextSibling) {
you would want
        for (var td = tr.childNodes[2]; td != tr.childNodes[9]; td = td.nextSibling) {
and end with
        tr.childNodes[9].firstChild.value = rowsum;
and a similar loop after resetting rowsum to 0.0 with
        for (var td = tr.childNodes[10]; td != tr.childNodes[12]; td = td.nextSibling) {
and end with
        tr.childNodes[12].firstChild.value = rowsum;

When adding the rows, you will need to change
            for (var i = 0; i < numberOfColumns; i++) {
to
            for (var i = 2; i < numberOfColumns; i++) {


for tutorials, try http://www.w3schools.com/js/default.asp
Google will turn up many other good possibilities


0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
It works :-)))))))

Thank you very much for your help

I have couple more functionalities to implement.

1) In my grid, If the check box is checked, the values in the corresponding row should not be added in the total. Can u just tell me how can we check whether the checkbox is checked or not.

2) I have 4 datagrids in my page. I want to show some of the totals we got in this grid in another grid. How can i get the reference of the other grids?

Regards,
Raj

0
 
Jens FiedererCommented:
1)
       if (tr.childNodes[0].firstChild.checked) {
              ....etc....

2)  
If the datagrid has an id of "foo", you can find the table generated from the datagrid by
document.getElementById("foo")
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
I am getting the following error on selecting the checkbox and try to enter values in the grid

childNodes.9.firstChild is null or not an object

I donno what is happening there.


0
 
Jens FiedererCommented:
Why childNodes.9?  I thought the checkbox was in childNodes[0]?

If you are trying to figure out your content, it is often helpful to put in (assuming IE here):

alert(childNodes[0].outerHTML)
for example.

This will give you a box that shows what you are working on.

Maybe there is an empty row that does not have a checkbox in column 0 (first column)?
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:

Even before i include the checkbox code it is showing that error(childNodes.9.firstChild is null or not an object). My Grid has a header which obvious does not have any checkbox.


0
 
Jens FiedererCommented:
Are you skipping over the header?

In my code I did
for (var row = 1; row < numberOfRows-1; row++) {
instead of
for (var row = 0; row < numberOfRows-1; row++) {
to skip over header row....but maybe you have more than 1 row of header?
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
Yeah i have used the same code u have given.

I observed a strange behavior with the checkbox.

I have used alert boxes to get the number of rows and columns for checkbox and the rest of the textboxes

for textbox

tr.parentNode.childNodes.length  - 24
tr.parentNode.lastChild.childNodes.length  - 12

for checkbox

tr.parentNode.childNodes.length  - 12
tr.parentNode.lastChild.childNodes.length  - 2

Isn't that strange?

Raj
0
 
Jens FiedererCommented:
It looks like the checkbox is not in there as a simple <TD><input> construct, but probably nested at a deeper level.

Your "tr" is probably not actually a tr!

Like I mentioned before, doing an alert with outerHTML, in this case
alert(tr.outerHTML)
can let you know what is going on...
0
 
Raju SrivatsavayeSoftware EngineerAuthor Commented:
I got it :-)))))))))))

outerHTML explains everything.
I am no more a novice in javascript.

Thank you very much

U been very helpful

0
 
Jens FiedererCommented:
My pleasure.  Enjoy javascripting, and good luck on your ASP.NET - you should be  "Master Level" soon!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now