-
Hello Fabrik Community
Fabrik is now in the hands of the development team that brought you Fabrik for Joomla 4. We have recently transitioned the Fabrik site over to a new server and are busy trying to clean it up. We have upgraded the site to Joomla 4 and are running the latest version of Fabrik 4. We have also upgraded the Xenforo forum software to the latest version. Many of the widgets you might have been used to on the forum are no longer operational, many abandoned by the developers. We hope to bring back some of the important ones as we have time.
Exciting times to be sure.
The Fabrik 4.0 Official release is now available. In addition, the Fabrik codebase is now available in a public repository. See the notices about these in the announcements section
We wish to shout out a very big Thank You to all of you who have made donations. They have really helped. But we can always use more...wink..wink..
Also a big Thank You to those of you who have been assisting others in the forum. This takes a very big burden off of us as we work on bugs, the website and the future of Fabrik.
Adding a show-hide column feature
- Views Views: 21,073
- Last updated Last updated:
-
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:
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).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
}
}?>
In Fabrik2:
In Fabrik3:<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>
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.<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>
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):
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>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>
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: