• Fabrik4.5.3 for J!5.3.0 and J!4.2+is out

    You must update from Fabrik4.5.1 if you are running Joomla!5.3.0

    See Announcements

Adding a show-hide column feature

  • Views Views: 22,556
  • Last updated Last updated:

Navigation

Lists
   Editing a list
      List Filters
      List Joins
      List Pre-filters
      List Related data
   How do I ... Lists
      Filtering lists/tables
   How do I ... Lists Advanced
      Adding a horizontal scrollbar
      Adding a show-hide column feature
      Alphabetical Filter
      Creating a custom list template
      Custom Styling a List
      Display List Filter Horizontally
      Export to CSV - Customizing
      Export to CSV without using dialog
      Override a Specific Field
      Remove a list column
      User ajax in list: Toggle Yes/No-Element
   List delete confirmation (+)
   List Plugins
      Article list plugin (+)
      Can Edit Row list plugin
      Can Select Row list plugin
      Copy list plugin
      Download list plugin
      Email/SMS list plugin
      Filter View list plugin (+)
      Inline Edit list plugin
      Javascript list plugin (+)
      Javascript table plugin
      Link list plugin
      List CSV list plugin
      Lockrow List Plugin
      Order list plugin
      PHP Events list plugin
      PHP list plugin
      Pivot list plugin
      Radius Search list plugin
      SQL Cache list plugin
      Update Columns list plugin
      Webservice list plugin
   pre-filters
   Sorting data

Wiki index

Page

  • Contents

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

    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