Need "collapse all groups" for list option "Group by"

blue-mouse · Aug 16, 2012

Hi,

I need an option "collapse all groups" or preferably an icon/button to swich on front-end beetween: "collapse all groups" - "expand all groups".
I need to use that in list view on front-end when grouping by an element/field.

My main issue for that I try to do is:
to add that option: "collapse all groups" - "expand all groups" for issue described in:
Fabrik Tutorial - Category: 02 - Digging Deeper - 08 - One To Many Relationships

In my list view, like in that tutorial "One To Many Relationships" I could use default Template ( + needed option: "collapse all groups" - "expand all groups").
In tutorial was used different template, but with Fabrik: Edit list -- Layout: Front-end Template: default, i can collapse selected group - but need to have an option to collapse all group with "one click" and then expand only one selected group.

Is possible to add that option?

rob · Aug 20, 2012

if you update from github i've added a couple of js mehtod to do this:

to collapse:

Code:

   var list = Fabrik.blocks['list_1_com_fabrik_1'];
   list.groupToggle.collapse();

to expand:

Code:

   var list =  Fabrik.blocks['list_1_com_fabrik_1'];
   list.groupToggle.expand();

to toggle:

Code:

   var list =  Fabrik.blocks['list_1_com_fabrik_1'];
    list.groupToggle.toggle();

So you would need to make a custom template and add this

HTML:

   <a id="toggleGrouped">Toggle</a>

and this js (surround by a script tag - can't write that as the server blocks me sending that as part of this forum post)

Code:

    window.addEvent('domready', function () {
      document.id('toggleGrouped').addEvent('click', function () {
        var list = Fabrik.blocks['list_1_com_fabrik_1'];
        e.stop();
        list.toggle();
      });

cheesegrits · Aug 20, 2012

Those scripts don't look right. Text seems to be doubled up, and there's whitespace followed by an array reference?

Code:

var list =  Fabrik.blocks.list_1_com_fabrik_1.groupToggle.collapse()Fabrik.blocks.list_1_com_fabrik_1.groupToggle.collapse()     Fabrik.blocks['list_1_com_fabrik_1']

-- hugh

rob · Aug 20, 2012

ah yes - how odd! anyway ive altered the post thx Hugh

blue-mouse · Aug 27, 2012

I have no idea where to put that 2 code :-(

I try 2 ways:

1. Fabrik:edit list - Data - Group by - Front end template --- which currently is:

Code:

<html>
Cel Og?lny: -------- {ccjom_cc_cele_ogolne___cel_ogolny}
od: {ccjom_cc_cele_ogolne___od}  -  do:  {ccjom_cc_cele_ogolne___do}  ---------- data opracowania:  {ccjom_cc_cele_ogolne___data_opr},  opracowa?:  {ccjom_cc_cele_ogolne___opracowal} ------------   odpowiedzialny: {ccjom_cc_cele_ogolne___odpowiedzialny}</html>

I try to modify it:

Code:

<html>
<a id="toggleGrouped">Toggle</a>
<script type ="text/javascript">
window.addEvent('domready', function () {
      document.id('toggleGrouped').addEvent('click', function () {
        var list = Fabrik.blocks['list_1_com_fabrik_1'];
        e.stop();
        list.toggle();
      });
</script>
Cel Og?lny: -------- {ccjom_cc_cele_ogolne___cel_ogolny}
od: {ccjom_cc_cele_ogolne___od}  -  do:  {ccjom_cc_cele_ogolne___do}  ---------- data opracowania:  {ccjom_cc_cele_ogolne___data_opr},  opracowa?:  {ccjom_cc_cele_ogolne___opracowal} ------------   odpowiedzialny: {ccjom_cc_cele_ogolne___odpowiedzialny}</html>

And this doesn't work.

2. /components/com-fabrik/views/list/tmpl/default-bluemouse/custom_css.php with content:

Code:

<a id="toggleGrouped">Toggle</a>
<script type ="text/javascript">
window.addEvent('domready', function () {
      document.id('toggleGrouped').addEvent('click', function () {
        var list = Fabrik.blocks['list_1_com_fabrik_1'];
        e.stop();
        list.toggle();
      });
</script>

I copied /components/com-fabrik/views/list/tmpl/default to /components/com-fabrik/views/list/tmpl/default-bluemouse and try to modify file: /components/com-fabrik/views/list/tmpl/default-bluemouse/custom_css.php

That doesn't work too.

Can you tell me where to put that 2 code?

And without that code after upgrating to Fabrik 3.0.6.1 - 8 - g526c8bf I can only collapse one group and can't expand them again.
To expand again i can only - to refresh url in my browser.

Raindog · Aug 27, 2012

blue-mouse said:
And without that code after upgrating to Fabrik 3.0.6.1 - 8 - g526c8bf I can only collapse one group and can't expand them again.
To expand again i can only - to refresh url in my browser.

I can confirm - group expand don't working: http://www.gorod-dudinka.ru/fabriktest/

cheesegrits · Aug 27, 2012

There's a github issue open on the "can't re-open collpased group" bug, should be fixed soon.

The code Rob gave you needs to go in default.php. The script itself would go at the top, and the link would go wherever you want the link in the visible list structure.

-- hugh

blue-mouse · Aug 28, 2012

cheesegrits said:
There's a github issue open on the "can't re-open collpased group" bug, should be fixed soon.

The code Rob gave you needs to go in default.php. The script itself would go at the top, and the link would go wherever you want the link in the visible list structure.

-- hugh

Need to put code Rob to:

Code:

/components/com-fabrik/views/list/tmpl/default-bluemouse/default .php

? That template it my copy of /components/com-fabrik/views/list/tmpl/default.

rob · Aug 28, 2012

if you have 'default-bluemouse' selected as the list template the yes the code I posted would go at the bottom of

/components/com-fabrik/views/list/tmpl/default-bluemouse/default.php

blue-mouse · Nov 22, 2012

It doesn't work for me.

I have a problem to analyze this 5 code ( 3 + 1 javascript, and 1 html).
I can't guess how to put them together at the bottom of my default.php file.

blue-mouse · Nov 23, 2012

MY file default.php is:

Code:

<?php if ($this->tablePicker != '') { ?>
	<div style="text-align:right"><?php echo JText::_('COM_FABRIK_LIST') ?>: <?php echo $this->tablePicker; ?></div>
<?php } ?>
<?php if ($this->params->get('show-title', 1)) {?>
	<h1><?php echo $this->table->label;?></h1>
<?php }?>

<?php echo $this->table->intro;?>
<form class="fabrikForm" action="<?php echo $this->table->action;?>" method="post" id="<?php echo $this->formid;?>" name="fabrikList">

<?php echo $this->loadTemplate('buttons');
if ($this->showFilters) {
	echo $this->loadTemplate('filter');
}
//for some really ODD reason loading the headings template inside the group
//template causes an error as $this->_path['template'] doesnt cotain the correct
// path to this template - go figure!
$this->headingstmpl =  $this->loadTemplate('headings');
?>


<div class="fabrikDataContainer">

<a href="#toggleGrouped">Toggle</a>


<?php foreach ($this->pluginBeforeList as $c) {
	echo $c;
}?>
	<div class="boxflex">
		<table class="fabrikList" id="list_<?php echo $this->table->renderid;?>" >
		 <tfoot>
			<tr class="fabrik___heading">
				<td colspan="<?php echo count($this->headings);?>">
					<?php echo $this->nav;?>
				</td>
			</tr>
		 </tfoot>
		 <!--
		 <thead style="<?php echo $this->emptyStyle?>">
		 	<tr>
		 		<td colspan="<?php echo $this->colCount;?>">
		 			<div class="emptyDataMessage">
						<?php echo $this->emptyDataMessage; ?>
					</div>
				</td>
		 	</tr>
		 </thead>
		 -->
			<?php
			echo '<thead>'.$this->headingstmpl.'</thead>';
			if ($this->isGrouped && empty($this->rows)) {
				?>
				<tbody style="<?php echo $this->emptyStyle?>">
				<tr>
				<td class="groupdataMsg" colspan="<?php echo count($this->headings)?>">
				<div class="emptyDataMessage" style="<?php echo $this->emptyStyle?>">
				<?php echo $this->emptyDataMessage; ?>
									</div>
								</td>
							</tr>
						</tbody>
				<?php
			}
			$gCounter = 0;
			foreach ($this->rows as $groupedby => $group) {
			/*
			if ($gCounter == 0) {
				echo '<thead>'.$this->headingstmpl.'</thead>';
			}
			*/
			if ($this->isGrouped) {
			?>
			<tbody>
			<tr class="fabrik_groupheading">
				<td colspan="<?php echo $this->colCount;?>">
					<a href="#" class="toggle">
						<?php echo FabrikHelperHTML::image('orderasc.png', 'list', $this->tmpl, JText::_('COM_FABRIK_TOGGLE'));?>
						<?php echo $this->grouptemplates[$groupedby]; ?> ( <?php echo count($group)?> )
					</a>
				</td>
			</tr>
			</tbody>
			<?php }?>
			<tbody class="fabrik_groupdata">
			<tr>
				<td class="groupdataMsg" colspan="<?php echo count($this->headings)?>">
					<div class="emptyDataMessage" style="<?php echo $this->emptyStyle?>">
						<?php echo $this->emptyDataMessage; ?>
					</div>
				</td>
			</tr>
<?php
			foreach ($group as $this->_row) {
				echo $this->loadTemplate('row');
		 	}
		 	?>
		<?php if ($this->hasCalculations) { ?>
				<tr class="fabrik_calculations">
				<?php
				foreach ($this->calculations as $cal) {
					echo "<td>";
					echo array_key_exists($groupedby, $cal->grouped) ? $cal->grouped[$groupedby] : $cal->calc;
					echo  "</td>";
				}
				?>
				</tr>

			<?php }?>
			</tbody>
			<?php $gCounter++;
			}?>
		</table>
		<?php print_r($this->hiddenFields);?>
	</div>
</div>
</form>
<?php echo $this->table->outro;?>



<script type="text/javascript">
window.addEvent('domready', function () {
      document.id('toggleGrouped').addEvent('click', function () {
        var list = Fabrik.blocks['list_1_com_fabrik_1'];
        e.stop();
        list.toggle();
      });
</script>

<script type="text/javascript">

</script>

What is wrong

?
I am not advanced in scripting.

cheesegrits · Nov 23, 2012

Can you point me at your page? That's really the only way I can debug JS issues.

-- hugh

troester · Nov 23, 2012

Does your list really have id=1?

Without checking any thing else: I think you must use
Fabrik.blocks['list_X_com_fabrik_X'] (X= your list id)

blue-mouse · Nov 26, 2012

cheesegrits said:
Can you point me at your page? That's really the only way I can debug JS issues.

-- hugh

I have pointed to you to my page in private message, you get an login + password.
My page is here: but It is neccessary to login to my page to see all menu with list.

My list is id=117 - i have modified the number from 1 --> to 117.
I have no idea what to modify else in default.php to have collapse/expand working.

blue-mouse · Dec 28, 2012

cheesegrits said:
Can you point me at your page? That's really the only way I can debug JS issues.

-- hugh

HI, hugh

I try other javascripts from: library jquery-1.8.3.min.js - and some of them work on my joomla site and i try to put them to my default.php where should be your javascript code.
I had small problems but generally javascript + jquery-1.8.3.min.js work when place them into default.php file.

So i have no idea why fabrik javascript-toggle-code doesn't work on my site.
Please have a look to my joomla Login you have on PM and if you need i created ftp user for you.

I have no idea to solve this problem by myself.

blue-mouse · Feb 19, 2013

Hi,
I have old problem with this "collapse all groups".
No idea why rob code doesn't work for me.

I try to use it for list ID=117.
Is possible to look at my site - necessary to login and password - i can send it to PM.

cheesegrits · Feb 20, 2013

I think Rob's code had a little error in it. Try this:

Code:

window.addEvent('domready', function () {
      document.id('toggleGrouped').addEvent('click', function () {
        var list = Fabrik.blocks['list_117_com_fabrik_117'];
        e.stop();
        list.groupToggle.toggle();
      });
});

Of course, keep the script tags around it as well.

-- hugh

blue-mouse · Feb 20, 2013

I have a problem how to write this code...
This doesn't work ???

cheesegrits · Feb 21, 2013

Can you go back a re-read Rob's post #2?

You haven't set up your links like he told you to. Which is like this:

Code:

<a id="toggleGrouped1">Toggle</a>[/script]

That is, an A link with an ID.  Doesn't really matter what the ID is, as long as it's unique, and it matches the ID you use in the script to attach the click event to.

Then, within the script tab, add that event handling code, which adds a click event to that ID.  Which you already have.  Just get rid of those links you've wrapped around the scripts, and change the links at the top of the table as explained above.

   -- hugh

blue-mouse · Feb 21, 2013

It doesn't really work for me ???

I don't know what to click to get result:
- collapse all
- expand all

Does this code on screen shot OK?

Need "collapse all groups" for list option "Group by"

Member

Administrator

Support Gopher

Administrator

Member

New Member

Support Gopher

Member

Administrator

Member

Member

Support Gopher

Administrator

Member

Member

Member

Support Gopher

Member

Attachments

Support Gopher

Member

Attachments

Useful links