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
LVL 9
Raju SrivatsavayeSoftware EngineerAsked:
Who is Participating?
 
Jens FiedererTest Developer/ValidatorCommented:
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
 
Jens FiedererTest Developer/ValidatorCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
Jens FiedererTest Developer/ValidatorCommented:
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 FiedererTest Developer/ValidatorCommented:
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 FiedererTest Developer/ValidatorCommented:
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 FiedererTest Developer/ValidatorCommented:
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 FiedererTest Developer/ValidatorCommented:
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
 
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 FiedererTest Developer/ValidatorCommented:
My pleasure.  Enjoy javascripting, and good luck on your ASP.NET - you should be  "Master Level" soon!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.