Column Visibility in Custom Template

[kourosh]

How the 'Column Visibility' is applied in 'Custom Template'

[arbei]

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.

[kourosh]

do you know how to handle it in main list page?
what property does 'Column Visibility' effect on?

[arbei]

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.

[kourosh]

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

[arbei]

1. 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.
2. Your Custom Template did not call toggleColumnVisibility().
3. 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.)
4. 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").

[kourosh]

Hi again.

1. i loaded toggleColumnVisibility() in 'client script/global/page with/header-footer/client script' and it work fine.
2. above code is about 'List Page' Custom Template and only render list table so phpmaker generate 'Custom Visibility button' with class '.dowdown-item' .
3. 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().