CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> General/Other

 How to access row number in editable grid using javascript? [RESOLVED]

Print topic Send  topic

Author Message
andy


Posts: 183
Posted: 04/01/2010, 2:13 PM

I am trying to apply some javascript code to controls in an editable grid, but can't work out how to access the row number of the calling field. Can anyone help?

If I can determine the row number then I can work on the specific calling row. Here's an example with the ???? for the missing code.

<script type="text/javascript">  
function CalcQuantity(){  
  
row_id = ?????; //help  
  
  vQuantity = document.getElementById("editablegridnameQuantity_"+row_id).value;  
  vSalesRate = document.getElementById("editablegridnameSalesRate_"+row_id).value;  
  document.getElementById("editablegridnameNetTotal_"+row_id).value = ((vQuantity * 1) * (vSalesRate * 1)).toFixed(2);  
} 

Thanks to anyone who can help...
_________________
Andy

RAD tools for rich UI controls:
http://www.koolphptools.com
View profile  Send private message
damian

Posts: 838
Posted: 04/01/2010, 3:31 PM

you can see syntax from these posts

http://forums.codecharge.com/posts.php?post_id=108386&s...grid+row+number
http://forums.codecharge.com/posts.php?post_id=107254&s...grid+row+number


_________________
if you found this post useful take the time to help someone else.... :)
View profile  Send private message
andy


Posts: 183
Posted: 04/02/2010, 4:05 AM

Hi Damian

Thanks for your message.
The first post relates to server-side events. I am trying to manipulate with javascript...
The second post doesn't explain how to extract the row number. Sorry it's probably me being dim. :-|

This is what the second post says:
Quote :
That's what I used to think. The trick is to create unique IDs for the row elements you want to work with, e.g., insert something like

id="Textarea1_{EditableGrid1:rowNumber}"

into the HTML element within the Row block, using the appropriate rowNumber variable name.

You canuse the {EditableGridName:rowNumber} syntax on as many elements as you like,
but put some string along with it to identify the element within the row.
Javascript will then have access to every individual element in every row via getElementById().
You probably will have to define the event actions by hand, as the CCS client-side events only fire once AFAIK. (Could be wrong there.)

Can anyone shed any light on how to extract the row number of the calling element using javascript in an editable grid?

I've seen some examples using "LastIndexof" and "split" commands but can't get them to work myself :(

Code example would be great. Thanks
_________________
Andy

RAD tools for rich UI controls:
http://www.koolphptools.com
View profile  Send private message
phaider

Posts: 37
Posted: 04/02/2010, 1:49 PM

Hi Andy,

here is a solution. I have made a lot change with this and it costs me blod , sweat and tears.
Hope you like it and you can use it.

HTML Event (OnChange): Entered in the designer
====================
onchange=return(Set_Fields(this.name,this.form.name));


JS Function included or excluded
============
//JS Functions for InventoryLine

function Set_Fields(FieldName,FormName)
{
if (FieldName.lastIndexOf("_") != -1) {
var FieldIndex = FieldName.substring(FieldName.lastIndexOf("_"),FieldName.length);
} else {
var FieldIndex = "";
}
var productno2 = document[FormName]["productno"+FieldIndex].value;
if (parseInt(productno2) > 0) {
document[FormName]["Quantity"+FieldIndex].value = 1;
if (document[FormName]["ShipmentQty"+FieldIndex]) {
document[FormName]["ShipmentQty"+FieldIndex].value = 1;
}
if (document[FormName]["InvoiceQty"+FieldIndex]) {
document[FormName]["InvoiceQty"+FieldIndex].value = 1;
}
document[FormName]["UnitOfMeasure"+FieldIndex].value = product_UnitOfMeasure[parseInt(productno2)];
if (document[FormName]["UnitCost"+FieldIndex]) {
document[FormName]["UnitCost"+FieldIndex].value = product_UnitCost[parseInt(productno2)];
}
} else {
document[FormName]["Quantity"+FieldIndex].value = 0;
if (document[FormName]["ShipmentQty"+FieldIndex]) {
document[FormName]["ShipmentQty"+FieldIndex].value = 0;
}
if (document[FormName]["InvoiceQty"+FieldIndex]) {
document[FormName]["InvoiceQty"+FieldIndex].value = 0;
}
document[FormName]["UnitOfMeasure"+FieldIndex].value = 0;
if (document[FormName]["UnitCost"+FieldIndex]) {
document[FormName]["UnitCost"+FieldIndex].value = 0;
}
}
return true;
}


//JS Function for converting a Value, if decimals Point is comma
function Konvert2us(FieldValue)
{
var Number = FieldValue;
var PreValue;
var PostValue;
if (Number.indexOf(",") != -1)
{
PreValue = Number.substring(0, Number.indexOf(","));
if (PreValue.indexOf(".") != -1)
PreValue = PreValue.substring(0, Number.indexOf(".")) + PreValue.substring(PreValue.indexOf(".") + 1,PreValue.length);
PostValue = Number.substring(Number.indexOf(",") + 1, Number.length);
} else {
PreValue = Number;
PostValue = "";
}
if (PostValue.length > 2) {
PostValue = PostValue.substring(0, 3);
}
if (Number != "")
Number = Math.round(parseFloat(PreValue + "." + PostValue) * 100) / 100;
else
Number = 0;
return Number;
}

//JS Function for converting Value, if decimals Point is comma vice versa
function Konvert2de(FieldValue)
{
var Number = FieldValue;
Number += "";
if (Number.indexOf(".") != -1)
Number = Number.substring(0, Number.indexOf(".")) + "," +
Number.substring(Number.indexOf(".") + 1, Number.length);
return Number;
}

View profile  Send private message
andy


Posts: 183
Posted: 04/03/2010, 12:09 AM

Hi phaider

Thanks for your suggestion. I'm not sure your code relates to an editable grid though????

Here's the row block in CCS:
gridname=estimatelinedetail

          <tr id="row{RowIDAttribute}" class="Row" title="{RowNameAttribute}" {RowStyleAttribute}>  
            <td width="35">  
 <select style="WIDTH: 120px" id="estimatelinedetailItemRef_{estimatelinedetail:rowNumber}" name="{ItemRef_Name}">  
   <option selected value="">Select Value</option>  
   {ItemRef_Options}  
 </select>  
 <br>  
 <select style="WIDTH: 120px" id="estimatelinedetailPreferredSupplier_{estimatelinedetail:rowNumber}"  
 name="{PreferredSupplier_Name}">  
   <option selected value="">Select Value</option>  
   {PreferredSupplier_Options}  
 </select>  
 <br>  
 <select style="WIDTH: 120px" id="estimatelinedetailClassRef_{estimatelinedetail:rowNumber}" name="{ClassRef_Name}">  
   <option selected value="">Select Value</option>  
   {ClassRef_Options}  
 </select>  
 </td> 

Here is an example of the html source output (row number in bold):

<tr id="row1" class="Row" title="FillRow" >   
<td width="35">   
 <select style="WIDTH: 120px" id="estimatelinedetailItemRef_1" name="ItemRef_1">   
   <option selected value="">Select Value</option>   
   <OPTION VALUE="1">Translation: English-French</OPTION>   
<OPTION VALUE="2" SELECTED>Translation: English-German</OPTION>   
<OPTION VALUE="4">Translation: English-Welsh</OPTION>   
 </select>   
 <br>   
 <select style="WIDTH: 120px" id="estimatelinedetailPreferredSupplier_1" name="PreferredSupplier_1">   
   <option selected value="">Select Value</option>   
   <OPTION VALUE="2">Peter Popovic (Staples Incorporated)</OPTION>   
<OPTION VALUE="5">Pauline Wordsworth (Terminate Terminology)</OPTION>    
 </select>   
 <br>   
 <select style="WIDTH: 120px" id="estimatelinedetailClassRef_1" name="ClassRef_1">   
   <option selected value="">Select Value</option>   
   <OPTION VALUE="1">In-house</OPTION>   
<OPTION VALUE="2">Out-of house</OPTION>   
   
 </select>   
 </td> 

Based on the above code examples, I am trying to extract "1" from the id or name for the row that triggers the js:
e.g.
<td><select id="estimatelinedetailItemRef_1" name="ItemRef_1">
OR
<tr> id="row1" ...

The following code gets the fieldname and then extracts the rownumber after the underscore. Great!
But it always returns the first row in the editable grid irrespective of which row triggers the code.


var fieldname = document.estimatelinedetail.elements[1].name;  
strtpos = fieldname.lastIndexOf("_");   
row_id = fieldname.substring(strtpos+1);   

If anyone can explain how to get the row number for the row that triggers the javascript (in my case onchange event), I'd be grateful.
_________________
Andy

RAD tools for rich UI controls:
http://www.koolphptools.com
View profile  Send private message
Waspman

Posts: 946
Posted: 04/03/2010, 7:00 AM

I might be a bit dim, but can't you just count the row and store it in a hidden field.
I do it starting from 0 ( a session) when the page opens and adding 1 each time a row builds.
I use this to predict which row/record should be assessed by the teacher based on their pre-set monitoring frequency

Sorry If I'm being stupid ;-)
_________________
http://www.waspmedia.co.uk
View profile  Send private message
phaider

Posts: 37
Posted: 04/03/2010, 3:17 PM

Hi andy,

maybe i didn't understand your request or you didn't understand my solution.
If you will get the rownumber (for example ID in / from your database table), then you could solve that with a hidden field.
If you want to retrieve the row number of your editable grid, then my solution is the right one.
in my example the variable "Fieldindex" returns the rown number, because CCS generates for each textbox, checkbox etc.. a alias variable with the suffix _xx (where _xx is equal to the row number).

For example:
If you have a editable grid, with two textboxes called Productno and Quantity, then the generated from CCS is:
row 1: Productno_1, Quantity_1
row 2: Productno_2, Quantity_2
row 3: Productno_3, Quantity_3
row 4: Productno_4, Quantity_4
etc...

In the CCS designer you modify the onchange event with my codesample

the JS function evaluates the rownumber into the field FieldIndex.
Then you can set/get value with that variable.

For example:

var xyz = document[FormName]["Productno"+FieldIndex].value;

HTH

If you have any question, please feel free to contact me

Regards

Peter
View profile  Send private message
andy


Posts: 183
Posted: 04/04/2010, 2:18 PM

I have sussed it out.

Here's how you extract the row number in an editable grid using javascript and pass it to a javascript function.

This is the function that belongs in the head of your html code:
(Note the first 5 lines gets the row number)
<script type="text/javascript">  
function CalcQuantity(field){  
	with (field) {  
var fieldname = name;  
strtpos = fieldname.lastIndexOf("_");   
row_id = fieldname.substring(strtpos+1);   
  
//The following lines of code get values of fields in the calling row and perform calculations and set values of fields with these results    
vQuantity = document.getElementById("estimatelinedetailQuantity_"+row_id).value;  
vPurchaseRate = document.getElementById("estimatelinedetailPurchaseRate_"+row_id).value;  
vSalesRate = document.getElementById("estimatelinedetailSalesRate_"+row_id).value;  
vTaxCodeRef = document.getElementById("estimatelinedetailTaxCodeRef_"+row_id).value;  
vMarkupRate = document.getElementById("estimatelinedetailMarkupRate_"+row_id).value;  
vMarkupRatePercent = document.getElementById("estimatelinedetailMarkupRatePercent_"+row_id).value;  
document.getElementById("estimatelinedetailNetTotal_"+row_id).value =   
  ((vQuantity * 1) * (vSalesRate * 1)).t oFixed(2);  
document.getElementById("estimatelinedetailVATamount_"+row_id).value =   
  ((vQuantity * 1) * (vSalesRate * 1) * (vTaxCodeRef /100)).toFixed(2);  
document.getElementById("estimatelinedetailGrossFee_"+row_id).value =   
  (((vQuantity * 1) * (vSalesRate * 1)) + ((vQuantity * 1) * (vSalesRate * 1) * (vTaxCodeRef /100))).toFixed(2);  
document.getElementById("estimatelinedetailMarkupRate_"+row_id).value =   
  (((vQuantity * 1) * (vSalesRate * 1)) - ((vQuantity * 1) * (vPurchaseRate * 1))).toFixed(2);  
document.getElementById("estimatelinedetailMarkupRatePercent_"+row_id).value =   
  (((((vQuantity * 1) * (vSalesRate * 1)) - ((vQuantity * 1) * (vPurchaseRate * 1)))/((vQuantity * 1) * (vPurchaseRate * 1)))*100).toFixed(2);  
	}  
}  
</script>

This is an example of the event handler code that belongs inside the field code ("<input>") in the body of your html code:
(Note the onchange="CalcQuantity(this)" event handler)
<td width="90"><input id="estimatelinedetailQuantity_{estimatelinedetail:rowNumber}"   
 onchange="CalcQuantity(this)" value="{Quantity}" maxlength="12" size="5" name="{Quantity_Name}"></td>   

The trick is to pass the calling field properties with "this", then to extract its fieldname by getting the name property, and then to chop off the row number suffixed after the underscore.
_________________
Andy

RAD tools for rich UI controls:
http://www.koolphptools.com
View profile  Send private message
CodeChargeMVP

Posts: 473
Posted: 06/28/2010, 11:28 AM

Hello Andy,

Im gonna read it over your solution, I think itll solve my last issue.

If i missunderstand anything, may Ill have to ask you.

My issue starts on the on click event of a buttom into the row grid.

I gotta try to get first just the rownumber.

onclick=getrownumber(this);


function getrownumber(field)
{

alert(field);---> [objectHTMLInputElement]

with (field)
{

var fieldname = name;

alert(fieldname); --->Button1

strtpos= fieldname.lastIndexOf("_");

row_id = fieldname.substring(strtpos+1);

alert(row_id) -->Button1

}


}


is it suppossed than row_id retrieve the active row number of the grid? isnt it?

Whats the mistake?

Greets.
_________________
Best Regards
Entrepeneur | NT Consultant
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

PHP Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.