How the 'Column Visibility' is applied in 'Custom Template'
Column Visibility in Custom Template
-
- User
- Posts: 8
header:
<?php if(IsExport("print")) {
<script>
loadjs.ready("load", function () {
//$(".ew-grid").removeClass();
$(".printMe").click(function() {
$("#print-area").print();
});
});
</script>
<div id="print-area" class="border border-dark p-3 print-view">
<div id="no-print" class="no-print">
<a href="#" class="printMe" alt="Print">
<i data-phrase="PrinterFriendly" class="fa-solid fa-print fs-3 ew-icon"></i>
</a>
</div>
<div class="print-header">
<div><img src="<?= GetUrl("assets/brands/logo.png") ?>" alt="logo"></div>
<h3 class="print-title"><?= CurrentPageHeading() ?></h3>
<div class="print-date"><?= date("F j, Y");?></div>
</div>
<?php }?>
<div class="p-3">
<table class="table border table-bordered table-striped table-sm ew-table">
<thead>
<tr class="ew-table-header print-table-header">
{{{list_options}}}
<th data-name="vehicle">{{{vehicle}}}</th>
<th data-name="owner">{{{owner}}}</th>
</tr>
</thead>
<tbody>
body
<tr{{{row_attrs}}}>
{{{list_options}}}
<td data-name="vehicle">{{{vehicle}}}</td>
<td data-name="owner">{{{owner}}}</td>
</tr>
footer
</tbody>
</table>
<?php if (IsExport("print")) { ?>
<div class="print-user"><?= $Language->phrase("Username").": ".CurrentUserName(); ?></div>
<?php } ?>
</div>
</div>
also i wrote javascript code for handle 'Column Visibility' as you see
function toggleColumnVisibility() {
// Get all buttons with the class "dropdown-item"
const buttons = document.querySelectorAll('.dropdown-item');
// Loop through each button
buttons.forEach(button => {
// Add click event listener to each button
button.addEventListener('click', function () {
// Get the data-field value of the div inside the button
const fieldName = this.querySelector('.form-check-input').getAttribute('data-field');
// Get all td elements with data-name equal to the field name
const ths = document.querySelectorAll('th[data-name="' + fieldName + '"]');
const tds = document.querySelectorAll('td[data-name="' + fieldName + '"]');
// Loop through each td element
ths.forEach(th => {
// Toggle visibility of the td element
th.style.display = (th.style.display === 'none') ? '' : 'none';
});
tds.forEach(td => {
// Toggle visibility of the td element
td.style.display = (td.style.display === 'none') ? '' : 'none';
});
});
});
but i prefer to handle it with standard PHPMAKER script
-
- User
- Posts: 9424
- As said Column Visibility is JavaScript, the selected column names are stored in local storage, you don't have the information on the server side (i.e. when
IsExport("print")
) unless you send the information to server side yourself. - Your Custom Template did not call
toggleColumnVisibility()
. - Your
toggleColumnVisibility
won't work because you select all '.dropdown-item' in the document but there is no dropdown-item in your Custom Template at all. (As explained, your HTML should be similar to the original HTML.) - I don't see why you need Custom Template. You better send the send the selected columns to the server side when you export to printer friendly and set the field's Visible property accordingly when
IsExport("print")
.
-
- User
- Posts: 8
Hi again.
- i loaded
toggleColumnVisibility()
in 'client script/global/page with/header-footer/client script' and it work fine. - above code is about 'List Page' Custom Template and only render list table so phpmaker generate 'Custom Visibility button' with class '.dowdown-item' .
IsExport("print")
is not important. i will do it as you say. The main question is how to choose the attribute ('data-name',datas-field' ...) of the td in table so that the 'Column Visibility' itself work and there is no need to use toggleColumnVisibility().