Nicole
Posts: 586
|
| Posted: 06/28/2005, 2:20 AM |
|
This article describes how to create dependent listboxes within editable grids, without refreshing pages. Before you start I recommend that you look over Dependent Listboxes example and its description from CCS Examples Pack 2 solution
http://examples.codecharge.com/CCSExamplePack2/Dependen...dentListBox.php
http://examples.codecharge.com/CCSExamplePack2/Dependen...istBox_desc.php
I utilize the same approach and functions in my example. Here are the steps to follow
1. Create Editable Grid form using Editable Grid Builder with Confirm Delete or Confirm Submit action (client side). In my example the form name is "dep_emp" and it lists departments and employees. Listboxes are department_id master listbox and emp_id child listbox. There’s nothing else in the form and listboxes settings that would be worth attention.
2. Add the JavaScript code listed below inside the HTML <head> section. A brief description of these functions is provided in step 4.
<script language="JavaScript">
var DomYes=document.getElementById?1:0;
function set_child_listbox(parentObject,childArray,spanToHide) {
var name, len, id, pos;
name = parentObject.name;
len = parentObject.name.length;
pos = name.lastIndexOf("_");
id = name.substr(pos+1, len-pos);
var corr_nameName = "emp_id_" +id;
var tmp_name = document.getElementsByName(corr_nameName);
childObject = tmp_name[0];
//Clear child listbox
for(var j=childObject.length;j>0;j--) {
childObject.options[j] = null;
}
childObject.options[0] = new Option("Select Value","");
var sel_index = parentObject.options[parentObject.selectedIndex].value;
if (sel_index == "") {
childObject.disabled = true;
} else {
childObject.disabled = false;
var childIndex = 1;
for (j = 0; j < childArray.length; j++) {
if (childArray[j][1] == sel_index) {
childObject.options[childIndex] = new Option(childArray[j][2], childArray[j][0]);
childIndex++;
}
}
}
//Select first option
childObject.selectedIndex = 0;
//Hide dependent grid if it exists
if (spanToHide != "") {
if (DomYes) {
document.getElementById(spanToHide).style.display="none";
} else {
document.all[spanToHide].style.display="none";
}
}
}
function filter_child_listbox() {
initdep_empElements();
for(var j = 0; j < dep_empElements.length-dep_empEmptyRows; j++){
var tmp = dep_empElements[j][dep_empemp_idID].value;
set_child_listbox(dep_empElements[j][dep_empdepartment_idID], Employee,'');
dep_empElements[j][dep_empemp_idID].value = tmp;
}
}
</script>
3. Use the following steps to create an invisible grid within the JavaScript section, which will be used to output JavaScript array with all department and employee names.
- While in the HTML mode position the cursor before the </script> tag and use Grid Builder to create the employees grid that is based on the employees table.
- On Step 2 of the builder select the fields: emp_id, department_id and emp_name ; and in the "Order By" select emp_name.
- On Step 4 select "No Sorting" and "No Page Navigator". Also leave blank the "Records Per Page" property and "No Records Found Message" options.
- Delete all HTML tags from the new grid, then add the code
<!-- BEGIN Separator -->,<!-- END Separator -->
after the Row block.
Enter "var Product = new Array("
before the Row block and
");"
after the Separator block.
-Inside the Row block add "new Array( )" and comma separators ",". Also enclose the label in single quotes as it will output text values.
You should end up with the code like this:
<!-- BEGIN Grid employees -->
var Employee = new Array(
<!-- BEGIN Row -->
new Array({emp_id}, {department_id}, '{emp_name}')
<!-- END Row --><!-- BEGIN Separator -->,<!-- END Separator -->
);
<!-- END Grid employees -->
</script>
It should be located after previously mentioned JS functions but before the closing </script> tag.
4. Add function calls.
Assign set_child_listbox() function to onChange event (client side) of master (department_id) listbox directly in the HTML code
<select class="CaravanSelect" name="{department_id_Name}" onchange="set_child_listbox(this, Employee,'');">
This function filters the child listbox (employees) that corresponds to a selected master listbox in a given row. The function is modified a bit. Taking into account that control names in editable grids contain row numbers (e.g. department_id_1, department_id_2, etc. where 1,2 are row numbers) in the first lines of modified function I retrieve the row number from parentObject.name and obtain child object.
That's why I excluded childObject parameter from this function.
Function filter_child_listbox() is called when the page loads. It filters child listboxes in every row and sets default values corresponding to values returned from the recordset. For better understanding of this function you can refer to another article that describes several ways of accessing controls on editable grid forms
http://forums.codecharge.com/posts.php?post_id=60507
Call this function in bind_events() CCS function:
function bind_events() {
...
filter_child_listbox();
forms_onload();
}
I used the sample Intranet database included with CCS.
_________________
Regards,
Nicole |
