Column Visibility in Custom Template
Posted: Wed Mar 27, 2024 5:18 pm
How the 'Column Visibility' is applied in 'Custom Template'
How the 'Column Visibility' is applied in 'Custom Template'
The feature is JavaScript, it won't work in Custom Template, unless your HTML in Custom Template is very similar to the original HTML in the List page. However, if the HTML table is so similar, you may not need to use custom template.
do you know how to handle it in main list page?
what property does 'Column Visibility' effect on?
arbei wrote:
it won't work unless your HTML in Custom Template is very similar to the original HTML in the List page
You may post your Custom Template for discussion.
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
IsExport("print")) unless you send the information to server side yourself. toggleColumnVisibility().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.)IsExport("print").Hi again.
toggleColumnVisibility() in 'client script/global/page with/header-footer/client script' and it work fine.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().