Solved

Calculate difference in fields when user inputs

Posted on 2008-09-29
8
162 Views
Last Modified: 2012-05-05
Hi
I have 6 fields as follows on a ASP.net datagridview as follows.
The fields are for entering the number of days in two periods, say called  X & Y or to calculate the difference in the two period - the user needs both options.
1) Number of Days X
2) Number of Days Y
3) Start Date X
4) End Date X
5) Start Date Y
6) End Date Y

The user can enter "Number of X" & "Number of Y"

or choose a start and end date and have fields 1) & 2) calculated automatically.

Fields 3-6 give ajax popup calendars.

IF the user chooses a start and end date in fields 3) & 4), field 1) should be calculated as field 4)-field 3)
IF the user chooses a start and end date in fields 5) & 6), field 2) should be calculated as field 6)-field 5)

I'm stuck at how to trigger the calcs of field 1) & field 2)  when user makes change to fields 3-6.

The number of rows can change when user clicks on an "Add" button. This is an inmemory dataset, it is not linked to a database.

I presume there is some javascript I could add or something and it needs to be added as each row is added?  Or should it be done server side?

Thanks in advance for code to solve this problem.
0
Comment
Question by:rwallacej
  • 5
  • 3
8 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 22596139
This can be done on the client using event sinks.

Add "onchange=calc_1();" to field 4 and "onchange=calc_2();" to field 6

function $(id) { return document.getElementById(id); } // shorthand method

function calc_1() {
    var from_date = $('START_DATE_X');
    var thru_date = $('END_DATE_X');
    if (!from_date) { alert('Invalid "from" date'); return false; }
    if (!thru_date) { alert('Invalid "thru" date'); return false; }
    var num_days = thru_date - from_date; // this may need to be altered, depending upon where the value is
    $('Number_of_days_X').value = num_days;
    return num_days;
}

function calc_2() {
    var from_date = $('START_DATE_Y');
    var thru_date = $('END_DATE_Y');
    if (!from_date) { alert('Invalid "from" date'); return false; }
    if (!thru_date) { alert('Invalid "thru" date'); return false; }
    var num_days = thru_date - from_date; // this may need to be altered, depending upon where the value is
    $('Number_of_days_X').value = num_days;
    return num_days;
}

You can further optimize the functions, combing them into one, if you wish.

Please note the functions are untested, and bugs may exist.
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22596149
Of course, the statement in "calc_2" shown as:

$('Number_of_days_X').value

should be:

$('Number_of_days_Y').value
0
 

Author Comment

by:rwallacej
ID: 22596176
Hi BadotzDate

Thanks for feedback

Before I commence, please advise how the line
var from_date = $('START_DATE_X');  
(and subsequent like this)
works?

How does javascript know which row of the datagridview I am on to be able to get the correct text field?

I understand the return document.getElementById(id);  but I'd think that different rows on the gridview will have different IDs for the "Number of Days X" field

Thanks
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22596647
I do not know where the selected day value is with the calendar object; that is what you have to find out.

And are you saying that fields 1 and 2 are repeated in a grid? If that is the case, then yes, you will have to pull out the calendar object values for each row, and stuff the values for fields 1 and 2 in a similar manner.

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:rwallacej
ID: 22596668
BadotzDate,

all fields are repeated in grid - this is the problem with getting values by their id
0
 
LVL 29

Accepted Solution

by:
Badotz earned 500 total points
ID: 22596974
You will have to trap the "onchange" event for the grid, and determine - by interrogating the event object - what element in the grid triggered the event. If it is eiter of the thru dates, then you can proceed, otherwise not.

You should be able to use the column of the cell to determine what triggered the event, since giving every cell a unique id attribute seems like overkill.

Again, these are untested, and bugs may exist. The logic seems correct; I apologize for my lack of .NET knowledge.

function resolve_event(ev) { 

    var evnt = { evt: null, tgt: null };

    if (ev === undefined) { ev = window.event; }

    evnt.evt = ev || window.event; 

    evnt.tgt = evnt.evt.target || evnt.evt.srcElement; 

    if (evnt.tgt.nodeType == 3) { // defeat Safari bug 

        evnt.tgt = evnt.tgt.parentNode; 

    }

    return evnt;

}
 

function grid_change(e) {

    //

    // eobj	JSON object containing the event "target" and the parent event

    // col	column of grid for end date "X" or "Y"

    // row	row of grid for end date "X" or "Y"

    // g	grid object

    // c	column for # days (1 or 2)

    //

    eobj = resolve_event(e);

    var col = Number(eobj.tgt.column); // syntax may be wrong for "column"

    if (col == 4 || col == 6) { 

        var c = (col / 2) - 1;

        var g = $('YOUR_GRID_ID');

        r = eobj.tgt.row; // syntax may be wrong for "row"

        g.row[row].col[c].value = g.row[row].col[col].value - g.row[row].col[col - 1].value;

}

Open in new window

0
 

Author Closing Comment

by:rwallacej
ID: 31501129
thank-you very much; this has helped me in getting solution
regards,
rwallacej
0
 
LVL 29

Expert Comment

by:Badotz
ID: 22597840
No worries - glad to help.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SQL Login 17 40
Angular- typeahead works but need to change 2 things 5 18
Objects on Same Line 2 18
What namespace do I need to import? 2 0
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now