Posted: 06/10/2005, 3:19 AM |
|
I’d like to provide several tips on how to access the control values of Editable Grids. Both client side (JavaScript) and server side (PHP, ASP)
code is provided.
As you may know the control names on Live Page are a bit different in editable grid than configured on a CodeCharge Studio page. If you check the
View Source of live page that includes an editable grid you’ll see that control names are not exactly same
as in created in design mode, e.g. Hidden1 is replaced with:
Hidden1_1
Hidden1_2
Hidden1_3
etc.
where 1,2,3, are grid row numbers. This makes controls in every row unique. Thus control value cannot be accessed via
document.form_name.field_name.value
but rather via
document.form_name.field_name_1.value
document.form_name.field_name_2.value
or this.value
Other methods of accessing those values are also available. For example all form input elements values are stored in <form_name>Elements
array and you can access an editable grid row via <form_name>Elements[j].
To access a specific element you can use
<form_name>Elements[j]<form_name><control_name>ID].value
e.g.
employeesElements[j][employeesdepartment_idID].value
The "Elements" array and its elements (controls variables) are created in the GetFormScript() function that can be found in page_name.php(.asp) file.
You can also find it by looking at the HTML Source of the page.
Here is a part of this function with the form "employees" containing 3 empty rows, 1 textbox emp_name,
1 listbox department_id and delete checkbox:
...
var employeesEmptyRows = 3;
var employeesemp_nameID = 0
var employeesdepartment_idID = 1
var employeesDeleteControl = 2;
...
Keep in mind that the above also applies to forms that already have some JavaScript code generated by CCS, e.g. Date Picker or any client-side action, etc.
And now a few examples.
Create "Select All" link that checks all Delete checkboxes.
1. Position the cursor next to the Submit and Delete buttons and add a hyperlink from ToolBox/HTML window. As it’s "URL" specify the JavaScript function
javascript:select_all()
2. Create the custom JavaScript function below in the <head> section of the HTML.
<script language="JavaScript">
function select_all(){
init<form_name>Elements();
for(var j = 0; j < <form_name>Elements.length-<form_name>EmptyRows; j++){
if (<form_name>Elements[j][ <form_name>DeleteControl].checked)
<form_name>Elements[j][<form_name>DeleteControl].checked = false;
else
<form_name>Elements[j][<form_name>DeleteControl].checked = true;
}
}
</script>
For example if form name is "employees" then the code would be
<script language="JavaScript">
function select_all(){
initemployeesElements();
for(var j = 0; j < employeesElements.length-employeesEmptyRows; j++){
if (employeesElements[j][employeesDeleteControl].checked)
employeesElements[j][employeesDeleteControl].checked = false;
else
employeesElements[j][employeesDeleteControl].checked = true;
}
}
</script>
How to access control values.
Sometimes you may need to loop through an editable grid’s rows and modify or print control values. You can access those values using the following code:
init<form_name>Elements();
for(var j = 0; j < <form_name>Elements.length; j++){
alert('TextBox value:' + <form_name>Elements[j][<form_name><textbox_name>ID].value +
', ListBox value:' +
<form_name>Elements[j][<form_name<listbox_name>ID].value +
', ListBox displayed text' + <form_name>Elements[j][<form_name><listbox_name>ID].options
[<form_name>Elements[j][<form_name><lustbox_name>ID].selectedIndex].text);
}
E.g. for a form "employees", controls Textbox "emp_name" and ListBox "department_id"
initemployeesElements();
for(var j = 0; j < employeesElements.length; j++){
alert('Name:' + employeesElements[j][employeesemp_nameID].value + ' department:' +
employeesElements[j][employeesdepartment_idID].value + '-' + employeesElements[j][employeesdepartment_idID].options
[employeesElements[j][employeesdepartment_idID].selectedIndex].text);
}
Accessing editable grid’s controls via server side code.
PHP
$form_name->field_name->GetValue() or $form_name->ds->field_name->GetValue()
ASP
form_name.field_name.Value or form_name.DataSource.field_name.Value
Sometimes this approach doesn’t work, for example when field is not used by the Insert or Update statements, or the Value cannot be accessed
in button’s onClick event (server). In this case you can retrieve values by CCS
CCGetParam() or CCGetFromPost() functions.
Thus if you need to loop through all rows and access a control value you’d refer to it as
name_j, where "j" is row number. Here is sample code that prints control values:
PHP
global $form_name;
for ($j = 1; $j <= $form_name->PageSize + $form_name->EmptyRows; $j++)
if (strlen(CCGetParam("field_name_" . $j, ""))!=0 )
echo "Field value in row " . $j. " is " . CCGetParam("field_name_" . $j, "")."<br>";
else
echo "Field value in row ". $j." is empty<br>";
ASP
Dim j
for j = 1 to form_name.PageSize + form_name.EmptyRows
if len(CCGetParam("field_name_" & Cstr(j), Empty))>0 then
response.write "Field value in row " & j & " is:" & CCGetParam("field_name_" & Cstr(j), Empty) & "<br>"
else
response.write "Field value is row " & j & " is empty<br>"
end if
next
This solution should work for controls of different types.
_________________
Regards,
Nicole |