Page 1 of 1
Hide field on grid edit based on a value
Posted: Fri Jul 26, 2024 7:41 pm
by josejad
Hi:
I'm trying in a master/detail grid-edit or grid-add to hide fields in a card, if I choose a value in a select. (url PartesDiariosList?action=gridedit)
I have this code in Client-side events of the field, in order I got it in every row of the grid (v2024)
{ // keys = event types, values = handler functions
"change": function(e) {
// Your code
;
switch ($(this).val()) {
case "U":
console.log('fired')
$("#r_proyecto").hide();
break;
default:
$("#r_proyecto").show();
break;
}
}
}
But nothing happens. I'm trying to inspect the code to get the appropriate element to hide, but I can't find it (r_proyecto doesn't exist, I've tried with o_proyecto too)
This is the source code of one card:
<div class="row partes_diarios_observaciones">
<label class="col-sm-2 col-form-label ew-label">Observaciones</label>
<div class="col-sm-10"><div>
<input type="text" name="x3_observaciones" id="x3_observaciones" data-table="partes_diarios" data-field="x_observaciones" value="" size="30" maxlength="255" placeholder="Observaciones" data-format-pattern="" class="form-control">
<div class="invalid-feedback"></div>
<input type="hidden" data-table="partes_diarios" data-field="x_observaciones" data-hidden="1" data-old name="o3_observaciones" id="o3_observaciones" value="">
</div></div>
</div>
Thanks in advance
Re: Hide field on grid edit based on a value
Posted: Fri Jul 26, 2024 8:25 pm
by arbei
You better use .fields() plugin. There is no "#r_xxx" in Grid page.
Re: Hide field on grid edit based on a value
Posted: Sat Jul 27, 2024 2:50 am
by josejad
Thanks for the answer:
Following the examples, this code changes the value to "yyy" or "zzz", but not hide the field. :-(
{ // keys = event types, values = handler functions
"change": function(e) {
if (this.value == "U") {
$(this).fields("observaciones").value("yyy"); // Set value to FieldA
$(this).fields("observaciones").visible(false); // true to show, false to hide
} else {
$(this).fields("observaciones").value("zzz"); // Set value to FieldB
}
}
}
Re: Hide field on grid edit based on a value
Posted: Sat Jul 27, 2024 9:26 am
by arbei
There is no this.value if the field is a selection list.
Re: Hide field on grid edit based on a value
Posted: Sat Jul 27, 2024 4:24 pm
by josejad
Do you mean this.value == "U"?
The if is working and the code enters in the if part. A console.log(this.value) returns U
Re: Hide field on grid edit based on a value
Posted: Sat Jul 27, 2024 5:13 pm
by arbei
josejad wrote:
if I choose a value in a select...
What is the Edit Tag of the field? If it is "SELECT", there is no this.value, you should use $(this).val(). If this.value has value, then it is not "SELECT", and your code will work, partially. You need to use .visible(true) to unhide the field.
Also press F12 in your browser and go the Console panel to check for JavaScript errors, make sure $(this).fields("observaciones") has value.
Re: Hide field on grid edit based on a value
Posted: Mon Jul 29, 2024 1:36 am
by josejad
Yes, it's a SELECT.
With this code, I get no errors in console. Both this.value and $(this).val() shows "U" in console.
The values in observaciones change to "Changed to U" and "changed to another one", but always visible
{ // keys = event types, values = handler functions
"change": function(e) {
console.log(this.value);
console.log($(this).val());
if ($(this).val() == "U") {
$(this).fields("observaciones").visible(false); // true to show, false to hide
$(this).fields("observaciones").value('changed to U');
} else {
$(this).fields("observaciones").visible(true); // Set value to FieldB
$(this).fields("observaciones").value('changed to another one');
}
}
}
Re: Hide field on grid edit based on a value
Posted: Mon Jul 29, 2024 9:13 am
by arbei
You may right click and inspect the HTML element for the field "observaciones" in your browser, post the actual HTML for discussion.
Re: Hide field on grid edit based on a value
Posted: Mon Jul 29, 2024 3:09 pm
by josejad
If I'm not wrong, is the one on my first post
<div class="row partes_diarios_observaciones">
<label class="col-sm-2 col-form-label ew-label">Observaciones</label>
<div class="col-sm-10"><div>
<input type="text" name="x1_observaciones" id="x1_observaciones" data-table="partes_diarios" data-field="x_observaciones" value="4 extras" size="30" maxlength="255" placeholder="Observaciones" data-format-pattern="" class="form-control">
<div class="invalid-feedback"></div>
</div></div>
</div>
Re: Hide field on grid edit based on a value
Posted: Mon Jul 29, 2024 6:46 pm
by arbei
It seems that you are using Multi-Column with Grid-Edit, then you cannot use .visible(). You need to hide the field with correct code, try modify your code. You may want to see jQuery's doc on .closest() and .hide/show/toggle().
Re: Hide field on grid edit based on a value
Posted: Tue Jul 30, 2024 3:39 pm
by josejad
Thanks. Solved with this code:
{ // keys = event types, values = handler functions
"change": function(e) {
// find the container to 'observaciones'
var $fieldRow = $(this).closest(".card-body").find(".row.partes_diarios_observaciones");
console.log($fieldRow);
if ($(this).val() == "U") {
$fieldRow.hide();
$(this).fields("observaciones").value('changed to U');
} else {
$fieldRow.show();
$(this).fields("observaciones").value('changed to another one');
}
}
}
Re: Hide field on grid edit based on a value
Posted: Fri Aug 02, 2024 7:28 pm
by philip8922
I have also faced the same issue...
Re: Hide field on grid edit based on a value
Posted: Sun Aug 04, 2024 12:31 am
by josejad
So I hope this post had helped you.
Version v2024.14.0 changelog says:
- Improved: .fields() plugin .visible() method