{% 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 %}
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.
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).
Row
Row
{% filter force_escape %}
Stacked Group
Module
Row
Row
{% endfilter %}
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 %}
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:
Each div.grp-module.grp-tbody must not contain a heading (if there is one you have to hide it).
{% filter force_escape %}
Tabular Group
Table-Head 1
Table-Head 2
Table-Desk 1
Table-Desk 2
{% endfilter %}
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.
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).
Row
Row
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 %}