{% 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 is a wrapper for related modules. A group usually contains a heading. Although that heading is optional, groups without it do not appear in document outlines — besides, the heading is required if your group is collapsible.

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

Stacked Groups

A .grp-group with the additional class .grp-stacked contains 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

In case you want to apply actions to the modules (e.g. sorting), you need an additional wrapper .grp-items.

{% filter force_escape %}

Stacked Group

...
...
{% endfilter %}

Tabular Groups

A .grp-group with the additional class .grp-tabular contains modules with a table-like layout (whereas modules in a stacked group appear in the default way). To accomplish that table-like structure, you have to apply the following classes:

  • 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 must 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. You also 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

To make a group collapsible, just add .grp-collapse to the .grp-group. With adding .grp-open or .grp-closed you further define whether the group is opened or closed by default. The collapse handler is added with .grp-collapse-handler and it's usually the heading of the group (though you may assign the handler class to other elements as well). Finally, you have to use some javascript code (see the source code below).

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 %}