AppGini Community Forums

Almost all items have an ID. That is easy to make adjustments in tablename.php or tablename_dv.js.
As described in the Udemy course, I use tabs and the horizontal layout. That works perfectly. See the example below. For users with read-only permission, it looks like this: The radio buttons are not displayed properly. The cause is the absence of an ID.

Below the code from the tablename-dml.php script. The first line is the original code, the second the custom code, with id.
// $jsReadOnly .= "\tjQuery('input[name=rms_mv]').parent().html('<div class=\"form-control-static\">' + jQuery('input[name=rms_mv]:checked').next().text() + '</div>')\n";

$jsReadOnly .= "\tjQuery('input[name=rms_mv]').parent().html('<div class=\"form-control-static\" id=\"rms_mv\">' + jQuery('input[name=rms_mv]:checked').next().text() + '</div>')\n";

After this adjustment, the radio button is displayed properly: Question: is there perhaps another way to solve this problem?
After the generation, the changes are gone.

Hi,

how did you put your fields in the tabs? Especially for the radio button.

In the normal situation where users can update, the radio buttons have an id in the generated template and dml script.
See the code below

/* change the layout only if this is not the print preview */
if(!isset($_REQUEST['dvprint_x'])) {

ob_start(); ?>
// creating tabs
<div id="form-tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#relatieadres" data-toggle="tab">Relatieadres</a></li>
<li><a href="#postbusadres" data-toggle="tab">Postbus</a></li>
<li><a href="#factuuradres" data-toggle="tab">Factuuradres</a></li>
</ul>

<ul class="tab-content">
<div class="tab-pane form-inline active" id="relatieadres"></div>
<div class="tab-pane form-inline" id="postbusadres"></div>
<div class="tab-pane form-inline" id="factuuradres"></div>
</ul>
</div>

// define fields for each tab in order as they are shown
<script>
$j(function(){
$j('#form-tabs').appendTo('#adm_relatie_mutaties_dv_form');

/* fields to move to the Relatieadres tab */
$j('#rms_id').parents('.form-group').appendTo('#relatieadres');
// ......
$j('#rms_org_mv').parents('.form-group').appendTo('#relatieadres');
// radio buttons: each choice has his own id
$j('#rms_mv0').parents('.form-group').appendTo('#relatieadres');
$j('#rms_mv1').parents('.form-group').appendTo('#relatieadres');
$j('#rms_mv2').parents('.form-group').appendTo('#relatieadres');
// for read-only form, change id in table_name_dml.php
$j('#rms_mv').parents('.form-group').appendTo('#relatieadres');
.......
//
/* fields to move to the Postbus tab */
$j('#rms_org_postbus').parents('.form-group').appendTo('#postbusadres');
$j('#rms_postbus').parents('.form-group').appendTo('#postbusadres');
//
/* fields to move to the Factuuradres tab */
$j('#rms_org_naam_f').parents('.form-group').appendTo('#factuuradres');
$j('#rms_naam_f').parents('.form-group').appendTo('#factuuradres');
// .......

/* Fix for a bug with lookup drop-downs and date fields to set their correct width */
setInterval(function() {
$j('.select2-container')
.parents('.form-control-static')
.removeClass('form-control-static');
$j('table.form-control-static').removeClass('form-control-static');
}, 1000);
/* 5.70: Fix for a bug with lookup drop-downs to set their correct width */
$j('.form-inline .form-control-static').addClass('option-list').css({'display': 'unset'});
})

</script>

// define two columns
<style>
#form-tabs .nav-tabs a { display: block !important; }
.tab-content { padding-top: 3em; }
@media (min-width: 768px) {
.form-inline .form-group {
width: 48%;
margin-bottom: 0.75em;
vertical-align: top;
}
}
.form-inline .form-control {
width: 100% !important;
}
</style>

<?php
$html .= ob_get_clean();
}

Hi,

maybe you can try to move the complete div (for the radio buttons) instead of moving each one by one.

Try

$j("label[for='##RADIOBUTTONLABEL##']").parents('.form-group').appendTo('#relatieadres');

This sugestion does not work, neither for the normal nor for the read-only situation. See screenprints + code below:
When users can update: When read only (with added Id in tablename-dml.php)

Hi,

what was the result?
Can you post the script to change the layout?

This is the changed code in table_name.php: You see the result in previous post: radio button M/V not in the tab, but in the 'header'.

Hi,

you need to replace the ##RADIOBUTTONLABEL## with your label text.

As I see from your screenshot it should be in your case:

$j("label[for='rms_mv']").parents('.form-group').appendTo('#relatieadres');

Can you try this

Yes, this works.
Thank you very much!