DXBLouie
Posts: 21
|
| Posted: 05/19/2011, 8:55 AM |
|
i have an editable grid with the following custom code on "before show row" event:
global $Tpl;
if ($Container->product_id->GetValue()>0){
$Tpl->SetVar("update_readonly","readonly");
}else{
$Tpl->SetVar("update_readonly","");
}
the code above automatically disables all the input fields on rows with existing data, while keeping new grid rows enabled for new data entry.
the one thing i'm trying to do now, is add a checkbox before every field that allows an admin to unlock a disabled row for editing.
permissions aside, i totally suck at JS, and the few examples i found around specifically require the name of the input field to be unlocked, which i don't have as it's generated on the fly..
basically the editable grid is displayed with each row of existing data disabled for data-entry, till the checkbox on that row is clicked, and the row is then enabled and data can be edited.
any suggestions?
|
 |
 |
datadoit
|
| Posted: 05/19/2011, 9:21 AM |
|
Couple of things to be aware of... CodeCharge will post a disabled field
as null, so it'll blank out any field value you may have there. To get
around this don't bind the disabled input to a database field, and
create an associated hidden input that does bind to the database field.
Use the DLookup action to get the field's value BeforeShowing it.
When submitting, use javascript to copy the value from the
disabled/enabled field to the hidden field which is bound to the
database table field.
Secondly, when attempting to get the field's value via javascript,
you'll need to know the row number for the control. See
http://forums.codecharge.com/posts.php?post_id=60507
I can see what you're attempting to do. Sort of like working in a
general ledger of an accounting system. Will require quite a bit of
custom coding both server-side and javascripting (maybe AJAX also).
|
|
|
|
DXBLouie
Posts: 21
|
| Posted: 05/19/2011, 9:32 AM |
|
sorry i forgot to add that within the HTML template, i added {update_readonly} to input objects
i.e:
<input id="productspart_number_{products:rowNumber}" value="{part_number}" name="{part_number_Name}" {update_readonly}>
|
|
|
|
DXBLouie
Posts: 21
|
| Posted: 05/19/2011, 9:34 AM |
|
datadoit: thanks for the response
i'm using the readonly attribute instead of disabled.. that achieves exactly the same thing while allowing the readonly data to be posted :)
my issue is to trigger the fields back on (basically how to unset the readonly attribute)
|
|
|
|
datadoit
|
| Posted: 05/19/2011, 9:49 AM |
|
See http://www.tek-tips.com/viewthread.cfm?qid=1210105&page=1
|
|
|
|
DXBLouie
Posts: 21
|
| Posted: 05/19/2011, 9:55 AM |
|
i'm looking into something like that.. only problem is that this script requires the name of the field (in the example: myTextArea) to be passed on.. and the fields are dynamically generated based on the row number
i'm trying a couple tweaks, but mind you my JS knowledge is close to 0
|
|
|
|
DXBLouie
Posts: 21
|
| Posted: 05/19/2011, 11:38 AM |
|
i got it!!! :D
i added this in the head area:
<script language="javascript">
function toggle_readonly(checkboxid,fieldid_1,fieldid_2,fieldid_3,fieldid_4,fieldid_5,fieldid_6,fieldid_7) {
var x = document.getElementById(checkboxid);
if(x.checked){
document.getElementById(fieldid_1).readOnly=false;
document.getElementById(fieldid_2).readOnly=false;
document.getElementById(fieldid_3).readOnly=false;
document.getElementById(fieldid_4).readOnly=false;
document.getElementById(fieldid_5).readOnly=false;
document.getElementById(fieldid_6).readOnly=false;
document.getElementById(fieldid_7).readOnly=false;
}else{
document.getElementById(fieldid_1).readOnly=true;
document.getElementById(fieldid_2).readOnly=true;
document.getElementById(fieldid_3).readOnly=true;
document.getElementById(fieldid_4).readOnly=true;
document.getElementById(fieldid_5).readOnly=true;
document.getElementById(fieldid_6).readOnly=true;
document.getElementById(fieldid_7).readOnly=true;
}
}
</script>
then in the grid, i added a checkbox and edited it as follows:
<input
id="{CheckBox1_Name}_{products:rowNumber}"
value="1"
type="checkbox"
name="{CheckBox1_Name}"
{CheckBox1}
onclick="toggle_readonly(
'{CheckBox1_Name}_{products:rowNumber}',
'productsbrand_id_{products:rowNumber}',
'productspart_number_{products:rowNumber}',
'productsdescription_{products:rowNumber}',
'productscost_price_{products:rowNumber}',
'productsoriginal_srp_{products:rowNumber}',
'productsshipping_estimate_{products:rowNumber}',
'productssrp_{products:rowNumber}')"
>
the only additional bit i had to do was change input id="checkbox1" to input id="{CheckBox1_Name}_{products:rowNumber}" to give each checkbox a unique ID
finally in the code, i added a before show event with the following custom code:
global $Tpl;
if ($Container->product_id->GetValue()>0){
$Tpl->SetVar("readonly_field","readOnly");
}else{
$Tpl->SetVar("readonly_field","");
}
and i added {readonly_field} towards the end of each <input> tag
i.e:
<input id="productspart_number_{products:rowNumber}" value="{part_number}" maxlength="250" size="15" name="{part_number_Name}" {readonly_field}>
this works like a charm..
the editable grid shows up, with the filled rows set to read-only by default till you click the checkbox to their left
the empty rows are editable.
now following is the todo list:
1. apply the read-only attribute to a <select>
2. show the checkboxes only on rows with data (it's pointless being able to lock/unlock empty rows)
3. show the checkboxes only for users with edit rights
|
|
|
|
|
