1. "Fabrik 4" helpers needed!

    You are invited to join other community members active in coding, maintaining and improving Fabrik. Please visit https://fabrik.help for more information!
    Dismiss Notice

Adding a show-hide column feature

Apr 7, 2014
Adding a show-hide column feature

  • Contents


    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)

() (20374 Views)
Last Modified: Apr 7, 2014 at 10:38 PM (Cached)
XenCarta PRO © Jason Axelrod from 8WAYRUN.COM