-
A new version of Full Calendar is now available.
See the details here
Adding a show-hide column feature
- Views Views: 21,845
- 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: