Adding a show-hide column feature

  • Views Views: 21,168
  • Last updated Last updated:

Navigation

  • Add a show-hide column feature​

    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:
    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:
    <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:
    <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​

    If your list of checkboxes is too long, put this under the script above (or add to your site's template CSS):
    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:​

Back
Top