1. The 3.8 code for Fabrik is now available on github, in the 'master' branch. If you are familiar with updating Fabrik from github, we would appreciate it if you could test this code on J! 3.8 for us. Once we have some feedback, we'll build a 3.8 release.

Adding a show-hide column feature

Apr 7, 2014
Adding a show-hide column feature

  • Add a show-hide column feature (top)

    Make a clone of the List template upon which you want to base your modified template.

    First of all we want to create a list of checkboxes that will toggle on/off the table columns. You have to put this code in the default.php file:
    Code (PHP):
    <?php
        foreach ($this->headings as $key=>$label) {
            if (substr( $key, 0, strlen('fabrik_')) !== 'fabrik_'){
                ?>
                <label>
                    <input checked="checked" type="checkbox" value="<?php echo $key?>" class="togglecolumns" />
                    <?php echo strip_tags($label) ?>
                </label><br/>
                <?php
            }
    }?>
    Then we want to write some js code to observe each of the checkboxes and show/hide the columns content. Again, you put this code in the same file as the php code (default.php).

    In Fabrik2:
    Code (Javascript):
    <script><!--
        window.addEvent('domready', function(){
            //check initial state
            $$('.togglecolumns').each(function(i){
                if(i.getProperty('checked')){
                    $$('.'+i.value+'_heading').setStyle('display', _);
                    $$('.fabrik_row___'+i.value).setStyle('display', _);
                } else {
                    $$('.'+i.value+'_heading').setStyle('display', 'none');
                    $$('.fabrik_row___'+i.value).setStyle('display', 'none');
                }
            });
            $$('.togglecolumns').addEvent('click', function(e){
                e = new Event(e);
                var i = $(e.target);
                if(i.getProperty('checked')){
                    $$('.'+i.value+'_heading').setStyle('display', '');
                    $$('.fabrik_row___'+i.value).setStyle('display', '');
                } else {
                    $$('.'+i.value+'_heading').setStyle('display', 'none');
                    $$('.fabrik_row___'+i.value).setStyle('display', 'none');
                }
            });
        });
    --></script>
    In Fabrik3:
    Code (Javascript):
    <script><!--
        window.addEvent('domready', function(){
            //check initial state
            $$('.togglecolumns').each(function(i){
                if(i.getProperty('checked')){
                    $$('.'+i.value).setStyle('display', '');
                } else {
                    $$('.'+i.value).setStyle('display', 'none');
                }
            });
            $$('.togglecolumns').addEvent('click', function(e){
                e = new Event(e);
                var i = $(e.target);
                if(i.getProperty('checked')){
                    $$('.'+i.value).setStyle('display','');
                } else {
                    $$('.'+i.value).setStyle('display', 'none');
                }
            });
        });
    --></script>
    Note: This code does not take into account multiple groups: columns and header of columns will be hidden but not the group header if there exist.

    A nice improvement would be also to store the hidden/shown state in the session. Currently moving from one page to the next one will re-initialize the visible status.

    Tidying up(top)

    If your list of checkboxes is too long, put this under the script above (or add to your site's template CSS):
    Code (CSS):
    <style type="text/css"><!--
        .ulcustom {
            float: left;
            width: 100em; /* change this width according to your template - this results in 4 columns for me */
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .licustom {
            float: left;
            width: 16em;
            margin: 0;
            padding-top:20px;
            padding-left:20px;
        }
    --></style>
    Note: Using base ul or li, as opposed to a custom class, can result in unintended changes to the rest of your site. Hence using 'ulcustom' and 'licustom'</small>
    And replace the PHP code at the top of this page with:
    PHP:
    <ul class="ulcustom">
    <?php
        foreach ($this->headings as $key=>$label) {
            if (substr( $key, 0, strlen('fabrik_')) !== 'fabrik_'){
    ?>
                <li class="licustom">
                    <label>
                        <input type='checkbox' checked="checked" value='<?php echo $key?>' class='togglecolumns' />
                        <?php echo strip_tags($label) ?>
                    </label>
                </li>
    <?php
            }
        }?>
    </ul>

    Related Links:(top)