{% extends "admin/base_site.html" %} {% load i18n %} {% block bodyclass %}grp-doc{% endblock %} {% block content-class %}{% endblock %} {% block title %}Grappelli Documentation » Groups{% endblock %} {% block extrahead %} {% endblock %} {% block breadcrumbs %} {% endblock %} {% block content %}

Groups

Nesting Modules in Groups

A .grp-group encloses modules which belong together or should appear in a more associated way.

Usually a group starts with a heading but you might as well use it without one.
Just be aware of the fact that groups without headings do not appear in document outlines.

There are two different types of groups: Stacked Groups and Tabular Groups.

{% comment %}

Group

Module

Row

Row

Module

Row

Row

{% filter force_escape %}

Group

Module

Row

Row

Module

Row

Row

{% endfilter %}
{% endcomment %}

Stacked Groups

A .grp-group with the additional class .grp-stacked carries modules with the default layout (whereas modules in a tabular group appear in a table-like layout).

Stacked Group

Module

Row

Row

Module

Helptext

Helptext

{% filter force_escape %}

Stacked Group

Module

Row

Row

Module

Helptext

Helptext

{% endfilter %}

Container for Modules in a Stacked Group

Just in case you want to apply some actions to the modules (e.g. sorting them) you might wrap them with a .grp-items.

{% filter force_escape %}

Stacked Group

...
...
{% endfilter %}

Tabular Groups

A .grp-group with the additional class .grp-tabular carries modules with a table-like layout (whereas modules in a stacked group appear in the default way).

To accomplish that table-like structure we have to do a specific nesting the following elements:

  • The table is represented by a div.grp-module.grp-table
  • The thead is represented by a div.grp-module.grp-thead
  • Each tbody is represented by a div.grp-module.grp-tbody
  • Each tr is represented by a div.grp-tr
  • Each th is represented by a div.grp-th
  • Each td is represented by a div.grp-td

Each div.grp-module.grp-tbody may not contain a heading - if there is one you have to hide it!

Tabular Group

Table-Head 1
Table-Head 2
Table-Desk 1
Table-Desk 2
{% filter force_escape %}

Tabular Group

Table-Head 1
Table-Head 2
Table-Desk 1
Table-Desk 2
{% endfilter %}

Tools for Modules in a Tabular Group

In case you need tools for the div.grp-module.grp-tbody you have to put them in a div.grp-td with the additional class .grp-tools-container.

And of course you have to add an empty div.grp-th to the div.grp-module.grp-thead to preserve the table-like structure.

Tabular Group

Table-Head 1
Table-Head 2
{% filter force_escape %}

Tabular Group

Table-Head 1
Table-Head 2
. . .
{% endfilter %}

Collapsible Groups

Both types of groups can also easily be supplied with a collapsible mechanism.

To do so just add .grp-collapse to the .grp-group you want to be collapsible.

With adding .grp-open or .grp-closed you define whether the collapsible group is opened or closed initially.

Now you have to define a .grp-collapse-handler. Usually that's the heading of the collapsible group but you may assign it to other elements as well.

Finally you have to use some javascript code (e.g. with the source code below).

Feel free to combine collapsible groups with collapsible modules, non-collapsible modules and collapsible ones with groups, collapsible or not.

Group

Module

Row

Row

Module

Row

Row

{% filter force_escape %}

Group

Module

Row

Row

Module

Row

Row

{% endfilter %}
{% filter force_escape %}
(function($) {
    $(document).ready(function() {
    	$("#grp-content-container .grp-group").grp_collapsible_group();
        $("#grp-content-container .grp-collapse").grp_collapsible();
    });
})(grp.jQuery);
		    		{% endfilter %}
{% endblock %}